form表单/html5 智能表单的初步认识

form 表单/html5 智能表单

action 数据传输到哪：
不写数据默认提交到当前页面

method 数据传输方式：
如果不设置，传输方式默认为get

get
url传输数据，页面链接处可以看到所提交的数据
优：速度快，多用于查询
缺：传输数据较小，保密性较低

post
服务器传输数据，看不见数据
优：可传输数据大，保密性安全性较高
缺：速度慢

控件
控件就是表单中的元素
需要的属性：name和value

input
input中要写name，后台通过name属性来获取对应input的value值

传统控件:
button：定义一个按钮
select：定义一个下拉列表
option：定义下拉列表中的一个选项
optgroup：定义选项组，用于组合选项
textarea：定义多行的文本输入控件
fieldset：分组表单内的相关元素
legen： 定义fieldset元素的标题
label ：定义input元素的标注

textarea 文本域/多行文本输入域
文本域内所有文字（包括代码），都被当成文字。文本域内写代码不会被执行
cols 列,rows 行

label
绑定对应的input，让点击label中的文字也可触发点击input效果。
注：firefox不支持label属性

fieldset
fieldset元素用于将表单内的相关元素分组，提升可访问性，多数浏览器用一个简单的边框来显示fieldset.

button
button元素用来定义一个按钮，button元素内部可以放置文本或图像或其他多媒体内容。但唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为
为button元素设置type属性，IE7-浏览器的默认类型是button，而其他浏览器的默认类型是submit
IE7-提交button元素之间的文本，而其他浏览器则会提交value属性的内容
button元素比input元素更易样式化。可以添加内联HTML内容（如em，strong甚至img），并使用**:after和:before伪元素实现复杂的渲染，而input**只有文本值属性

//IE7-浏览器:按下提交按钮时，URL添加?btn=1
//其他浏览器:按下button按钮时，URL添加?btn=2
<form action="#" >
<button value="2" name="btn">1</button>
<input type="submit">
</form>

属性：
autofocus：规定当页面加载时按钮自动获得焦点
disabled：规定应该禁用该按钮
form：规定按钮属性一个或多个表单
formaction：覆盖form元素的action属性
formenctype：覆盖form元素的enctype属性
formmethod：覆盖form元素的method属性
formnovaliadate：覆盖form元素的novalidate属性
formtarget：覆盖form元素的target属性
name：规定按钮的名称
type：规定按钮的类型
value：规定按钮的初始值

input类型：
要写value
radio 单选 ，name一定要相同
checkbox 多选，name可同可不同
submit 提交，不同浏览器vlaue默认值可能会不同
select 选择控件,option要写value

option
option元素定义下拉列表中的一个选项
option元素有两种应用场景，除了用于下拉列表select外，还可以用于选项列表datalist中
注：当设置value值时，服务器提交的是value的值；否则提交给服务器的是option的元素内容
注：option无法设置margin、padding、border等盒模型样式.

ptgroup
optgroup元素定义选项组，用于组合选项
注：optgroup无法设置margin、padding、border等盒模型样式

文本类:

Text，文本
Url，网络地址
Password，密码
Email，邮箱地址

操作类:

Color： 颜色选取
Checkbox ，复选框
Radio，单选框
File，上传文件
Number，数值
Range，百分百滑动条

功能类：

Button，按钮
Image，图片提交按钮
注 ：需写alt属性
Submit，文字提交按钮
Reset，重置表单

Date类：

Date，年月日控件
Month，年月控件
Week，年周控件
Time，时间控件
Datetime，年月日+时间控件
Datetime-local，本地年月日+时间控件

特殊类：

Hidden，隐藏信息

常用属性

name
注：只有设置了name属性的表单元素才能在提交表单时传递它们的值

value
  + type=“button”、“reset”、"submit"用于定义按钮上的显示的文本

+ type=“text”、“password”、"hidden"用于定义输入字段的初始值

+ type=“checkbox”、“radio”、"image"用于定义与输入相关联的值

+ [注1]type="checkbox"或"radio"必须设置value属性

​ +[注2]value属性无法与type="file"的input元素一起使用

palceholder 提示
要修改placeholder的颜色需要使用::placeholder
注：IE9-浏览器不支持

pattern
pattern属性规定用于验证input域的模式。模型pattern是正则表达式
pattern属性适用于以下类型的input元素：text、search、url、tel、email、password
注：IE9-浏览器及safari浏览器不支持

type
用来规定input元素的类型
注：如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type=“text”

readonly 只读
注：只读字段是不能修改的，但用户仍然可以使用tab按键切换到该字段，还可以选中或拷贝其文本
readonly属性可与type="text"或"password"的input元素配合使用

maxlength 最大长度
maxlength属性规定输入字段的最大长度，以字符个数计
注：该属性只能与type="text"或type="password"的input元素配合使用

src 提交按钮显示的图像的URL
注：src属性只能且必须与type="image"的input元素配合使用

autofocus
autofocus属性规定在页面加载时，域自动地获得焦点
适用于button、input、keygen、select和textarea元素
注：代码中出现多个autofocus时，只执行第一个autofocus

novalidate
novalidate属性规定在提交表单时不验证form或input域
novalidate属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color
注：需要在form标签与input标签上同时使用，因为两者都会对vlaue进行验证。在input上使用时必须有name属性。

list
大多数输入类型包含一个属性list，它和一个新元素datalist结合使用，这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示，而是为其他元素的list属性提供数据
list属性适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color

height
height属性用于规定image类型的input标签的图像高度
注：该属性只适用于image类型的input标签

width
width属性用于规定image类型的input标签的图像宽度
注：该属性只适用于image类型的input标签

min
min属性规定输入域所允许的最小值

max
max属性规定输入域所允许的最大值

step
step属性为输入域规定合法的数字间隔
min、max、step属性适用于以下类型的input元素:date pickers、number、range

multiple
multiple规定按住ctrl按键，输入字段可以选择多个值
该属性适用于type="email"和"file"的input元素
注：该属性IE9-浏览器不支持

form
form属性规定输入域所属的一个或多个表单，form属性必须和所属表单的id相同
form属性适用于所有input标签的类型，若需要引用一个以上的表单时，用空格分隔
注：IE浏览器不支持该属性，只有元素拥有name属性，该属性才有效

<form id="form1" action="#">
    <input type="submit">
</form>
<input name="test" form="form1">

formaction
重写表单的action属性.
注：值修改当前这个input的提交位置，其他的input提交value的位置不会该变。

<form action="#" >
	First name: <input type="text" name="fname" /><br />
	Last name: <input type="text" name="lname" /><br />
	<input type="submit" value="提交" /><br />
	<input type="submit" formaction="#" value="以管理员身份提交" />
</form>

formmethod
重写表单的method属性.

<form action="#" method="get">
	  First name: <input type="text" name="fname" /><br />
	  Last name: <input type="text" name="lname" /><br />
	<input type="submit" value="提交" />
	<input type="submit" formmethod="post" formaction="#" value="使用POST提交" />
</form>

formtarget
重写表单的target属性.

<form action="#">
	  First name: <input type="text" name="fname" /><br />
	  Last name: <input type="text" name="lname" /><br />
	<input type="submit" value="提交" />
	<input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" />
</form> 

无值属性

checked 默认选中
enabled 可用状态
disabled 禁用状态

disabled
disabled属性规定应该禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本
[注1]disabled属性无法与type="hidden"的input元素一起使用
[注2]对于IE7-浏览器必须设置为disabled=“disabled”，而不可以直接设置disabled，否则使用javascript控制时将失效

required
required属性规定必须在提交之前填写输入域(不能为空)
required属性适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file
注：IE9-浏览器及safari浏览器不支持

<form action="#">
    <input required>    
    <input type="submit">
</form>

新增控件
datalist：定义输入域的选项列表
keygen：定义密钥对生成器，用于生成密钥
output：用于显示计算的结果
progress：用于显示进度(前进量)
meter：用于显示度量(剩余量)

datalist
datalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。如果需要把datalist绑定到输入域，需要把输入域的list属性引用datalist的id。option元素一定要设置value属性
注：IE9-浏览器及safari浏览器不支持

keygen
keygen规定用于表单的密钥生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器
注：safari和IE不支持该属性，chrome部分支持该属性

output
output元素用于显示计算的结果，这是一个语义化标签，定义不同类型的输出，比如脚本的输出
注：E浏览器不支持该属性

progress
progress元素用来标示任务的进度或进程(常用于表示过程)
注：IE9-浏览器及safari浏览器不支持
注：如果progress控件什么属性都不设置，则会有进度条左右往返运动的效果
属性：
max 最大值
value 已完成的进程

meter
meter元素用于显示剩余容量或剩余库存(常用于表示状态)
注：IE浏览器及safari浏览器不支持

简单关系图：