HTML Input Attributes
主要整理Input元素的一些属性。
value
<input type="text" name="firstname" value="John">
该属性设定了一个输入区域的初始值,即页面加载完用户看到的input的值。
readonly
<input type="text" name="firstname" value="John" readonly>
该属性指定了一个输入区域是只可以读,不能被改变的。这个属性不需要有一个值。It is the same as writing readonly="readonly".
disabled
<input type="text" name="firstname" value="John" disabled>
一个disabled的元素不可以被使用 un-usable 且 un-clickable 不可以点击,也不会被提交。该属性不需要有一个值。It is the same as writing disabled="disabled".
size
<input type="text" name="firstname" value="John" size="40">
该属性以 characters 为单位设定一个输入区域的大小(宽度)。
maxlength
<input type="text" name="firstname" maxlength="10">
该属性指定一个输入区域的最多允许输入的字符长度。但是该属性不提供任何反馈,如果你想提醒用户,必须写JS代码来实现。且为了安全地严格的输入,必须在接收端(服务器)检查是否满足约束条件。
HTML5 Attributes
autocomplete
<input type="text" name="firstname" value="John" size="40">
该属性设定一个表单 form 或者 input 输入区域是否开启自动填充功能。若开启,浏览器会根据用户之前填充的值来填满表单。
<form action="action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
你可以给一个表单开启自动填充功能,然后针对某个输入区域关闭自动填充。支持 autocomplete属性的输入类型有:text,search,url,tel,email,password,datepickers,range 和 color。有些浏览器需要开启自动填充功能该属性才有效。注意:Opera不支持该属性。
novalidate
<form action="action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
该属性是一个表单属性,指定表单数据在提交时不应该被证实有效。注意:IE9以前版本和Sarari不支持该属性。
autofocus
First name:<input type="text" name="fname" autofocus>
该属性是布尔类型的,当一个输入元素拥有该属性时,表示这个输入元素在页面加载时应该自动得到焦点(光标出现在这里)。
每个页面只允许出现一个autofocus特性,如果设置了多个autofocus特性,则相当于未指定此行为
form
<pre name="code" class="html"><form action="action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
该属性指定一个输入元素属于一个或多个表单。这样即使input元素没有嵌套在form元素里,仍然可以作为这个form的表单数据。如果想让一个input同时指向多个form,用 space-separated 列出表单的id。注意:IE不支持该属性。
formaction
<input type="submit" formaction="demo_admin.asp" value="Submit as admin">
该属性指定了在表单提交时将要处理输入控制的文件的URL,覆盖form元素里的 action 属性。用在 type="submit" 和 type="image" 的元素上。
formenctype
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
该属性指定了在提交到服务器时表单数据应该被如何编码(只针对使用 post 方法的表单),覆盖form元素里的 enctype 属性。用在 type="submit" 和 type="image" 的元素上。
formmethod
<input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST">
该属性指定了表单数据发送到action URL使用的HTTP方法,覆盖form元素里的 method 属性。用在 type="submit" 和 type="image" 的元素上。
formnovalidate
<input type="submit" formnovalidate value="Submit without validation">
该属性是布尔类型的,带有这个属性的input,在表单提交时不应该被认为是有效的。覆盖form元素里的 novalidate 属性。用在 type="submit" 的元素上。注意:Sarari不支持该属性。
formtarget
<input type="submit" formtarget="_blank" value="Submit to a new window">
该属性指定了一个名字或关键字(指出在提交表单后在哪里显示接收到的结果),覆盖form元素里的 target 属性。用在 type="submit" 和 type="image" 的元素上。
height, width
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
这两个属性指定了一个input元素的高和宽,只能用在 type="image" 的元素上。
list
该属性用来指向拥有与其值相同的id值的 <datalist> 元素,注意:Sarari不支持该属性。
min, max
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
这两个属性指定了一个input元素的最小值和最大值,支持该属性的输入类型有:number,range,date,datetime-local,month,time和week。注意:FF不支持该属性,IE支持也不够好。
multiple
Select images: <input type="file" name="img" multiple>
该属性是布尔类型的,带有这个属性的输入元素表示用户被允许键入一个以上的值。支持这个属性的输入类型有:email 和 file
pattern
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
该属性指定一个输入元素的值需要遵循的常规表达式。支持这个属性的输入类型有:text,search,url,tel,email 和 password。注意:IE9及之前版本和Sarari不支持该属性。
placeholder
<input type="text" name="fname" placeholder="First name">
该属性指定一个提示,描述该输入区域期望的输入值(一个输入值的例子或者一个简短的类型描述)。这个提示在用户键入值之前显示。支持这个属性的输入类型有:text,search,url,tel,email 和 password。
required
Username: <input type="text" name="usrname" required>
该属性是布尔类型的,带有这个属性的输入元素表示在提交表单前必须填写。支持这个属性的输入类型有:text,search,url,tel,email,password,data pickers, number, checkbox, radio 和 file。注意:IE9及之前版本和Sarari不支持该属性。
step
<input type="number" name="points" step="3">
该属性指定一个输入元素合法的数字间隔。上面的例子 legal numbers could be -3, 0, 3, 6, etc. 支持这个属性的输入类型有:number, range,date,datetime-local,month,time 和 week。
为了配合step特性,HTML5引入了 stepUp 和 stepDown 两个函数来根据step特性的值来增加或减少控件的值。
注意:IE9及之前版本和FF不支持该属性。