JavaScript表单控件的属性、方法与相关操作

        在 JavaScript 中，form表单对应的是HTMLForm-Element类型，继承了HTMLElement因而与其他HTML元素具有相同的默认属性。form元素独有的属性和方法包括：

        acceptCharset--->服务器能够处理的字符集<==>HTML中的accept-charset特性

        action--->接受请求的URL<==>HTML中的action特性

        elements--->表单中所有控件的集合(HTMLCollection)

        enctype--->请求的编码类型<==>HTML中的enctype特性

        length--->表单中控件的数量

        method--->要发送的HTTP请求类型，通常是"get"或"post"<==>HTML的method 特性

        name--->表单的名称<==>HTML的name特性

        target--->用于发送请求和接收响应的窗口名称<==>HTML的target特性

        reset()--->将所有表单域重置为默认值

        submit()--->提交表单

       提交表单的两种方式，提交规则是(1)对表单字段的名称和值进行URL编码，使用和号(&)分隔(2)不发送禁用的表单字段(3)只发送勾选的复选框和单选按钮(4)不发送type为"reset"和"button"的按钮(5)多选选择框中的每个选中的值单独一个条目(6)在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为 "image"的<input>元素(7)<select>元素的值，就是选中的<option>元素的value特性的值，如果<option>元素没有value 特性，则是<option>元素的文本值

           A.单击提交或图像按钮<input type="submit">、<button type="submit">、<img type="image" src="...">，支持在相应控件获得焦点的情况下使用回车键提交，以此种方式提交的表单在请求发送给服务器之前会触发submit事件

           B.调用表单的submit方法提交，以此种方式提交的表单不会触发submit事件需要再此之前验证表单

      重复提交表单的解决方法

           A.第一次提交表单后禁用提交按钮

           B.利用onsubmit事件处理程序取消后续的表单提交操作

      重置表单的两种方式

           A.单击重置按钮<input type="reset">、<button type="reset">恢复页面初始值，以此种方法重置表单会触发reset事件

           B.调用表单的reset方法，以此种方法重置表单会触发reset事件

       表单控件的共有属性(除<fieldset>)

       disabled--->布尔值，表示当前字段是否被禁用

       form--->只读，指向当前字段所属表单的指针

       name--->当前字段的名称

       readOnly--->布尔值，表示当前字段是否只读

       tabIndex--->表示当前字段的切换(tab)序号

       type--->当前字段的类型，注意对于选择框是只读，单选列表为select-one，多选列表为select-multiple

       value--->当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径，对于选择框的这个属性如果没有选中项则保存空字符串，如果有一个选中项且该项已在HTML中指定value则等于这个value，如果该项在HTML中未指定value则等于该项的文本，如果是多个选中项则按前面的规则取第一个选中项的值或文本

       表单控件的共有方法

        focus()--->将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件，触发focus事件，如果表单字段是<input type="hidden">或者使用CSS的display和visibility属性隐藏的则会导致错误

        blur()--->从元素中移走焦点，触发blur事件

        控件分类

        A.文本框

           a1.单行文本框 <input type="text">

           a2.多行文本框<textarea>

           a1和a2共同方法select()--->选择文本框中的所有文本，应用场景--->全选文字，不必一个个删除字符  

        B.选择框

           b1.<select> HTMLSelectElement类型，属性和方法包括：

                multiple--->布尔值，表示是否允许多项选择<==>HTML中的multiple特性

                options--->控件中所有<option>元素的HTMLCollection

                size--->选择框中可见的行数<==>HTML中的size特性

                selectedIndex--->基于 0 的选中项的索引，如果没有选中项，则值为 -1 。对于支持多选的控件，只保存选中项中第一项的索引

                add(newOption, relOption)--->向控件中插入新<option>元素，位置在relOption之前

                remove(index)--->移除给定位置的选项

           b2.<option>HTMLOptionElement类型，属性和方法包括：

                index--->当前选项在 options 集合中的索引

                label--->当前选项的标签<==>HTML中的label特性

                selected--->布尔值，表示当前选项是否被选中，将这个属性设置为 true 可以选中当前选项

                text--->选项的文本

        添加选项：

               （1）DOM方式

                        //创建option对象

                          var newOption = document.createElement("option");

                       //添加option文本

                         newOption.appendChild(document.createTextNode("Option text"));

                      //设置option value值

                        newOption.setAttribute("value", "Option value");

                     //添加option对象

                       selectbox.appendChild(newOption);

               （2）Option构造函数方式

                       //创建option对象

                         var newOption = new Option("Option text", "Option value");

                      //添加option对象

                         selectbox.appendChild(newOption);

               （3）select的add方法

                        //添加option对象

                          selectbox.add(newOption,relOption)

        移除选项：

               （1）DOM方式

                        //移除option对象

                          selectbox.removeChild(selectbox.options[0]);

               （2）选择框的remove方法

                        //移除option对象

                         selectbox.remove(0);

               （3）移除选项置为null

                         selectbox.options[0]=null;

         C.表格     

           c1.<table> 属性和方法包括：

                caption--->保存着对<caption>元素的指针 

                tBodies--->是一个<tbody>元素的HTMLCollection

                tFoot--->保存着对<tfoot>元素的指针

                tHead--->保存着对<thead>元素的指针

                rows--->表格中所有行的HTMLCollection

                createTHead()--->创建<thead>元素，将其放到表格中，返回引用

                createTFoot()--->创建 <tfoot> 元素，将其放到表格中，返回引用

                createCaption()--->创建<caption>元素，将其放到表格中，返回引用

                deleteTHead()--->删除<thead>元素

                deleteTFoot()--->删除<tfoot>元素

                deleteCaption()--->删除<caption>元素

                deleteRow(pos)--->删除指定位置的行

                insertRow(pos)--->向rows集合中的指定位置插入一行

            c2.<tbody> 属性和方法包括：

                rows--->保存着<tbody>元素中行的HTMLCollection

                deleteRow(pos)--->删除指定位置的行

                insertRow(pos)--->向rows集合中的指定位置插入一行

            c3.<tr> 属性和方法包括：

                 cells--->保存着<tr>元素中单元格的HTMLCollection

                 deleteCell(pos)--->删除指定位置的单元格

                 insertCell(pos)--->向cells集合中的指定位置插入一个单元格，返回对新插入单元格的引用

        创建表格：

                        //创建 table
                          var table = document.createElement("table");
                          table.border = 1;
                          table.width="100%";
                        //创建 tbody
                          var tbody = document.createElement("tbody");
                        //添加tbody
                          table.appendChild(tbody);

               （1）DOM方式
                        //创建第一行
                          var row1 = document.createElement("tr");
                       //添加第一行
                          tbody.appendChild(row1);
                       //创建第一行第一个单元格
                         var cell1_1 = document.createElement("td");
                      //添加第一行第一个单元格的文本
                         cell1_1.appendChild(document.createTextNode("Cell 1,1"));
                     //添加第一行第一个单元格
                         row1.appendChild(cell1_1);

               （2）table属性和方法
                       //创建第二行并添加
                         tbody.insertRow(1);
                       //创建第二行第一个单元格并添加
                         tbody.rows[1].insertCell(0);
                       //创建第二行第一个单元格文本并添加
                         tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 2,2"));
                      //将表格添加到文档主体中
                         document.body.appendChild(table);

        删除表格：

                     //删除第一行第一个单元格(DOM)
                       row1.removeChild(row1.firstChild);
                    //删除第二行第一个单元格(table属性和方法)
                       tbody.rows[1].deleteCell(0);