input类型
类型值 | 描述 |
button | 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。 |
checkbox | 定义复选框。 |
colorNew | 定义拾色器。 |
dateNew | 定义 date 控件（包括年、月、日，不包括时间）。 |
datetime | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。 |
datetime-local | 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。 |
email | 定义用于 e-mail 地址的字段。 |
file | 定义文件选择字段和 “浏览…” 按钮，供文件上传。 |
hidden | 定义隐藏输入字段。 |
image | 定义图像作为提交按钮。(使用src属性提供路径) |
month | 定义 month 和 year 控件（不带时区）。 |
number | 定义用于输入数字的字段。 |
password | 定义密码字段（字段中的字符会被遮蔽）。 |
radio | 定义单选按钮。 |
range | 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。 |
reset | 定义重置按钮（重置所有的表单值为默认值）。 |
searchNew | 定义用于输入搜索字符串的文本字段。 |
submit | 定义提交按钮。 |
tel | 定义用于输入电话号码的字段。 |
text | 定义一个单行的文本字段（默认宽度为 20 个字符）。 |
time | 定义用于输入时间的控件（不带时区）。 |
url | 定义用于输入 URL 的字段。 |
week | 定义 week 和 year 控件（不带时区）。 |
HTML 表单自动验证
JavaScript提交表单时，可以在input标签内添加required属性，在内容为空的时候阻止表单提交。
使用required属性时添加oninvalid属性可以自定义提示文字
<form action="xxx" method="post">
<input type="text" name="fname" required oninvalid="setCustomValidity('不能为空')">
<input type="submit" value="提交">
</form>
<!-- IE9及更早版本不支持 -->HTML表单约束验证
autocomplete属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当autocomplete属性为on时，input标签在文字输入过后会显示历史输入过的文字
<form action="demo-form.php" autocomplete="on">
First name:<input type="text" name="names"><br>
</form>
当autocomplete属性为off时，则和on相反
<form action="demo-form.php" autocomplete="off">
First name:<input type="text" name="names"><br>
</form>
autofocus属性
autofocus 属性规定在页面加载时，域自动地获得焦点。同页面内多个input标签设置autofocus属性时，仅第一个有效。
<input type="text" name="names" autofocus>
<!-- IE9及更早版本不支持autofocus属性。 -->form属性
form属性可以使input标签不再form表单内时也属于form表单中的一部分
<form action="xxx" id="forms">
<input type="submit" value="提交">
</form>
<input type="text" form="forms" name="names">
<!-- IE中不支持这个属性 -->formaction 属性
formaction属性用于表单提交的URL地址，在提交按钮中使用，使用了formaction属性会覆盖form标签中的提交地址。
<form action='a.html'>
<input type="text" name="names">
<input type="submit" formaction="b.html">
</form>
<!-- 打开b.html页面 -->formmethod 属性
表单提交形式，使用方式同 formaction属性，值为post或get。
list 属性
list属性规定输入域的 datalist。datalist 是输入域的选项列表。
<input list="list">
<datalist id="list">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<!-- IE9及更早版本、Safari不支持datalist标签 -->min和max属性
min和max定义了input标签内文本的最大值和最小值。
输入 2000-01-01 之前的日期:
<input type="date" name="bday" max="1999-12-31"><br>
输入 2018-01-01 之后的日期:
<input type="date" name="bday" min="218-01-01"><br>multiple 属性
multiple可以在input标签类型为email和 file时规定其可选择多个值。
<input type="file" name="img" multiple>pattern 属性
当input标签为text，search，url，tel，email 和password类型时，pattern 属性使用正则表达式验证当中的值。
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<!-- IE9及更早版本、Safari不支持pattern属性 -->
