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);
495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
