《JavaScript高级程序设计》读书笔记14.1表单基础知识

HTML中，表单是由<form>元素表示，在JavaScript中，表单则对应HTMLElement类型。
表单不仅具有其他HTML元素默认属性，还有自己独有属性。

acceptCharset：服务器能够处理的字符集；等价于 HTML中的 accept-charset 特性。
action：接受请求的 URL；等价于 HTML中的 action 特性。
elements：表单中所有控件的集合（HTMLCollection）
enctype：请求的编码类型；等价于 HTML中的 enctype 特性。
length：表单中控件的数量。
method：要发送的 HTTP请求类型，通常是”get”或”post”；等价于 HTML的 method 特性。
name：表单的名称；等价于 HTML的 name 特性。
reset()：将所有表单域重置为默认值。
submit()：提交表单。
target：用于发送请求和接收响应的窗口名称；等价于 HTML的 target 特性。

两种取得<form>元素引用的方法：

document.getElementById()
documen.forms，取得页面中所有表单集合。

1. 提交表单

提交按钮，将<input>或<button>的type特性的值设为“submit”。请求发送给服务器之前触发 submit 事件。

<!-- 通用提交按钮 --> 
<input type="submit" value="Submit Form"> 
 
<!-- 自定义提交按钮 --> 
<button type="submit">Submit Form</button>

图像按钮，将<input>的type特性的值设为“image”。请求发送给服务器之前触发 submit 事件。

1 2	<!-- 图像按钮 --> <input type="image" src="graphic.gif">

JS提交，以编程方式调用submit()方法也可以提交表单，不触发submit()事件。

var form = document.getElementById("myForm"); 
 
//提交表单 
form.submit();

阻止表单提交的方法,阻止事件的默认行为。

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

2. 重置表单

使用 type 特性值为”reset”的<input>或<button>都可以创建重置按钮。用户单击重置按钮重置表单时，会触发 reset 事件。

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

也可以通过 JavaScript 来重置表单,调用 reset()方法会像单击重置按钮一样触发 reset 事件。

1
2
3

var form = document.getElementById("myForm");
//重置表单
form.reset();

3. 表单字段

每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合。可以按照位置和 name 特性来访问它们。

3.1 共有的表单字段属性

除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。表单字段共有的属性如下：

disabled：布尔值，表示当前字段是否被禁用。
form：指向当前字段所属表单的指针；只读。
name：当前字段的名称。
readOnly：布尔值，表示当前字段是否只读。
tabIndex：表示当前字段的切换（tab）序号。
type：当前字段的类型，如”checkbox”、 “radio”，等等。
value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件
在计算机中的路径。

第一次单击后就禁用提交按钮方法：只要侦听 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;
});

除<input><filedset>外，其他表单字段的type属性值：

3.2 共有的表单字段方法

每个表单字段都有两个方法：focus() 和 blur()。

focus()方法用于将浏览器的焦点设置
到表单字段，即激活表单字段，使其可以响应键盘事件。
- HTML5为表单字段新增了一个 autofocus 属性，只要设置这个属性，
  不用 JavaScript就能自动把焦点移动到相应字段。
blur()方法，它的作用是从元素中移走焦点。

3.3 共有的表单字段事件

除了支持鼠标、键盘、更改和HTML事件之外，所有表单字段都支持下列 3个事件：

blur：当前字段失去焦点时触发。
change：对于<input>和<textarea>元素，在它们失去焦点且 value 值改变时触发；对于
<select>元素，在其选项改变时触发。
focus：当前字段获得焦点时触发。

功能描述： 假设有一个文本框，我们只允许用户输入数值。此时，可以利用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 = ""; 
    } 
});