【JS】【客户端】脚本化Web文档 —— HTML表单

HTML表单元素

HTNL元素	类型属性	事件处理程序	描述和事件
<input type="button">或 <button type="button">	"button"	onclick	按钮
<input type="checkbox">	"checkbox"	onchange	复选按钮
<input type="file">	"file"	onchange	载入web服务器的文件的文件名输入域； 它的value属性是只读的
<input type="hidden">	"hidden"	none	数据由表单提交，但对用户不可见
<option>	none	none	select对象中的单个选项， 事件处理程序在select对象上， 而非单独的option对象
<input type="password">	"password"	onchange	密码输入框，输入的字符不可见
<input type="radio">	"radio"	onchange	单选按钮，同时只能设定一个
<input type="reset">或 <button type="reset">	"reset"	onclick	重置表单的按钮
<select>	"select-one"	onchange	选项只能单选的列表或下拉菜单
<select multiple>	"select-multiple"	onchange	选项可以多选的列表
<input type="submit">或 <button type="submit">	"submit"	onclick	表单提交按钮
<input type="text">	"text"	onchange	单行文本输入域
<textarea>	"textarea"	onchange	多行文本输入域

选取表单和表单元素

表单和它们所包含的元素可以用如 getElementById() 和 getElementsByTagName() 等标准的方法从文档中来选取。

表单和元素的属性

在JS产生之前，要用一个专用的”提交“按钮来提交表单，用一个专用的”重置“按钮来充值个表单元素的值。

JavaScript的Form对象支持两个方法： submit() 和 reset() ，它们完成同样的目的。调用 Form 对象的 submit()方法来提交表单，调用 reset() 方法来重置表单元素的值。

所有表单元素通常都有一下属性：

• type —— 标识表单元素类型的只读的字符串。
• form —— 对包含元素的Form对象的只读引用
• name —— 只读的字符串，由HTML属性name指定
• value —— 可读写的字符串，指定了表单元素包含或代表的值。它就是当提交表单时发送到web服务器的字符串，也就是JS程序会感兴趣的内容。针对Text和Textarea元素，该属性值包含了用户输入的文本。

表单和元素的事件处理程序

每个Form元素都有一个 onsubmit 事件处理程序来侦测表单提交，还有一个 onreset 事件处理程序来侦测表单重置。 

表单提交前调用onsubmit程序，它通过返回 false 能够取消提交动作，这给JS程序一个机会来检查用户的输入错误，onsubmit事件处理程序只能通过单击”提交“按钮来触发。直接调用表单的submit()方法不触发 onsubmit 事件处理程序。

onreset事件处理程序和 onsubmit是类似的。它在表单重置之前调用，通过返回 false 能够阻止表单元素重置。类似 onsubmit 事件处理程序， onreset只能通过单击”重置“按钮来触发。直接调用表单的reset（）方法不触发 onreset事件处理程序。

当用户与表单元素交互时它们往往会触发 click 或 change 事件，通过定义 onclick 或 onchange 事件处理程序可以处理这些事件。

当按钮表单元素激活时它们会触发 click 事件，当用户改变其他表单元素所代表的值时它们会触发 change 事件。在一个文本域中该事件不是每次用于输入一个键值时才会触发，它仅当用户改变了元素的值然后将焦点移到其他元素上时才会触发。

表单元素在收到键盘的焦点时也会触发 focus 事件，失去焦点时会触发 blur 事件。

按钮

按钮本身没有默认行为，触发它有onclick事件处理程序，否则它并没有什么用处。

提交和重置元素本就是按钮，不同的是它们有与之关联的默认动作，如果onclick事件处理程序返回false，这些按钮的默认动作就不在执行了，但是更为常用的是使用Form对象本身的 onsbumit事件处理程序来执行表单的校验。

开关按钮 —— 复选框/单选元素

• 单选元素为整组有相关性的元素而设计的，组内所有按钮的HTML属性和name的值都相同，按这种方式创建的单选按钮是互斥的：选中其一，之前选中的即变成未选中。
• 复选框通常也整组使用并共享name属性，必须注意的是当利用作为表单属性的名字来选中这些元素时，它返回一个类数组对象而不是单个元素。

单选和复选框元素都定义了 checked 属性，该属性是可读写的布尔值，它指定了元素当前是否选中。defaultChecked属性也是布尔值，指定元素在第一次加载页面时是否选中。

单选和复选框元素本身不显示任何文本，它们通常和相邻的HTML文本一起显示。

当用户单击或复选开关按钮，单选或复选框元素触发 onclick 事件，如果由于单击开关按钮改变了它的状态，也触发 onchange 事件。

文本域

文本输入域的onchange事件处理程序是在用户输入新的文本或编辑已存在的文本时触发，它表明用户完成了编辑并将焦点移出了文本域。

不同的文本输入元素定义 onkeypress, onkeydown 和 onkeyup 事件处理程序。可以从 onkeypress 或 onkeydown事件处理程序返回 false，防止记录用户的按键。

选项框和选项元素

Select元素表示用户可以做出选择的一组选项，用Option元素表示。

浏览器通常将其渲染为下拉菜单的形式，但当其指定size属性大于1时，它将显示为列表中的选项。

Select元素能以两种不同的方式运作，这取决与它的type属性值是如何设置的。如果<select>元素有multiple属性，也就是select对象的type属性为”select-multiple“，那就允许用户选取多个选项。否则，如果没有多选属性，那只能选取单个选项，它的type属性值为”select-one“。

当用户选取或取消一个选项时，Select元素触发onchange事件处理程序：

• 针对”select-one“Select元素，它的可读写属性selectedIndex指定了哪个选项当前被选中。
• 针对”select-multiple“元素，单个selectedIndex属性不足以表示被选中的一组元素，在这种情况下，要判定哪些选中被选中，就必须遍历 options[] 数组的元素，并检测每个Option对象的selected属性值。