- 文本框脚本
- HTML5约束验证API
文本框脚本
在html中，有两种方式来表现文本框，一种是input单行文本框另一种是textarea多行文本框，这两种很相似，但是也有一些区别。
input元素可以通过size特性指定文本框中能够显示的字符数。通过value特性可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数，例：
<input type="text" size="25" maxlength="50" value="initial value">
<textarea>要制定文本框的大小，可以使用rows和cols特性，其中，rows特性指定的是文本框的字符行数，而cols特性指定的是文本框的字符列数，（类似于<input>元素的size特性）。与input不同的是，textarea的初始值需要放在<textarea></textarea>之间。另外一个是textarea不能指定最大字符数。
HTML5约束验证API
为了在将表单提交到服务器之前验证数据，HTML5新增了一些验证功能。
1.必填字段
第一种情况是在表单字段中指定了required属性，例如：
<input type="text" name="username" required>
任何标注有required的字段，在提交表单时都不能空着。这个属性适用于<input>、<textarea>、<select>字段。
2.其他输入类型
HTML5为input元素的type属性又增加了几个值，这些新的类型不仅能反映数据类型的信息，而且还能提供一些默认的验证功能。例如：
<input type="email" name="email">
<input type="url" name="homepage">
除了email和url以外，html5还定义了另外几个输入元素，例如：number、rang、datetime等等，但是有的浏览器并不支持，所以最好还是用正则的方式验证。
3.输入模式
HTML5为文本字段新增了pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。例如，如果只想允许在文本字段中输入数值，可以像下面的代码一样应用约束：
<input type="text" pattern="\d+" name="count">
注意模式的开头和末尾不用加^和$符号（假定已经有了）。
4.禁用验证
通过novalidate属性，可以告诉表单不进行验证
<form method="post" action="signup.php" novalidate>
<!--这里是表单元素-->
</form>
在js中可以设置这个值，如果这个值存在值为true，如果不存在则为false
例：document.forms[0].novalidate = true
选择框脚本
选择框是通过<select>和<option>元素创建的。它有自己独特的属性和方法
1.add（newOption，relOption）：向控件中插入新的<option>元素，其位置在相关项（relOption）之前
2.multiple：布尔值，表示是否允许多项选择；等价于html中multiple特性。
3.options：控件中所有<option>元素的HTMLCollection
4.remove（index）：移除给定位置的选项
5.selectedIndex：基于0的选中项的索引，如果没有选中项，则值为-1，对于支持多选的控件，只保存选中项第一项的索引
6.size：选择框中可见的行数；等价于html中的size特性
选择框的value属性由当前选中项决定，相应规则如下：
1.如果没有选中的项，则选择框的value属性保存空字符串
2.如果有一个选中项，则选择框value的值为选中项value值
3.如果有一个选中项，但该项的value值没有，则选择框value的值等于该项的文本
4.如果有多个选择项，则选择框value的值将依据前两条规则取得第一个选中项的值
在select中，为了便于访问数据，定义了以下属性
1.index：当前选项在options集合中的索引
2.label：当前选项的标签；等价于html的label特性
3.selected：布尔值，表示当前选项是否被选中。将这个属性设置为true可以选中当前选项
4.text：选项的文本
5.value：选项的值（等价于html中的value特性）
最后还有一点需要注意：选择框的change事件与其它表单字段的change事件触发的条件不一样。其他表单字段的change事件是在值被修改且焦点离开当前字段时触发，而选择框的change事件只要选中了选项就会触发。
