Javascript学习笔记（详）（六）——表单

表单脚本

表单的基础知识

在javascript中，表单对应的是HTMLFormElement类型，继承自HTMLELement类型。独特的属性与方法：

• 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 特性。

通过documents.forms可以取得页面中所有表单，可以通过数值索引或name值来取得特定表单

提交表单

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif">

阻止表单提交：

    let form = document.getElementById("myForm");
    form.addEventListener("submit", function (event) {
   
        event.preventDefault();
    })

	let form = document.getElementById("myForm");
    form.submit();//不会触发submit事件

重置表单

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

阻止表单重置和利用javascript重置表单的操作与提交表单类似，只需将submit改为reset即可

表单字段

每个表单都有elements属性，是一个有序列表，包含表单的所有字段

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

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

共有的表单字段属性

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

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

    let form = document.getElementsByTagName('form')[0];
    //alert(form);
    // let colorFields = form.elements['color'];
    // let list = Array(colorFields);
    // alert(list);
    let field = form.elements[0];
    field.value = "Another value";
    field.focus();
    field.disable = true;
    field.type = "checkbox";//不推荐，但对<input>可行

	let form = document.getElementsByTagName('form')[0];
    form.addEventListener("submit", function (event) {
   
        let target = event.target;
        let btn = target.elements['submit-btn'];
        btn.disabled =true;
    })

共有的表单字段方法

focus()与blur()。focus()方法用于激活表单字段，使其可以响应键盘事件

    window.addEventListener("load", function (event) {
   
        document.forms[0].elements[1].focus();
    })

倘若是对<input type="hidden">的表单字段进行上述操作将会导致错误，通过CSS的display和visibility属性隐藏该字段都会导致错误

   //自动对焦
   window.addEventListener("load", function (event) {
   
        let element = document.forms[0].elements[0];
        if(element.autofocus === true){
   
            element.focus();
            console.log("JS focus");
        }
    })

blur()方法则相反

共有的表单字段事件

• blur：当前字段失去焦点时触发。

• change：对于<input>和<textarea>元素，在它们失去焦点且value 值改变时触发；对于<select>元素，在其选项改变时触发。

• focus：当前字段获得焦点时触发。

    let textbox = document.forms[0].elements[0];
    textbox.addEventListener("focus", function (event) {
   
        let target