全面剖析 <input> 标签 ------ HTML\HTML5

最新推荐文章于 2019-10-12 15:31:10 发布

转载最新推荐文章于 2019-10-12 15:31:10 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tianjuan/p/5258136.html

文章标签：

#xhtml #前端 #ViewUI

本文详细剖析了HTML5中<input>标签的定义、使用、说明、属性、标签类型及其特性，包括新属性、兼容性及不同类型如text、password、checkbox等的应用实例。此外，还介绍了HTML5新增的type类型，如email、url、number、range、search、color等，以及如何在实际项目中灵活运用。

<input>标签因其形式多样、功能强大，当之无愧成为了WEB前端开发人员最钟爱的元素之一。下面就来对<input>做一个全面的剖析：

标签定义：

<input> 标签用于搜集用户信息。

标签使用：

<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。（根据不同的 type 属性值，输入字段拥有很多种形式。）　　

标签说明：

1）HTML 4.01 与 HTML5之间的差异：

　　　　在 HTML 4.01 中, "align" 数据已经不再使用。HTML5 中不支持该属性。

　　　　在 HTML5中, <input> 添加了几个属性，并且添加了对应的值。

2）HTML 与 XHTML之间的差异：

　　　　在 HTML 中，<input> 标签没有结束标签。

　　　　在 XHTML 中，<input> 标签必须被正确地关闭。

标签属性：

new ：HTML5 中的新属性

属性	值	描述
accept	mime_type	规定通过文件上传来提交的文件的类型。 (只针对type="file")
align	left Right top middle bottom	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
alt	text	定义图像输入的替代文本。 (只针对type="image")
autocomplete 　　 New	on off	规定输入字段是否应该启用自动完成功能。
autofocus 　　　 New	autofocus	规定输入字段在页面加载是否获得焦点。
checked	checked	规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
disabled	disabled	规定应该禁用的 <input> 元素。
form 　　　　New	formname	规定 <input> 元素所属的一个或多个表单。
formaction 　　　 New	URL	覆盖表单的 action 属性。(只针对 type="submit" 和 type="image")
formenctype 　　 New	application/x-www-form-urlencoded multipart/form-data text/plain	覆盖表单的 enctype 属性。 (只适合 type="submit" 和 type="image")。
formmethod 　　New	get post	覆盖表单的 method属性。 (只适合 type="submit" 和 type="image")
formnovalidate 　　New	formnovalidate	覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。
formtarget 　　　New	_blank _self _parent _top framename	覆盖表单的 target 属性。 (只适合 type="submit" 和 type="image")
height 　　 New	pixels	定义 input 字段的高度。（适用于 type="image"）
list New	datalist_id	引用包含输入字段的预定义选项的 datalist 。
max 　　 New	number date	规定输入字段的最大值。
maxlength	number	规定输入字段中的字符最大长度。
min 　　 New	number date	规定输入字段的最小值。
multiple 　　New	multiple	规定允许用户输入多个值到 input元素。
name	Filed_name	规定 input 元素的名称。
pattern 　　New	Regexp_pattern	规定输入字段的值的模式或格式。例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字
placeholder 　 New	text	规定帮助用户填写输入字段的提示信息。
readonly	readonly	规定输入字段是只读的。
required 　　New	required	规定输入字段的值为必需。
size	number	规定输入字段的宽度。
src	URL	规定显示为提交按钮的图像的 URL。 (只针对 type="image")
step 　　 New	Number_of_char	规定输入字的合法数字间隔。
type	见后详解	规定input元素的类型。
value	value	规定input元素的值。
width 　　New	pixels	规定 input 字段的宽度。 (只针对type="image")

标签类型（type）：

说明：所有主流浏览器都支持 type 属性，但是并非所有主流浏览器都支持所有不同的 input 类型。

text：默认。定义一个单行的文本字段。（默认宽度为20）

password：定义密码字段。（字符会被遮盖）

checkbox：复选框（checked属性：是否选中）

radio：单选框（name属性：指定多个单选框的在一个区域里进行单选操作）

button:定义普通按钮。常用于与JS一起启动脚本。（value属性：button按钮显示的文本）

reset：定义重置按钮(清除文本区域内容，重置所有表单值为默认值)

submit：定义提交按钮。

hide：定义隐藏输入字段。（存放仅用于自己使用的信息）

file：定义输入字段和 "浏览"按钮，供文件上传。

image：定义图像形式的提交按钮。

以下类型为 HTML5 新增 type 类型：

email：在提交表单时会自动验证email的格式是否正确,格式不正确浏览器是不允许提交的。opera浏览器中必须有name属性，否则不起作用。

<input type="email" name="email">

url：在提交表单时会自动验证url的格式。Opera中会自动在开始处添加http://.

<input type="url" />

number：可以限制输入的数字，若未输入则会抛出一个错误。（step为上一个数字与下一个数字的间隔）

<input type="number" max="12" min="0" step="1"/>

range：此类型将显示一个可拖动的滑块条，能够选择性的对限制范围内的数值进行设置。拖动时会反馈给value一个值.

<input type="range"  min="1" max="10" />

search：此类型表示输入的将是一个搜索关键字。

<input type="search" />

color：此类型表单可让选择颜色值,并反馈到value中.

<input type="color"/>

telephone：此类型可输入一个电话号码。

<input type="telephone" />

Date pickers (date, month, week, time, datetime, datetime-local)：( 供选取日期和时间 )

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

注：“HTML5新增属性的样例显示以及具体兼容性情况”可参考

　　　　　　http://mrthink.net/demo/ihtml520110220.htm 出处：Mr.Think博客

转载于:https://www.cnblogs.com/tianjuan/p/5258136.html