表单基本知识复习

提交表单

用户单击提交按钮或图像按钮时，就会提交表单。使用<input>或<button>都可以定义提交按钮，只要将其type 特性的值设置为"submit"即可，而图像按钮则是通过将的type 特性值设置为"image"来定义的。因此，只要我们单击以下代码生成的按钮，就可以提交表单。

Submit Form 只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（textarea 是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车键不会提交表单。以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。例如，下列代码会阻止表单提交。

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});

这里使用了前面跨浏览器事件中封装的EventUtil 对象，以便跨浏览器处理事件。调用prevetnDefault()方法阻止了表单提交。一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。

表单重复提交

提交表单时可能出现的最大问题，就是重复提交表单。在第一次提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果往往很麻烦（因为服务器要处理重复的请求），或者会造成错误（如果用户是下订单，那么可能会多订好几份）。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用onsubmit 事件处理程序取消后续的表单提交操作。

重置表单

在用户单击重置按钮时，表单会被重置。使用type 特性值为"reset"的或都
可以创建重置按钮，如下面的例子所示

通用重置按钮

<input type="reset" value="Reset Form">

自定义重置按钮

<button type="reset">Reset Form</button>

这两个按钮都可以用来重置表单。在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。
用户单击重置按钮重置表单时，会触发reset 事件。利用这个机会，我们可以在必要时取消重置操作。例如，下面展示了阻止重置表单的代码。

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});

与提交表单一样，也可以通过JavaScript 来重置表单，如下面的例子所示。

var form = document.getElementById("myForm");

//重置表单

form.reset();

与调用submit()方法不同，调用reset()方法会像单击重置按钮一样触发reset 事件。

在Web 表单设计中，重置表单通常意味着对已经填写的数据不满意。重置表单
经常会导致用户摸不着头脑，如果意外地触发了表单重置事件，那么用户甚至会很恼
火。事实上，重置表单的需求是很少见的。更常见的做法是提供一个取消按钮，让用户能够回到前一个页面，而不是不分青红皂白地重置表单中的所有值。

表单字段

可以像访问页面中的其他元素一样，使用原生DOM 方法访问表单元素。此外，每个表单都有elements 属性，该属性是表单中所有表单元素（字段）的集合。这个elements 集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、<textarea>、<button>和<fieldset>。每个表单字段在elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和name 特性来访问它们。下面来看一个例子。

var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

如果有多个表单控件都在使用一个name（如单选按钮），那么就会返回以该name 命名的一个NodeList。例如，以下面的HTML 代码片段为例。

<form method="post" id="myForm">
    <ul>
	    <li><input type="radio" name="color" value="red">Red</li>
	    <li><input type="radio" name="color" value="green">Green</li>
	    <li><input type="radio" name="color" value="blue">Blue</li>
    </ul>
</form>
var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true

以上代码显示，通过form.elements[0]访问到的第一个表单字段，与包含在form.elements
[“color”]中的第一个元素相同。

也可以通过访问表单的属性来访问元素，例如form[0]可以取得第一个表单字
段，而form["color"]则可以取得第一个命名字段。这些属性与通过elements 集
合访问到的元素是相同的。但是，我们应该尽可能使用elements，通过表单属性访问元素只是为了与旧浏览器向后兼容而保留的一种过渡方式。

共有的表单字段属性

能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作表单。例如，很多用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听submit 事件，并在该事件发生时禁用提交按钮即可。以下就是这样一个例子。

//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});

注意，不能通过onclick 事件处理程序来实现这个功能，原因是不同浏览器之间存在“时差”：有的浏览器会在触发表单的submit 事件之前触发click 事件，而有的浏览器则相反。对于先触发click 事件的浏览器，意味着会在提交发生之前禁用按钮，结果永远都不会提交表单。因此，最好是通过submit事件来禁用提交按钮。不过，这种方式不适合表单中不包含提交按钮的情况；如前所述，只有在包含提交按钮的情况下，才有可能触发表单的submit事件。

所有表单字段都有type 属性。对于<input>元素，这个值等于HTML 特性type 的值。对于其他元素，这个type 属性的值如下表所列。说明 HTML示例 type属性的值

单选列表 <select>...</select> "select-one"
多选列表 <select multiple>...</select> "select-multiple"
自定义按钮 <button>...</button> "submit"
自定义非提交按钮 <button type="button">...</button> "button"
自定义重置按钮 <button type="reset">...</buton> "reset"
自定义提交按钮 <button type="submit">...</buton> "submit"

共有的表单字段方法

focus()和 blur()
EventUtil.addHandler(window, "load", function(event){
document.forms[0].elements[0].focus();
});

要注意的是，如果第一个表单字段是一个<input>元素，且其type 特性的值为"hidden"，那么以上代码会导致错误。另外，如果使用CSS 的display 和visibility 属性隐藏了该字段，同样也会导致错误。
HTML5 为表单字段新增了一个autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript 就能自动把焦点移动到相应字段。例如：

<input type="text" autofocus>

共有的表单字段事件

blur：当前字段失去焦点时触发。
change：对于<input>和<textarea>元素，在它们失去焦点且value 值改变时触发；
对于<select>元素，在其选项改变时触发。
focus：当前字段获得焦点时触发。
change 事件在不同表单控件中触发的次数会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value 值改变时，才会触发change 事件。对于元素，只要用户选择了不同的选项，就会触发change 事件；换句话说，不失去焦点也会触发change 事件。
通常，可以使用focus 和blur 事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能（例如，为文本框显示一个下拉选项菜单）。change 事件则经常用于验证用户在字段中输入的数据。例如，假设有一个文本框，我们只允许用户输入数值。此时，可以利用focus 事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用blur 事件恢复文本框的背景颜色，利用change 事件在用户输入了非数值字符时再次修改背景颜色。下面就给出了实现上述功能的代码。

var textbox = document.forms[0].elements[0];
    EventUtil.addHandler(textbox, "focus", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if (target.style.backgroundColor != "red"){
    target.style.backgroundColor = "yellow";
    }
});
EventUtil.addHandler(textbox, "blur", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if (/[^\d]/.test(target.value)){
    target.style.backgroundColor = "red";
    } else {
    target.style.backgroundColor = "";
}
});
EventUtil.addHandler(textbox, "change", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if (/[^\d]/.test(target.value)){
    target.style.backgroundColor = "red";
    } else {
    target.style.backgroundColor = "";
    }
});

关于blur 和change 事件的关系，并没有严格的规定。在某些浏览器中，blur 事件会先于change
事件发生；而在其他浏览器中，则恰好相反。为此，不能假定这两个事件总会以某种顺序依次触发，这一点要特别注意。

文本框脚本

<input type="text" size="25" maxlength="50" value="initial value">

相对而言，元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用rows和cols 特性。其中，rows 特性指定的是文本框的字符行数，而cols 特性指定的是文本框的字符列数（类似于元素的size 特性）。与<input>元素不同，<textarea>的初始值必须要放在<textarea>和</textarea>之间，如下面的例子所示。

<textarea rows="25" cols="5">initial value</textarea>

另一个与的区别在于，不能在HTML 中给指定最大字符数。
无论这两种文本框在标记中有什么区别，但它们都会将用户输入的内容保存在value 属性中。可以通过这个属性读取和设置文本框的值，如下面的例子所示：

var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);
textbox.value = "Some new value";

选择文本

上述两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器（Opera 除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何时候被调用。下面来看一个例子。

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时候。因为这样做可以让用户不必一个一个地删除文本。下面展示了实现这一操作的代码。

EventUtil.addHandler(textbox, "focus", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
});