<input>标签
-
<input>标签用于搜集用户信息，根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本空间、单选按钮、按钮等等
- HTML与XHTML之间的差异：
- 在HTML中，
<input>标签没有结束标签
- 在XHTML中，
<input>标签必须被正确的关闭
- 属性：
| 属性 |
值 |
说明 |
| accept |
audio/*（接受所有的声音文件）；video/*（接受所有的视频文件）；image/*（接受所有的图像文件）； 不带分号;的MIME_type；以点号.开始的文件后缀名（表示只接受这种后缀名的文件）。若有多个类型的文件，以逗号,分隔 |
规定通过文件上传来提交的文件的类型（只针对type="file"） |
| alt |
text |
定义图像输入的替代文本（只针对type="image"）。功能类似于 image 元素的 alt 属性 |
| autocomplete |
on/off |
规定是否使用输入字段的自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，显示出在字段中填写的选项。autocomplete属性适用form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color。注意：IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效 |
| autofocus |
autofocus |
规定当页面加载时，<input>应该自动获得焦点。autofous属性适用于button、input、keygen、select和textarea元素 |
| checked |
checked |
规定在页面加载时应该被预先选定的<input>元素（只针对 type="radio/checkbox"） |
disabled |
disabled |
规定应该禁用的<input>元素。被禁用的字段是不能修改的，也不可以使用 tab按键切换到该字段，但可以选中或拷贝其文本。注意：disabled 属性无法与type="hidden"的<input>元素一起使用；对于IE7-浏览器必须设置为disabled="disabled"，而不可以直接设置 disabled，否则使用javascript控制时将失效 |
| form |
form_id |
规定<input>元素所属的一个或多个表单。form属性适用于所有input标签的类型，若需要引用一个以上的表单时，用空格分隔。注意：IE浏览器不支持该属性，只有元素拥有 name属性，该属性才有效 |
| formaction |
URL |
规定当表单提交时处理输入控件的文件的URL（只针对type="submit/image"） |
| formenctype |
application/x-www-form-urlencoded（默认）；multipart/form-data；text/plain |
规定当表单提交到服务器时如何编码（只适合type="submit/image"） |
| formmethod |
get（默认，将表单数据（form-data）以名称/值对的形式附加到 URL：URL?name=value&name=value）；post（以 HTTP post 事务的形式发送表单数据） |
定义发送表单数据到 action URL 的 HTTP 方法（只适合type="submit/image"） |
| formnovalidate |
formnovalidate |
formnovalidate 属性覆盖<form> 元素的 novalidate 属性。formnovalidate属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color。注意：IE9-浏览器不支持 |
| formtarget |
_blank（在新窗口／选项卡中显示响应）；_self（默认，在同一框架中显示响应）；_parent（在父框架中显示响应）；_top（在整个窗口中显示响应）；framename（在指定的 iframe 中显示响应） |
规定提交表单后在哪里显示接收到响应的名称或关键词（只适合type="submit/image"） |
| height |
pixels |
规定<input>元素的高度（只针对type="image"，如height="100"） |
| list |
datalist_id |
属性引用<datalist>元素，其中包含<input>元素的预定义选项。datalist元素自身不会在页面显示，而是为其他元素的 list属性提供数据。list属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color。注意：IE9-浏览器及safari浏览器不支持 |
| max |
number（数字值）；date（日期值） |
属性规定<input>元素中允许的最大值 |
| maxlength |
number（数字值） |
属性规定<input>元素中允许的最大字符数（只针对type="text/password"） |
| min |
number（数字值）；date（日期值） |
属性规定<input>元素中允许的最小值 |
| multiple |
multiple |
属性规定允许用户输入到<input>元素的多个值（适用于type="file/email"）。注意：IE9-浏览器不支持 |
| name |
text |
属性规定<input>元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过javascript引用表单数据。注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值 |
| pattern |
regexp |
属性规定用于验证<input>元素的值的正则表达式。pattern属性适用于以下类型的input元素：text、search、url、tel、email、password。注意：IE9-浏览器及safari浏览器不支持 |
| placeholder |
text |
属性规定可描述输入<input>字段预期值的简短的提示信息，占位符会在输入域为空时显示出现，在输入域获得焦点时消失。placeholder属性适用于以下类型的input元素：text、search、url、tel、email、password。注意：IE9-浏览器不支持 |
| readonly |
readonly |
属性规定输入字段是只读的。只读字段是不能修改的，但用户仍然可以使用tab按键切换到该字段，还可以选中或拷贝其文本（readonly属性可与 type="text/password"的input元素配合使用）。注意：IE7-浏览器不支持使用javascript控制readonly属性 |
| required |
required |
属性规定必须在提交表单之前填写输入字段（不能为空）。required属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file。注意：IE9-浏览器及safari浏览器不支持 |
| size |
number（默认值是20） |
size属性对于type="text/password"的<input>元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度。注意：由于 size属性是一个可视化的设计属性，推荐使用CSS来代替它 |
| src |
URL |
属性规定显示为提交按钮的图像的URL（只针对type="image"） |
| step |
number |
属性规定<input>元素的合法数字间隔。min、max、step属性适用于以下类型的input元素：date pickers、number、range |
| type |
button ；checkbox ；color ；date ；datetime ；datetime-local ；email ；file ；hidden ；image ；month ；number ；password ；radio ；range ；reset ；search ；submit ；tel ；text ；time ；url ；week |
属性规定要显示的<input>元素的类型 |
| value |
text |
指定<input>元素value的值。对于不同的输入类型，value属性的用法也不同：type="button/reset/submit"用于定义按钮上的显示的文本；type="text/password/hidden"用于定义输入字段的初始值；type="checkbox/radio/image"用于定义与输入相关联的值。注意：type="checkbox/radio"必须设置 value属性；value属性无法与type="file"的input元素一起使用 |
| width |
pixels |
规定<input>元素的宽度（只针对type="image"，如width="100"） |
关于 placeholder 属性
- placeholder 属性一般会在输入框有一个提示，该提示会在输入字段为空时显示，并会在字段获得焦点时消失
- 注意：
- placeholder 属性适用于以下的 input 类型：text, search, url, telephone, email 以及 password
- placeholder 为 HTML5 的新属性
// 之前是没有 placeholder 这个属性的，那么比如用户在文本框输入的时候，如果还有提示信息（对value设置值），那么用户往往需要先删除提示信息才能输入
// 解决办法：利用表单事件
<input autocomplete="on" name="u" id="u" type="text" class="input01" tabindex="1" value="QQ号码或Email帐号" onFocus="if (value =='QQ号码或Email帐号'){value =''}" onBlur="if (value ==''){value='QQ号码或Email帐号';}" />
// 我们通过 size 设置的 <input> 元素的可见宽度，会被css样式设置中的 width 给覆盖，因为 <input> 是内联块状元素
readonly 和 disabled 属性的区别
- 设置了 readonly 的 input[text] 在提交表单的时候还是会提交 input 上声明的数据
- 设置了 disabled 的则不会提交 input 上声明的数据
name 属性的作用
- 由于表单提交的数据一般都是以 key:value 的方式提交，所以 input 中的 name 属性主要用来标识提交的数据的 key 值，好让服务器处理程序分辨
// 例如
<input name=name value=adam>
<input name=age value=18>
// 则服务器在后台收到的数据格式可能是这样的：
{
name:adam,
age:18
}
23种type类型
- 随着HTML5的出现，input元素新增了多种类型，用以接受各种类型的用户输入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text这10个是传统的输入控件。新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13个
- HTML5中，浏览器在遇到不识别的type值时，会将type的值解释为
text
| 属性值 |
说明 |
| button |
定义可点击的按钮，但没有任何行为，常用于在用户点击时启动javascript程序。注意：IE8-浏览器的box-sizing: content-box;，而其他浏览器的box-sizing: border-box;
|
| checkbox |
定义复选框，允许用户在给定数目的选择中选择一个或多个选项。同一组的按钮，name取值一定要一致。注意：checkbox类型的input元素无法设置padding和 border（除IE10-浏览器以外） |
| color |
创建一个调色板用来选择颜色，颜色值以URL编码后的十六进制数值提交。如黑色会以%23000000发送，其中 %23 是 # 的URL编码。注意：safari和IE不支持该类型 |
| date |
定义date控件（包括年、月、日，不包括时间） |
| datetime |
定义date和time控件（包括年、月、日、时、分、秒、几分之一秒，基于UTC时区） |
| datetime-local |
定义date和time控件（包括年、月、日、时、分、秒、几分之一秒，不带时区） |
| email |
定义语义上的e-mail地址输入域，会自动验证email域的值。外观上与type="text"的input输入类型没有差异。注意：IE9-浏览器及safari浏览器不支持 |
| file |
定义文件选择字段和“浏览…”按钮，供文件上传。注意：IE8-浏览器设置的type="file"的input元素的宽高为包含 padding和 border的宽高 |
| hidden |
定义隐藏输入类型用于在表单中增加对用户不可见，但需要提交的额外数据 |
| image |
定义图像形式的提交按钮。该类型可以设置width、height、src、alt这四个属性。用图片作为提交按钮会一起发送点击在图片上的 x和 y坐标，这样可以与服务器端那边的图结合使用，如果图片有 name属性，也会随坐标发送 |
| month |
定义month和year控件（不带时区） |
| number |
定义用于输入数字的字段。注意：IE不支持该类型；它的取值可以为小数 |
| password |
定义密码字段（密码字段字符不会明文显示，而是以星号或圆点替代）。注意：IE6浏览器设置的type="text/password"的input元素的宽高为包含padding和 border的宽高 |
| radio |
定义单选按钮，允许用户从给定数目的选择中选一个选项。同一组按钮，name值一定要一致 |
| range |
定义用于精确值不重要的输入数字的控件（比如slider控件）。类似于type="number"的input类型。注意：IE9-不支持该类型 |
| reset |
定义重置表单的按钮（重置所有的表单值为默认值） |
| search |
定义语义上的搜索框，外观上与type="text"的input输入类型没有差异 |
| submit |
定义提交表单的按钮 |
| tel |
定义语义上的电话输入域。外观上与type="text"的input输入类型没有差异 |
| text |
默认。定义一个单行的文本字段（在大多数浏览器中，默认宽度为20个字符） |
| time |
定义用于输入时间的控件（小时和分钟） |
| url |
定义语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异。注意：IE9-浏览器及safari浏览器不支持 |
| week |
定义week和year控件（不带时区） |
- HTML5拥有多个可供选取日期和时间的新输入类型：
- date：用于选取日、月、年
- month：用于选取月、年
- week： 用于选取周、年
- time：用于选取时、分
- datetime：用于选取时、日、月、年（UTC时间）
- datetime-local：用于选取时、日、月、年（本地时间）
- 注意：IE和firefox这6种日期类型都不支持，chrome不支持datetime类型
<body>
date: <input type="date"><br><br>
month: <input type="month"><br><br>
week: <input type="week"><br><br>
time: <input type="time"><br><br>
datetime: <input type="datetime"><br><br>
datetime-local: <input type="datetime-local"><br><br>
<!-- 注意：chrome不支持该类型的step设置 -->
<input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40">
<script type="text/javascript">
// 要预设控件的日期和时间，可以用字符串设置value属性
/*
value属性格式：
date YYYY-MM-DD
time hh:mm:ss.s
datetime YYYY-MM-DDThh:mm:ss:sZ
datetime-local YYYY-MM-DDThh:mm:ss:s
month YYYY-MM
week YYYY-Wnn
YYYY = 年
MM = 月
DD = 日
hh = 小时
mm = 分钟
ss = 秒
s = 0.1秒
T = 日期与时间之间的分隔符
Z = Zulu时间的时区
Wnn = W周数，从1月的第一周开始是1，直到52
*/
// 该类型的value属性格式还可以用在 min 和 max 的属性里，用来创建时间跨度；step 可以用来设置移动的刻度
</script>
</body>
text/password 文本输入框、密码输入框
- 当用户要在表单中键入字幕、数字等内容时，就会用到文本输入框，文本框也可以转化为密码输入框
- 语法：
<form>
<input type="text/password" name="名称" value="文本"/>
</form>
// type：当type="text"时，输入框为文本输入框（也可以不写，默认类型为text）；当type="password"时，输入框为密码输入框
// name：为文本框命名，以备后台程序ASP、PHP使用
// value：为文本输入框设置默认值（一般起到提示作用），但是如果要更改需用户手动删除再重新输入，现在更多的采用 placeholder（占位符）
// placeholder：HTML5的新属性，适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password
// 若设置 readonly 属性，用户无法更改输入框中的内容
// 若设置 hidden 属性，输入框隐藏，若输入框默认有值还是会传到服务器
// 实例
<form>
姓名：
<input type="text" name="myName">
<br />
密码：
<input type="password" name="pass">
// 当我们在密码域中键入字符时，浏览器将使用项目符号来替代这些字符
</form>
密码框内密码的显示和隐藏
- 现在很多软件在密码框右侧都有一个小眼睛，用于设置密码的显示和隐藏。通过更改input元素的type属性得以实现
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#show{
height: 20px;
width: 200px;
padding: 5px;
margin: 10px;
border: 1px solid #ccc;
line-height: 20px;
}
#eye{
position: relative;
right: 35px;
top: 3px;
width: 15px;
height: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<input id="show" type="password" maxlength="6">
<script type="text/javascript">
eye.on = true;
eye.addEventListener('click', function (){
if(this.on){
this.src = 'http://www.iconpng.com/png/iconshock-iphone/eye_closed.png';
show.type = 'text';
this.on = false;
}else{
this.src = 'http://www.iconpng.com/png/iconshock-iphone/eye_open.png';
show.type = 'password';
this.on = true;
}
});
</script>
</body>
file 文件上传
- 定义文件选择字段和 "浏览..." 按钮，供文件上传
- 表单提交文件的正确方式：
- 添加 input[type=file] 的 input 标签
- 设置表单的 method 为 post
- 设置表单的 enctype 为 multipart/form-data
<style type="text/css">
#testForm label{
display: inline-block;
width: 50px;
height: 50px;
background: no-repeat url('http://www.iconpng.com/png/100-slim-icons/uploading13.png');
background-size: 50px 50px;
}
#testForm #file{
width: 0;
height: 0;
}
</style>
</head>
<body>
<!-- 将上传文件按钮尺寸设置为 0x0，使用 laebl 元素关联 -->
<form id="testForm" name='testForm' method="post" action="form_action.html" enctype="multipart/form-data">
<label for="file"></label>
<input id="file" type="file" name="image">
</form>
</body>
<!-- 本地图片预览的实现，大概思路 -->
<body>
<form name='testForm' action="form_action.html">
选择图片文件: <input type="file" name="img" accept="image/*" multiple>
<input type="submit">
</form>
<form id="testForm1"></form>
<script type="text/javascript">
file.addEventListener('change', function (event) {
var files = Array.property.slice.call(event.target.files, 0);
files.forEach(function(item){
file2dataurl(item, function(url){
var image = new Image();
parent.appendChild(image);
image.src = url;
});
});
});
</script>
</body>
radio/checkbox 单选框、复选框
- HTML中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一样，而复选框中用户可以任意选择多项，甚至全选
- 拥有一样 name 属性的 radio/checkbox 为一组
// 语法
<input type="radio/checkbox" value="值" name="名称" checked="checked" />
// 当type="radio"时，控件为单选框；当type="checkbox"时，控件为复选框
// value：提交数据到服务器的值（后台程序PHP使用）
// name：为控件命名，以备后台程序ASP、PHP使用
// checked：当设置checked="checked"时，该选项被默认选中，也可以写成 checked=true，为false时取消选中（推荐）
// 若设置了 disabled 属性，则该选择框不能被选中
<!-- 示例 -->
<form method="post" action="save.php">
你的性别<br>
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女<br>
你拥有哪些交通工具？<br>
<input type="checkbox" name="vehicle" value="Bike">我有一辆自行车<br>
<input type="checkbox" name="vehicle" value="Car">我有一辆小汽车
</form>
使用input创建按钮 button
<form>
<input type="button" value="你好 世界!" onclick="fun1(), fun2()"> // 若需要执行多个函数，函数之间用逗号 , 隔开
</form>
submit 提交按钮
- 在表单中有两种按钮可以使用，分别为：提交按钮、重置按钮。当用户需要提交表单信息到服务器时，需要用到提交按钮
- 当用户点击提交按钮后，表单的内容会被传送到另一个文件。表单的动作属性
action定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
// 语法
<input type="submit" value="提交">
// type：只有当type值设置为submit时，按钮才有提交作用
// value：按钮上显示的文字
// 实例
<form name="isFrom" method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" value="" name="myName" /> // 这里没有设置默认值
<input type="submit" value="提交" name="submitBtn" />
</form>
reset 重置按钮
// 语法
<input type="reset" value="重置">
// type：只有当type值设置为reset时，按钮才有提交作用
// value：按钮上显示的文字
// 实例
<form name="isForm" method="post" action="save.php">
<label>爱好：</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
</select>
<input type="submit" value="确定" />
<input type="reset" value="重置" />
</form>
type=hidden 隐藏域有什么作用？
-
作用：隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。用户单击发送按钮提交表单的时候，隐藏域的信息也被一起发送到服务器
-
举例：
- 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如 sessionkey，等等。当然这些东西也能用 cookie 实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用 cookie 的烦恼
- 有些时候一个 form 里有多个提交按钮，怎么使程序能够分清楚到底用户是按哪一个按钮提交上来的呢？就可以写一个隐藏域
name="hidden"，然后在每一个提交按钮处加上onclick="document.forms.formName.hidden.value='xx'"，然后服务器接收到数据后先检查 hidden 的值就会知道用户是点击的哪个提交按钮进行提交的
- 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些 form 确实相互作用，我们就可以在 form 中添加隐藏域来使它们联系起来
- 还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是 IE 不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是 close 时就自己关掉
- 更多说明详见：
<form>表单标签
- 表单是网页与用户的交互工具，由一个
<form>元素作为容器构成，封装其他任何数量的表单控件，还有其它任何<body>元素里可用的标签。HTML表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据
- 表单能够包含
<input>、<menus>、<textarea>、<fieldset>、<legend>、<label>等表单控件元素
- 语法：
<form method="传送方式" antion="服务器文件">
- HTML表单控件：
| 标签 |
说明 |
<form> |
定义供用户输入的表单 |
<input> |
定义输入域 |
<textarea> |
定义文本域（一个多行的输入控件） |
<label> |
定义了<input>元素的标签，一般为输入标题 |
<fieldset> |
定义了一组相关的表单元素，并使用外框包含起来 |
<legend> |
定义了<fieldset>元素的标题 |
<select> |
定义了下拉选项列表 |
<optgroup> |
定义选项组 |
<option> |
定义下拉列表中的选项 |
<button> |
定义一个点击按钮 |
<datalist> |
指定一个预先定义的输入控件选项列表 |
<keygen> |
定义了表单的密钥对生成器字段 |
<output> |
定义一个计算结果 |
| 属性 |
值 |
说明 |
| accept |
MIME_type |
HTML5不支持。规定服务器接收到的文件的类型（文件是通过文件上传提交的） |
| accept-charset |
character_set（表单提交时使用的字符编码列表，多个字符编码使用空格分隔，常用值：UTF-8、ISO-8859-1） |
规定服务器用哪种字符集处理表单数据，通常不指定，那么页面的字符编码会被使用 |
| action |
URL |
规定提交表单时，向何处发送表单数据；如果忽略这个属性，表单会重定向到表单所在的URL |
| autocomplete |
on（默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值）；off（规定禁用自动完成功能。用户必须每次使用时输入值到每个字段中，浏览器不会自动完成输入）。有时我们禁用了自动完成，但是却没有作用，失效是因为浏览器内部也会默认开启一个输入字段后自动补全的功能 |
规定是否启用表单的自动完成功能。只有元素拥有 name 属性，该属性才有效 |
| enctype |
application/x-www-form-urlencoded（默认值。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值））；multipart/form-data（不对字符编码。在使用包含文件上传控件的表单时，必须使用该值）；text/plain（ 空格转换为 "+" 加号，但不对特殊字符编码） |
规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况） |
| method |
get（默认）；post |
规定用于发送表单数据的HTTP方法（表单数据会被发送到 action 属性中规定的页面中） |
| name |
text |
规定表单的名称 |
| novalidate |
novalidate |
规定当提交表单时不对其进行验证。注意：IE9-不支持 |
| target |
_blank（在新窗口／选项卡中打开）；_self（默认值。在同一框架中打开）；_parent（在父框架中打开）；_top（在整个窗口中打开）；frame name（在指定的 iframe 中打开） |
规定在何处打开action URL |
- 注意：
- 表单里嵌套表单是不允许的
- 所有表单控件（文本框、文本域、按钮、单选框、复选框）都必须放在
<form></form>标签之间，否则用户输入的信息提交不到服务器上
-
form元素是块级元素，其前后会产生折行
表单名称 name
- name属性规定表单名称，如果
name="test"，则Javascript可以使用document.forms.test来获取该表单
<body>
<!-- name 属性，主要用于 document.forms 这个API来使用的，我们可以很方便的拿到 form 这个元素对象。表单中的表单控件也可以通过这种方式拿到 -->
<form name="testForm" action="save.php" method="post">
<p><label>帐号：<input type="text" name="account"></label></p>
</form>
<script type="text/javascript">
// 通过 name 拿到 testForm
var testForm = document.forms.testForm;
console.log(testForm); // 输出 <form name="testForm" action="save.php" method="post">...</form>
// 通过 name 拿到 accountInput
var accountInput = testForm.account;
console.log(accountInput); // 输出 <input type="text" name="account">
</script>
</body>
数据发送 method
- 表单可以用两种方式发送数据：GET和POST，默认为GET方法
POST方法
- 如果采用POST方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与action属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器
- 在服务器端，一旦POST样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数
- 应用场景：
- 大数据处理，因为POST方法相比GET方法而言，处理更多字段
- 安全数据，因为GET方法将表单参数直接放在应用程序的URL中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录；而POST方法则没有这方面的漏洞
GET方法
- 如果采用GET方法，浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的action URL之后。这两者之间用问号进行分隔
- 应用场景：
- 获得最佳表单传输性能，因为GET发送只有少数简单字段
- 简单处理，因为GET方法无需处理编码解码方法
- 传参处理，因为GET方法允许把表单的参数包括进来作为 URL 的一部分
post 和 get 方式的区别
- GET后退按钮/刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
- GET书签可收藏，POST为书签不可收藏。
- GET能被缓存，POST不能缓存 。
- GET编码类型 application/x-www-form-url，POST编码类型 application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
- GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。
- GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。
- GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。
- 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中。
- 更多说明详见：
自动完成 autocomplete
-
autocomplete属性规定表单是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
- 注意：IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效
<body>
<button id="btn1">打开自动完成</button>
<button id="btn2">关闭自动完成</button>
<form method="get" action="#" name="test">
<p><label>x:<input name="x"></label></p>
<p><label>y:<input name="y"></label></p>
<p><button type="submit">Submit</button></p>
</form>
<script type="text/javascript">
var oForm = document.forms.test;
btn1.onclick = function(){
oForm.autocomplete = 'on';
};
btn2.onclick = function(){
oForm.autocomplete = 'off';
};
</script>
</body>
如何处理由于浏览器设置导致的autocomplete="off"失效的问题?
<form name="testForm" action="save.php" method="post" >
<!--
失效是因为浏览器内部也会默认开启一个输入字段后自动补全的功能
方法一：打开浏览器设置将自动完成关闭
方法二：只是针对账号和密码框自动完成的处理
表单中出现了password类型的input标签，chrome和firefox是以这个为判断条件来构建记住密码这个功能的
因为浏览器以password类型的input标签为识别标准，那么在输出页面的时候完全可以把这个密码框的type设置为text，然后在用户点击密码框输密码时，再把这个密码框的type再变回password
-->
<input type="text" name="password" onfocus="this.type='password';" autocomplete="off">
<!-- 方法三：修改readonly属性 -->
<input type="password" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off">
<!-- 方法四：autocomplete="nope" 设置一个无效的值，除on 或 off之外的一个任意的值，使浏览器放弃对该属性的执行 -->
<input type="password" name="password" autocomplete="nope">
</form>
表单验证 novalidate
-
novalidate属性规定当提交表单时不对其进行验证
- 注意：IE9-不支持
<body>
<button id="btn1">打开验证</button>
<button id="btn2">关闭验证</button>
<form method="get" action="#" name="test">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
<script type="text/javascript">
var oForm = document.forms.test;
btn1.onclick = function(){
oForm.removeAttribute('novalidate');
};
btn2.onclick = function(){
oForm.setAttribute('novalidate', '');
};
</script>
</body>
如何无刷新提交表单
- 在页面设置一个 iframe，设置好它的 name 属性值，用css控制它是“消失”的
- 设置 form 的 target 属性为 iframe 的 name 属性即可
应用（创建一个披萨预定表单）
<style type="text/css">
*{
margin: 0;
padding: 0;
font: 15px "Microsoft Yahei";
}
div{
margin: 50px;
width: 300px;
padding: 10px;
border: 2px solid green;
}
div form h3{
font-size: 20px;
font-weight: bolder;
text-align: center;
}
div form p{
margin-top: 10px;
}
div form fieldset{
margin-top: 10px;
padding: 5px;
border: 1px solid #ccc;
}
div form fieldset label{
margin: 0 10px 0 5px ;
}
.submit{
width: 70px;
height: 25px;
background: orange;
border: none;
color: white;
line-height: 25px;
font-size: 12px;
margin-left: 220px;
}
</style>
</head>
<body>
<div>
<form name="pizza" method="post" action="https//:pizza.example.com/order" enctype="application/x-www-form-urlencoded" autocomplete="on">
<h3>披萨预定表单</h3>
<p><label>姓名：<input type="text" name="custname" required></label></p> <!-- label 为内联元素，我们可以将一行信息看成段落，包裹在 p 块状元素内 -->
<p><label>电话：<input type="tel" name="custtel" required></label></p> <!-- 将 input 元素写在 label 元素内，相当于将它们两个绑定了起来 -->
<p><label>邮箱：<input type="email" name="custemail" required></label></p> <!-- 块状元素可以包含行内元素和块状元素，但行内元素不能包含块状元素，input 属于内联块状元素 -->
<fieldset>
<legend> 披萨大小 </legend>
<label><input type="radio" name="size" value="small" required> 小 </label>
<label><input type="radio" name="size" value="medium" required> 中 </label>
<label><input type="radio" name="size" value="large" required> 大 </label>
</fieldset>
<fieldset>
<legend> 披萨配料 </legend>
<label><input type="checkbox" name="topping" value="bacon"> 熏肉 </label>
<label><input type="checkbox" name="topping" value="cheese"> 奶酪 </label>
<label><input type="checkbox" name="topping" value="onion"> 洋葱 </label>
<label><input type="checkbox" name="topping" value="mushroom"> 蘑菇 </label>
</fieldset>
<p><label>配送时间：<input type="time" name="delivery" min="11:00" max="21:00" step="900" required></label></p> <!-- step 单位为秒，900相当于 15分钟 -->
<p><input class="submit" type="submit" value="提交订单"></p>
</form>
</div>
</body>
