一、<form>标签
用户填写表单进行提交后，将表单信息从浏览器传送到服务器，服务器处理后，将用户所需信息传送回浏览器，这样就实现了网页的交互性。
表单标签<form></form>在一般情况下，处理程序属性action和传送方式属性method，是必不可少的。
（1）处理程序属性——action
action属性存储的是处理表单的数据脚本或程序，这个值可以是程序或脚本的一个完整url。因为表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这个地址可以是绝对地址、相对地址，甚至是E-mail地址。当地址为E-mail地址时，表示程序运行后将表单收集到的内容以电子邮件的形式发送出去。
（2）名称属性——name
（3）传送方法属性——method
该属性定义的是：处理程序从表单中获得信息的方式，可取值GET和POST，他决定了表单已收集的数据是用什么方式发送到服务器。
method=“GET”：使用该方式提交表单，来访者输入的数据会附加在URL之后发送到服务器，速度快，但数据长度不能太长。method没有指定的情况下，一般默认为GET；
method=“POST”：使用该方式提交表单，表单数据会与URL分开发送，用户端的计算机会通知服务器读取数据，通常没有数据长度上的限制，缺点是速度慢。
（4）编码方式属性——enctype，当表单具有上传文件时，该属性必须为“multipart/form-data”。
（5）目标显示方式属性——target
二、表单的控件
（1）输入标签<input>
<input>标签可以选择以下属性：
1、文本框——text
2、密码域——password
3、单选按钮——radio
4、复选框——checkbox
5、普通按钮——button
6、提交按钮——submit
7、重置按钮——reset
8、图像域——image
9、隐藏域——hidden
10、文件域——file
（2）文本域标签<textarea>
文本域标签的属性有name、rows、cols和value。
（3）列表/菜单标签<select><option>
三、H5中新增的表单属性
（1）提示信息——placeholder
（2）是否保存输入值——autocomplete，与<datailst>标签与list属性共用
（3）自动获得焦点——autofocus
（4）单行文本框的提示——list
（5）数值输入范围——min和max
（6）输入值递增或递减的梯度——step
（7）必需属性——required
（8）email类型——email
四、表单序列化
利用表单字段的type属性，将信息的name和value整合。
（1）表单内选择框脚本的属性
获取表单，是通过document.form[index]来获取某个表单的。然后通过表单属性elements["元素名称"]，获取表单的区域。而对于选择框脚本来说，selectbox存在一个options属性，通过options属性，可以获得选择框下面的各项值。options下面又存在selectedIndex属性，用来获取被选中的选项。
例如：
var selectBox=document.form[0].elements["location"];
var option=selectBox.options[selectedIndex]
表单序列化里面，最麻烦的就是选择框脚本了。
//表单序列化
function serialize(form) {
//定义变量存储信息
let parts = [];
let optValue;
for (let i = 0; i < form.elements.length; i++) {
let field = form.elements[i];
switch (field.type) {
//判断有没有选择框
case "select-one":
case "select-multiplu":
if (field.options.length) {
for (let j = 0; j < field.options.length; j++) {
let option = field.options[j];
if (option.selected) {
//判断option是否具有value属性
if (option.hasAttribute) {
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.optValue));
}
}
};
break;
case undefined:
case "file":
case "submit":
break;
default:
if(field.name.length){
console.log("field.name",field.name);
}
}
}
console.log("parts",parts)
return parts;
}
返回的是part是数组。如果想要转化为字符串，就用parts.join("&");
为选择框添加一个新的选项，有两种方法。构造函数创建更简单一些。
function handleClick(){
var selectBox=document.forms[0].elements["location"];
//添加选项
var newOpt=document.createElement("option");
newOpt.appendChild(document.createTextNode("Option text"));
newOpt.setAttribute("value","Option value");
selectBox.appendChild(newOpt);
//构造函数创建
var newOpt1=new Option("Option text","Option value");
selectBox.appendChild(newOpt1);
console.log(selectBox);
}
五、文本框脚本
<input>元素，value用来确定输入的初始值。size属性 ，用来显示能够显示的字符数。
<textarea>元素，用col属性和row属性。
select()方法，用来选中里面的文本。
来源：oschina
链接：https://my.oschina.net/u/4352708/blog/3580066