一、<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()方法,用来选中里面的文本。