html5表单元素详解
表单是Html中获取用户输入的手段。此文对表单的元素进行了详细整理。
表单基本元素 form input button
form元素
html4中,form元素相当于表单的外包装,其他都要在里面。html中,相关元素可以放在任何位置,但要在其中定义一个for属性,属性值为相关form的id值。
相关属性
1.action,说明提交表单时,浏览器应该把收集的数据发送到什么地方。
2. method,说明用来将表单数据发送到服务器的http方法,有post,get两种方法。
get用于安全交互,同一个请求可以发起任意多次不会产生额外作用,用于获取只读信息。
post用于不安全交互,提交会引起一系列状态变化,拿不准用哪一种则用post.
3.enctype说明了浏览器对发送服务器的数据采用的编码方式,有三种方法。
application/x-www-form-urlencoded未设置属性3时默认的编码方式,除不能传递文件到服务器,适用于任何类型。
传递时特殊字符替换为对应html实体,数据项的名称和值以等号(=)分开,各项数据间以&分卡。
如两个input分别为name:fave;value:apples.name:name;value:adam freeman.编码后的结果:
fave=apples&name=adam+freeman
mutipart/form-data更加复杂,只用于需要上传文件到服务器时的表单。
text/plain没有正式规范,慎用
4.autocomplete 控制表单自动完成功能,默认值为on,表明允许浏览器填写,否则为off。input也有这个属性
5.target 表明提交表单后反馈信息所在页面,有5个值。
_blank 显示在新窗口或新标签
_parent 显示在父级框组中
_self反馈在当前窗口,默认行为
_top显示在顶层窗口
<frame> 显示在指定窗框中
6.name 设置独一无二的标识符,用于区分各个表单。另input没name值的话不会发送数据到服务器。
例
<form name="fruitvote" id="fruitvote" method="post" action="http://baidu.com" target="_balnk" autocomplete="off" enctype="application/x-www-form-urlencoded">
<input name="fave"/>
<input name="name"/>
<buttton> subbmit </buttton>
</form>
以上是设置在form元素中的属性
7.label 为每个文本框添加标签 for属性对应相关Input的id值,有助于屏幕阅读器和其他残障辅助技术对表单的处理。
例
<p><label for="fave"> fruit<inout id="fave" name="fave"></label></p>
8.autofocus 表单显示出来时,聚焦于某个input元素
例
<p><label for="fave"> fruit<inout id="fave" name="fave" autofocus></label></p>
9. disable 禁用某个input元素,用法同8.novalidate,表明是否进行有效性检查
10.fieldset将表单进行编组,属性disable可以禁用整个分组
11.legend fieldset内部的第一个子元素
例
button元素
不同操作由其type属性决定,分别有三个
1.submit 表示按钮作用是提交表单
属性formction 覆盖form的action属性
formenctype覆盖enctype
formmethod覆盖method
target覆盖target
formnovalidate覆盖novalidate,表明是否进行有效性检查
2.reset表示重置所有input为初始状态,无另外属性
3.button 仅仅是个按钮,没其他含义
input元素
input的属性与其type属性息息相关,当type属性为以下时
1. text,默认形式,显示为一个单行文本框。
size 设定了文本框能显示的字符数目
maxlength设定了用户能输入的字符最大数目
placeholder设置提醒文字,灰色
value 设置默认值
list 设置datalist元素得出id值,其中datalist元素提供一批值,以便帮助用户输入需要的数据,提供给用户选择的值歌咏一个option元素指定,option元素被选中的是其value值,但显示的可以是label属性值,也可以是option的内容.
例
<input id="myCar" list="cars" /><datalist id="cars">
<option value="BMW"label="aaa"> <option value="Ford">aaa</option> <option value="Volvo"></datalist>
readonly 阻止用户编辑,但外观无变化,能提交给服务器,但无变化的外观会有误会,慎用
disabled 阻止用户编辑,显示灰色,不能被提交到服务器
requires 必须输入一个值,不然无法验证
2.password 输入密码
相关属性,maxlength,pattern正则表达式,placeholder,readonly ,required,size,value
3.submit,reset,button,生成类似button元素。
submit型input和button同名属性用法相同
4.number 只能输入整数或浮点数
相关属性
list,类似于text的list属性
min,max可接受的最小最大值
readonly,只读
required
step,上下调节的步长
value初始值
5.range只能从规定范围选一个值,属性和number型相同。
6.checkbox选择是或否的复选框
相关属性
checked刚显示出来时为选中状态
required必须勾选该复选框
value,默认为On,设定复选框呈勾选状态提交给服务器的数据值。 不太懂,后面再说
7.radio单选按钮
相关属性
checked初始选中状态
required必须在一组单选按钮中选择一个
value,呈选定状态时提交的值。
8.email,tel.url能接受输入分别为电子邮箱地址,电话号码和url的数据。其中email还支持multiple的属性,表示可以多个地址。
9.datetime 获取世界时日期,包括时区。例2011-07-19T16:49:39.444Z
datetime-local 获取本地时间和日期,不包括时区信息 例2011-07-19T16:49:39.444
date 获取本地日期 例2011-04-20
month 获取年月信息 例2011-04
time 获取时间 例17:02:22.415
week 获取当前星期 例2011-w30
支持性不高
10.color 用来选择颜色,支持list属性
11.search型没啥用
12.hidden 不显示不能编辑,但能传送给服务器
13. image 显示为一幅图像,点击表示提交
14.file 提交文件
其他表单元素
select
产生一个列表供用户选择,类似datalist
<select>
<option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option></select>
mutiple属性表示可多选,可以在内部用optgroup分组。
textarea
rows(宽)和cols(高)属性控制大小,wrap属性 两个值hard.soft,wrap 属性规定当在表单中提交时,文本区域(text area)中的文本如何换行.
hard表示当在表单中提交时,textarea 中的文本换行(包含换行符),当使用 "hard" 时,必须规定 cols 属性。
soft表示当在表单中提交时,textarea 中的文本不换行。默认值。
output
表示计算结果
keygen
生成公开或私有密钥