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内部的第一个子元素 

例

<form>

  <fieldset>

    <legend>健康信息</legend>

    身高：<input type="text" />

    体重：<input type="text" />

  </fieldset>

</form>

 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 

生成公开或私有密钥

 

转载于:https://www.cnblogs.com/cumting/p/6744307.html