出自：https://blog.csdn.net/luanpeng825485697/article/details/77010767
表单Form的属性和方法
在HTML中，表单为form元素，在javascript中，表单为HTMLFormElement元素，继承自HTMLElement。
HTMLFormElement独有以下属性和方法：
acceptCharset: 服务器能够处理的字符集；等价于HTML中的accept-charset特性；
action: 接收请求的URL，等价于HTML中的action
elements: 表单中所有控件的集合，进而可以通过索引或名称访问控件
enctype: 请求的编码类型；等价于HTML中的enctype特性；
length: 表单中控件的数量；
method： 要发送的http请求类型，一般是get或者是post，等价于HTML中的method；
name: 表单的名称；
reset(): 将所有表单域重置为默认值；
submit(): 提交表单；
target:用于发送请求和接收响应的窗口名称；表单元素的属性和方法
表单标志的主要元素、属性如下：
<form></form>创建表单
<select multiple name="name" size=""></select>创建滚动菜单,size设置在需要滚动前可以看到的表单项数目
<option> 设置每个表单项的内容
<select name="name"></select>创建下拉菜单
<option> 设置每个菜单项的内容
<textarea name="name" cols=40 rows=8></textarea>创建一个文本框区域,列的数目设置宽度,行的数目设置高度
<input type="checkbox" name="name">创建一个复选框,文字在标签后面
<input type="radio" name="name" value="">创建一个单选框,文字在标志后面
<input type="file" name="name" value="">创建一个文件选择按钮
<input type="text" name="foo" size=20> 创建一个单行文本输入区域,size设置为字符串的宽度
<input type="email" name="email"> 创建邮件格式的输入框
<input type="url" name="url"> 创建网址格式的输入框
<input type="submit" value="name">创建提交(submit)按钮
<input type="image" border=0 name="name" src="name.gif">创建一个使用图像的提交(submit)按钮
<input type="reset">创建重置(reset)按钮
表单元素共有属性和方法：
disabled是否可用，
form字段所属表单，
name字段名称，
readOnly是否只读，
tabIndex字段切换序号，
type字段类型(控件类型)，
value字段的值，
checkValidity字段是否有效，
focus()聚焦，
blur()失去焦点函数，代码示例：
input1.onkeyup = function(event){
var target = event.target; //获取事件目标元素，也就是this
if(target.value.length == target.maxLength) { //value字段的值，maxLength属性
var form = target.form; //form目标所属表单
if(form.elements[1] && !form.elements[1].readOnly){ //elements表单元素集合，readOnly字段属性
form.elements[1].focus(); //focus字段函数-聚焦
form.reset(); //表单函数-恢复默认
}
}
};文件元素，input type=”file”
myfile.onchange = function(event){
var files = event.target.files;
var reader = new FileReader(); //异步读取文件
var type = "default";
if(/image/.test(files[0].type)){ //test判断是否匹配，"名称"：files[0].name，"类型"：files[0].type，"大小"：files[0].size
type = "image";
reader.readAsDataURL(files[0]); //readAsdataURL读取文件以数据URL的形式保存，readAsText以纯文本形式读取指定编码形式文件，readAsBinaryString读取文件成字符串，readAsArrayBuffer读取文件成数组
}else{
reader.readAsText(files[0]);
type="text";
}
reader.onerror = function(){alert("读取文件出错"+reader.error.code);};
reader.onprogress = function(event){ //每50ms更新一次进度
if(event.lengthComputable)
var rate = event.loaded/event.total;
alert("加载比例"+rate);
};
reader.onload=function(){
switch (type){
case "image":hintdiv.insertAdjacentHTML("beforeend","<img src='"+reader.result+"'>");break;
case "text":hintdiv.insertAdjacentHTML("beforeend",reader.result);break;
}
};
};文本框元素，input type=”text”或textarea
text1.select(); //text和textarea文本内容被全部选择，会自动聚焦
text1.setSelectionRange(1,4); //选择部分文本，参数为起点和终点索引，会选中包含起点，但不包含终点的文本
console.log(text1.value.substring(text1.selectionStart,text1.selectionEnd-1)); //selectionStart选择的文本的起点，selectionEnd选择的文本的终点选择框元素，option、select
select 选择框属性和方法：
selectedIndex选中项索引，
size选中框可见行数，
multiple是否允许多选,
options选项元素合集，
add(newoption,reloption)，
remove(index)删除选项，option选项属性：
index选项索引，
label选项标签，
selected是否被选中，
text选项的文本，
value选项的value值示例代码
var myselect = document.getElementById("myselect");
var newoption = document.createElement("option"); //创建选项元素
newoption.appendChild(document.createTextNode("第3个选项")); //选项添加文本
newoption.setAttribute("value","myoption3"); //选项添加value
myselect.appendChild(newoption); //添加选项
newoption = new Option("第4个选项","myoption4"); //创建选项元素
myselect.appendChild(newoption); //插入新选项
newoption = new Option("第5个选项","myoption5"); //创建选项元素
myselect.add(newoption,undefined); //插入新选项
myselect.removeChild(myselect.options[0]); //options选项合集，removeChild删除子元素
myselect.remove(0); //删除第一个选项，
myselect.options[0]=null; //删除第一个选项，
myselect.insertBefore(myselect.options[1],myselect.options[0]); //调换选项位置
myselect.options[1].selected=true; //设置第二个选项被选中
var selectoption = myselect.options[myselect.selectedIndex]; //selectedIndex当前选中项索引
console.log(selectoption.text+selectoption.value);
表单提交
对于在提交前需要执行检验数据等函数的，可以使用以下两种方式。
1、仍然使用submit按钮
表单的写法
<form id="formid" name= "myform" method = 'post' action = 'user_login_submit.action' onsubmit = "return 你的函数();" >
js代码
function 你的函数(){
return false;//不提交
return true;//提交
}2、button代替提交按钮
表单内
<input type="button" onclick = "你的函数();" />
js代码
function 你的函数(){
return false;//不提交
document.getElementById("formid").submit();//提交
}除了使用submit按钮提交外，这里介绍将表单序列化。将表单序列化为字符串，以get方式发送数据。
完成表单的序列化，主要实现下面几步
- 对表单字段的名称和值进行URL编码，使用&分割；
- 不发送禁用的表单字段；
- 只发送勾选的单选框和复选框按钮数据；
- 不发送type为reset和button的按钮；
- 多选选择框中的每个选中的值单独一个条目；
- Select元素的值，就是选中option元素的value的值，如果option没有属性value，则是选中的文本值；
function serialize(form) {
var arrs = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for(i = 0,len = form.elements.length; i < len; i++) {
field = form.elements[i];
switch(field.type) {
case "select-one":
case "select-multiple":
if(field.name.length) {
for(j = 0,optLen = field.options.length; j < optLen; j++) {
option = field.options[j];
if(option.selected) {
optValue = '';
if(option.hasAttribute) {
optValue = option.hasAttribute("value") ? option.value : option.text;
}else {
optValue = option.attributes["value"].specified ? option.value : option.text;
}
arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(optValue));
}
}
}
break;
case undefined: //字段集
case "file": // 文件输入
case "submit": // 提交按钮
case "reset": // 重置按钮
case "button": // 自定义按钮
break;
case "radio": // 单选框
case "checkbox": // 复选框
if(!field.checked) {
break;
}
/* 执行默认动作 */
default:
// 不包含没有名字的表单字段
if(field.name.length) {
arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(field.value));
}
}
}
return arrs.join("&");
}测试代码
var formId = document.getElementById("formId");
console.log(serialize(formId));