一.什么是< form>表单
格式：
<form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /></form>
作用：
form表单一般用来收集用户的信息，并把信息传送到后台。注意点：
1.在浏览器中所有表单标签都有特殊的外观和默认功能格式。
2.表单能够包含input标签,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含非input标签menustextareafieldsetlegendlabel等。
二.< form>标签
格式：
<form name="myForm" action="form_action.asp" method="get"></form>
作用：
<form>标签用于为用户输入创建 HTML 表单。常用属性：
name: 表单提交时的名称
action: 提交到的地址
method: 规定用于发送 form-data 的 HTTP 方法，提交方式：get和post
enctype:规定在发送表单数据之前如何对其进行编码application/x-www-form-urlencoded：在发送前编码所有字符（默认）
text/plain：空格转换为 "+" 加号，但不对特殊字符编码
multipart/form-data：使用包含文件上传控件的表单时，必须使用该值
三.表单提交方式method取值post 和 get 的区别
1.get提交可以在url中看到提交信息，post则是提交到后台。
2.get通常用于提交少量数据得到大量数据，一般用于获取查询信息，比如搜索。post则相反，一般用于更新资源信息，上传数据然后得到回馈信息，如提交博客。
3.get提交的数据一般受浏览器的限制，大小在1kb字节以内。post理论上大小无限制，只受服务器的性能限制。
4.get请求的数据会保留在浏览器历史记录中，安全性不好，所以信息提交一般使用post。
四.表单中的< input>标签
格式：
<input name="username" type="text" placeholder="用户名" maxlength=10 value=123/>
作用：
<input>标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。< input>常用属性:
| 属性 | 取值 | 作用 |
|---|---|---|
| name | --- | 定义 input 元素的名称 |
| type | button/checkbox/file hidden/image/password radio/reset/submit/text | 规定 input 元素的类型 |
| checked | checked | 加checked属性会默认选上 |
| placeholder | --- | 用于在输入框中显示提示信息。输入文字时消失，不会被提交 |
| maxlength | number | 规定输入字段中的字符的最大长度 |
| value | --- | 规定 input 元素的值 |
| disabled | disabled | 当 input 元素加载时禁用此元素,就是禁止输入 |
| autofocus | autofocus | 规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"） |
注意点：
1.<input>都要有name属性,用于向提交到后台的信息进行命名，若无name则后台会自动忽略该条信息。
2.action提交地址若不填写则会直接提交到当前页面。
3.所有的<input>可以添加属性 disabled来禁用输入。
4.<input>中除了提交按钮和重置按钮所有标签都可以添加value属性。用来指定将来提交到服务器的值。
更多属性请查阅w3c
五.< input>常用type类型：
给
< input>标签添加不同的type属性取值可以让< input>有多种类型，结合起来可以组成一个<form>表单。
type="text"：文本输入框，用于文本输入。
格式：
<input name="username" type="text" placeholder="用户名" maxlength=10 />
注意点：
标签中添加value属性可以用来给输入框设置默认文本。
type="password"：密码输入框，输入时显示星号。
格式：
<input name="password" type="password" placeholder="密码" />
注意点：
标签中添加value属性可以用来给输入框设置默认密码。
type="radio" : 单选圆圈按钮，name要相同才能实现单选，value要有值
格式：
<input type="radio" name="sex" value="male" /> 男 <input type="radio" name="sex" value="female" /> 女
注意点：
若想默认单选其中一个，可以在标签中添加checked属性。
type="checkbox" ：多选框，加checked属性会默认选上。提交时，如果选中（如bike），则bike=on
格式：
<input type="checkbox" name="bike" checked/>自行车 <input type="checkbox" name="car" />汽车
注意点：
多选框中一般必须填写每一个选项的name可以把name设置为同一个名字，然后分别设置不同的value值时
type="submit"： 提交按钮 用于提交填好的信息
格式：
<input type="submit" value="提交" />
注意点：form表单有另一种设置提交按钮的方式，即在form中使用button标签，这个按钮放在 form 中也会点击自动提交，提交的内容不光可以有文字，还可以有图片等多媒体内容，缺点是不同的浏览器得到的value值不一样，可能还会有其他的兼容问题。
格式：
<button type="submit">提交</button>
type="reset"： 重置按钮 用于清空表单中的数据。
格式：
<input type="reset" value="重置" />
注意点：
重置按钮上的文字默认为"重置" ，若想改变文字可以通过value修改。
type="button"：按钮
格式：
<input type="button" value="按钮上的文字" />
注意点：
可以通过value给按钮制定标题，通常配合JS使用。
type="hidden"： 隐藏域 用户看不到，用于暂存数据。或者安全性校验
格式：
<input name="url_delete" type="hidden" value="/delete.php" /> <input name="csrf_token" type="hidden" value="a23dafd23444" />
六.type="hidden"：隐藏域的作用
1.隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
2.有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，．而且不会有浏览器不支持，用户禁用cookie的烦恼。
3.有些时候一个form里有多个提交按钮，如需使程序能够分清楚到底用户是按那一个按钮提交上来的，我们就可以写一个隐藏域，然后在每一个按钮处加上="document.form.command.value="xx""然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
4.有时候一个网页中有多个form，但多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
5.javascript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
例子:
比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。
七.表单中的其它标签
< textarea>标签 文本域
格式：
<textarea name="maneywords" maxlength=10 placeholder="ddd"></textarea>
作用：
文本域 用于输入多行文本。
注意点：
1.默认情况下输入框可以无限换行，输入框有自己的宽度和高度。
2.默认情况下输入框可以手动拉伸。
3.可以给< textarea>标签添加cols和rows属性来定义宽度和高度。
例< textarea cols="2" rows="3">
< select>标签 下拉列表
格式：
<select name="mycar"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi" selected>Audi</option> </select>
作用：
用于定义下拉列表。
注意点：
1.下拉列表不能输入，但是可以选择，也可以设置默认选项。
2.可以使用< optgroup>标签把下拉列表进行分组，类似建立一个列表。格式如下：
<select> <optgroup label="Swedish Cars"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup></select>
<lable>标签 聚焦
格式：
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /></form>
<form> <label for="acc123">账号:</label> <input type="text" name="account" id="acc123" /></form>
作用：<label> 标签为input 元素定义标注（标记）。在 label元素内点击文本，就会触发此控件。就是说，当用户选择label 元素内包裹的文本，浏览器就会自动将焦点转到和该文本相关的表单控件（输入框等）上。
注意点：
1.使用步骤：将文本用<label> 标签包裹起来，给文本相关的表单控件绑定的（输入框等）设置一个id名。最后在<label> 标签中设置for属性的值为id。
2.另一种聚焦格式，不过此种格式只能设置文本与表单控件单独在一行的时候，有很大的局限性。格式如下：
<label> 账号:<input type="text" name="account" id="acc123" /></label>
<datalist>标签 待选项
格式：
<input id="myCar" list="cars" /><datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"></datalist>
作用：
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。就是说给输入框绑定待选项。
注意点：
一般直接在<input>标签中用list属性绑定。
type中的一些参数设定可检验输入框中输入的内容是否符合格式，不过部分浏览器不支持，特别是ie全部不支持。例如：
邮箱 <input type="email"> 域名 <input type="url"> 电话 <input type="number"> 日历 <input type="date pickers"> 搜索 <input type="search"> 范围 <input type="range"> 颜色 <input type="color">
作者：饥人谷_刘冲
链接：https://www.jianshu.com/p/6f1c51685c55
共同学习，写下你的评论
评论加载中...
作者其他优质文章
