JavaScript form表单笔记

公用代码片

<form id="formId" action="#" name="myForm">    <input id="textId" type="text" name="myText" value="Text">    <input id="passwordId" type="password" name="myPassword"  value="Password">    <input id="radioId" type="radio" name="Radio" value="Radio">    <input id="checkboxId" type="checkbox" name="Checkbox" value="Checkbox">    <textarea id="textareaId" name="myTextarea" value="Textarea"></textarea>    <input id="fileId" type="file" name="myFile" value="File">    <input id="hiddenId" type="hidden" name="myHidden" value="Hidden">    <input id="imageId" type="image" name="myImage" value="Image">    <input id="resetId" type="reset" name="myReset" value="Reset">    <input id="submitId" type="submit" name="mySubmit" value="Submit">    <input id="res" type="reset" name="mySubmit" value="Reset">    <input id="sub" type="submit" name="mySubmit" value="Submit">    <button type="submit">button</button>    <select name="mySelect" id="select">        <option value="option">第一个</option>    </select>     <span></span></form><form action="#" name="myForm"></form>

A、form对象（js中是HTMLFormElement对象）：

1、js获取form对象的方法

1.1、class，tag，id获取

1.2、forms属性获取页面的所有表单

1.2.1、再由索引获取1.2.2、name属性值获取，有时候有多个form的name值一样只返回第一个，区别域表单字段的name属性获取

/* A.1.2.1 */var myForm = document.forms[0];/* A.1.2.2 */var myForm = document.forms['myForm'];console.log(myForm);/* 输出名字为myForm的表单中的第一个*/

2、form的属性

2.1、acceptCharset:服务器能够处理的字符集;

2.2、action:接受请求的URL;等价于HTML的action特性，其实就是设置url时候方式不同，在HTML
直接在form标签中action=”url”,而如果我们在js中设置时候就得通过myForm.action=url来设置；

2.3、elements：表单中所有控件的集合（HTMLCollection）；

2.4、enctype:请求的编码类型；等价于HTML中的enctype特性；

2.5、length:表单中控件的数量；

2.6、method:要发送的HTTP请求类型，通常是“get”和“post”,等价HTML的method特性

2.7、name: 表单的名称，等价HTML的name特性;

2.8、target: 值为发送请求和接受响应窗口的名称，等价于HTML的target特性；

2.9、reset():函数执行会将所有表单域重置为默认值；其实在input的type=”reset”的元素其实就
是绑定了一个点击事件，执行reset()函数，使得表单被重置；

2.10、submit(): 提交表单，

B、form控件：

1、js获取表控件的方法

1.1、class,tag,id获取

1.2、elements属性获取所有控件，注意不是表单元素获取不到，比如公用的代码片form中的span,
button可以

1.2.1、再索引获取1.2.2、name属性值获取，如果有多个表单元素，那么返回的是一个NodeList集合，需要再通过索引获取到具体的元素,type=“image”的input不能通过name属性获取；看代码片二

 /* B.1.2.1*/var myInput = myForm.elements[0];/* B.1.2.2 */console.log(myForm.elements['myText']);console.log(myForm.elements['myPassword']);console.log(myForm.elements['myRadio']);console.log(myForm.elements['myCheckbox']);console.log(myForm.elements['myTextarea']);console.log(myForm.elements['myFile']);console.log(myForm.elements['myHidden']);console.log(myForm.elements['myReset']);/* 以上都能输出获取到得表单元素*/console.log(myForm.elements['myImage']); /* type="image"的input由name获取不到输出 undefined */console.log(myForm.elements['mySubmit']); /* 多个同名的input被获取到存到集合里面输出 [input#submitId, input#res, input#sub, value: ""] */

C、表单提交：

1、通过HTML设置并且提交：

1.1、表单的提交：默认为get方式，可以通过在form标签中method="post"设置，1.2、如何提交表单，    1.2.1、点击submit和image按钮可以提交表单，或者某些表单元素获得焦点的时候按    enter键也会提交(不可行的是file，textarea其他可以，我在谷歌测试的)    1.2.2、通过自己定义的提交按钮比如将button标签的type设置为submit     1.2.3、表单提交的时候会在URL后面添加以下查询字符串        1.2.3.1 按image按钮提交            a.指定了空间的name和value                ?myText=Text                                  &myPassword=Password                &myTextarea=                &myFile=                &myHidden=Hidden                &myImage.x=8                &myImage.y=9                &myImage=Image                &mySelect=option#            b.只指定了name                ?myText=                &myPassword=                &myTextarea=                &myFile=                &myHidden=                &myImage.x=12                &myImage.y=9                &mySelect=第一个#            c.没指定name,                ?x=8&y=9#        1.2.3.2 按submit按钮提交            a.指定了空间的name和value                ?myText=Text                &myPassword=Password                &myTextarea=                &myFile=                &myHidden=Hidden                &mySubmit=Submit                &mySelect=option#                b.只指定了name                    ?myText=                    &myPassword=                    &myTextarea=                    &myFile=                    &myHidden=                    &mySubmit=提交                    &mySelect=第一个#                   c.没指定name,                ?#        1.2.3.3 按button按钮提交            a.指定了空间的name和value                ?myText=Text                &myPassword=Password                &myTextarea=                &myFile=                &myHidden=Hidden                &myButton=button                &mySelect=option#            b.只指定了name                ?myText=                &myPassword=                &myTextarea=                &myFile=                &myHidden=                &myButton=#                &mySelect=第一个#            c.没指定name,            ?#        总结：            a.以上输出，可以知道表单空间的name属性作为查询字符串数据的name,比如            ?myText=Text，没有指定name的控件无法将value值添加到查询字符串送到后台                b.控件的value属性是查询字符串的value,对于textarea提交的值是两标签之间            的值,对于select值为选中的option的value,如果该option没有value值，则传            option标签的值            c.由image，button,submit哪个按钮进行提交，就会将相应控件的name=value也            添加到查询字符串，使用image提交会附加image.x=&image.y=的字符串，x,y表            示图片按钮被点击的坐标；            d.radio,checkbox没有选中不会将其value值传到后台,file没有选中文件时候，            传到后台的值为空，reset按钮值不会传到后台2、通过js设置并且提交2.1、从查询字符串可以看出js提交表单和点击type类型为image，submit按钮提交的区别就是不用点击提交按钮，并且没有传送提交按钮的数据；**js表单提交代码片**```var myForm = document.forms['myForm'];/* 设置表单提交的方式*/myForm.method = "get";/* 调用表单提交方法submit*/myForm.submit();/* 查询字符串?myText=Text&myPassword=Password&myTextarea=&myFile=&myHidden=Hidden#*/```

D、表单及表单元素事件：

1、form事件

1.1、submit事件：表单提交前时候会触发submit事件，可以监听submit事件来进行表单验证，或者
做某些操作比如阻止表单提交；

1.2、reset：表单重置的时候会触发

/* reset和submit事件*/myForm.addEventListener('submit', function(e) {        console.log('提交');});myForm.onreset = function(){        console.log('重置');};

2、form元素事件

1.1、focus：当前字段获得焦点的时候触发

1.2、blur：当前字段失去焦点的时候触发

1.3、change：对于input,textarea在失去焦点且值改变的时候触发，select元素在选项改变的时
候触发

text和textarea

1.1、相同

 a.两者的值都是存放在value属性里面， b.maxlength：指定文本框可以接受的最大字符数量,字符数量达到该值就无法继续输入 c.select事件：选择文本框中的文本时候就会触发，对应的方法select()被执行时候选中文 本框的所有内容 d.获取

1.2、不同

a.text是单行文本，获取焦点时按enter键会提交表单，value属性就是输入框里面的值,size属性是用来设置input框能显示多少个字符决定文本框的宽度，通过width也可以设置b.textarea是多行文本，获取焦点时按enter键会不提交表单，而是换行，value属性并不是输入框中的值，输入框的值是两个标签之间的文本，col设置列数（设置行的显示），row设置行数（设置列的显示），同样的决定了文本框的宽度高，也可以由width和height设置，一般获取textarea标签中间的文本可以通过value获取，不要通过innerHTML获取（原因在以下代码中）

<form id="formId" action="#" name="myForm" value="myForm">        <input id="myText" type="text" value="text" size="30" maxlength="20">        <textarea name="" id="myTextarea" cols="10" rows="2" value="textarea"         size="10" maxlength="20">默认值</textarea></form>var myForm = document.forms['myForm'];/*1.2、a text，输出 text*/var myText = myForm.elements[0];console.log(myText.value);  myText.select();myText.onselect = function(){    console.log("text is selected");}/*1.2、b textarea，输出 默认值*/var myTextarea = myForm.elements[1];console.log(myTextarea.value);  myTextarea.onselect = function(){    console.log("textarea is selected");}myTextarea.value = "修改后";/*1.2、b textarea 输出 默认值，说明修改textarea的值并没有修改innerHTML的值*/console.log(myTextarea.innerHTML);