Html5中input新增的表单元素和属性介绍。

input标签主要用于Web表单的创建交互，以便接受来自用户的数据。我们通过更改type属性的值，来实现不同的输入类型。在以前的写法中表单元素必须放在form元素所包含的里面，而在html5中，我们可以把它们写在页面上的任何一个地方，只需要给该元素增加一个form属性，form属性的值为form表单的id。例如：

<form method="get" id="test">  
      <input type="text" name="name"/>  
      <input type="password" name="password"/>  
      <input type="submit" value="提交">  
 </form>  
<input type="text" name="confirm" form="test">

html5新增表单属性

color：用于指定颜色的控件。

date：用于输入日期的控件（年，月，日，不包括时间）。

datetime：基于 UTC 时区的日期时间输入控件（时，分，秒及几分）。

datetime-local：用于输入日期时间控件，不包含时区。

email：用于编辑 e-mail 的字段。合适的时候可以使用 :valid 和 :invalid CSS 伪类。

month：用于输入年月的控件，不带时区。

number: 用于输入浮点数的控件。

range：用于输入不精确值控件。如果未指定相应的属性，控件使用如下缺省值： min：0 max：100 value：min + (max-min)/2，或当 max 小于 min 时使用。

search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

tel：用于输入电话号码的控件；换行会被自动从输入的值中移除A，但不会执行其他语法。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。

time：用于输入不含时区的时间控件。

url：用于编辑URL的字段。换行会被自动从输入值中移队。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。

week：用于输入一个由星期-年组成的日期，日期不包括时区。

使用上述属性的时候，当在表单提交，和触发填写时候，支持html5的浏览器会提示类型是否正确，如果没有设置novalidate属性当输入不正确是无法提交的。不支持的将以默认属性"text"。

html5新增form 属性

autocomplete：属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。<form autocomplete="on|off">

novalidate :属性规定当提交表单时不对其进行验证。如果使用该属性，则表单不会验证表单的输入。<form novalidate="novalidate">

input 属性

属性	值	描述
accept	mime_type	规定通过文件上传来提交的文件的类型。
align	left right top middle bottom	不赞成使用。规定图像输入的对齐方式。
alt	text	定义图像输入的替代文本。
autocomplete	on off	规定是否使用输入字段的自动完成功能。
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"）
checked	checked	规定此 input 元素首次加载时应当被选中。
disabled	disabled	当 input 元素加载时禁用此元素。
form	formname	规定输入字段所属的一个或多个表单。
formaction	URL	覆盖表单的 action 属性。（适用于 type="submit" 和 type="image"）
formenctype	见注释	覆盖表单的 enctype 属性。（适用于 type="submit" 和 type="image"）
formmethod	get post	覆盖表单的 method 属性。（适用于 type="submit" 和 type="image"）
formnovalidate	formnovalidate	覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。
formtarget	_blank _self _parent _top framename	覆盖表单的 target 属性。（适用于 type="submit" 和 type="image"）
height	pixels %	定义 input 字段的高度。（适用于 type="image"）
list	datalist-id	引用包含输入字段的预定义选项的 datalist 。
max	number date	规定输入字段的最大值。请与 "min" 属性配合使用，来创建合法值的范围。
maxlength	number	规定输入字段中的字符的最大长度。
min	number date	规定输入字段的最小值。请与 "max" 属性配合使用，来创建合法值的范围。
multiple	multiple	如果使用该属性，则允许一个以上的值。
name	field_name	定义 input 元素的名称。
pattern	regexp_pattern	规定输入字段的值的模式或格式。例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
placeholder	text	规定帮助用户填写输入字段的提示。
readonly	readonly	规定输入字段为只读。
required	required	指示输入字段的值是必需的。
size	number_of_char	定义输入字段的宽度。
src	URL	定义以提交按钮形式显示的图像的 URL。
step	number	规定输入字的的合法数字间隔。
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型。
value	value	规定 input 元素的值。
width	pixels %	定义 input 字段的宽度。（适用于 type="image"）

在下面的案例中，我们对一些常用的属性做了解释:

<body>
	<!--
		placeholder:用于在文本框未输入时提示作用
		autofocus:用于控件自动获取焦点
	-->
	<input type="search" name="key" value="" results="s" placeholder="君乐宝" autofocus="true">
	<input type="button" name="" value="搜索"><br>
	<!--
		novalidate:在控件中加入了required、emial、url等验证后，如果想让这些验证失效，可以在表单中将novalidate设置为tyue
	-->
	<form action="upload.php" method="post" accept-charset="utf-8" id="form1" novalidate="true">
		<!--
			required:必填
			autocomplete:在网页的文本框中输入部分内容或者双节时，经常会看到在下面显示输入过的内容，
			这就是html5的新特性：自动完成，如果不想使用此功能，将其设置为off即可
		-->
		<input type="text" name="UserName" value="" required autocomplete="off"><br>
		<!--
			multiple:在选择文件时，默认只能单选，加上这个属性后，则可以使用鼠标选中多个文件进行上传
		-->
		<label>选择文件</label>
		<input type="file" name="upload" value="" multiple="multiple"><br>
		<!--
			list：这个属性要和datalist元素一起使用，指定此文本框的可选择项，另外其相较于select的优点在于还可以输入
		-->
		<label>区号：</label>
		<input type="text" name="age" value="" list="list1"><br>
		<datalist id="list1">
	        <option value="0312">保定</option>
	        <option value="0311">石家庄</option>
	        <option value="010">北京</option>
	        <option value="0313">唐山</option>
	    </datalist>
		<!--
			formaction:可以更改点击此按钮式提交到服务器的处理程序
			formmethod:可以更改向服务器提交数据的方式
		-->
		<input type="submit" name="subsave" value="提交">
		<input type="submit" name="subresset" value="更改" formaction="1.php" formmethod="get">
	</form>
</body>

完结~~~~~~~~~~~~~

站长推荐

1.阿里云: 本站目前使用的是阿里云主机，安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动，优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台，如果你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/70