JavaScript--input

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属性 -->