html表单的13种表单控件

html表单的13种表单控件

目录

一、概述

二、传统控件

三、新增控件

一、概述

除了input标签外,html还有八个传统表单控件和五个html5新增的表单控件。

二、传统控件

button 定义按钮

select 定义下拉列表

option 定义下拉列表中的选项

optgroup 定义选项组,用于组合选项

textarea 定义多行的文本输入控件

fieldset 分组表单内的相关控件

legend 定义fieldset标签的标题

label 定义input标签的标注

button标签

定义按钮。标签内部可放置文本、图像或其它多媒体内容。唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

始终为button标签设置type特性,ie7及以下版本的浏览器的默认类型是button,而其它浏览器的默认类型是submit。

ie7及以下版本的浏览器提交button标签之间的文本,其它浏览器则会提交value特性值。

button标签比input标签更易样式化,可以添加内联html内容,如em标签、strong标签或img标签等。可以使用:after和:before伪元素实现复杂的渲染。

button标签的特性值如下所示。

autofocus 页面加载时按钮自动获得焦点

disabled 禁用按钮

form 规定按钮属于一个或多个表单(特性值为form表单的id)

formaction 覆盖form元素的action属性

formenctype 覆盖form元素的enctype属性

formmethod 覆盖form元素的method属性

formnovaliadate 覆盖form元素的novalidate属性

formtarget 覆盖form元素的target属性

name 规定按钮的名称

type 规定按钮的类型

value 规定按钮的初始值

姓:

名:

下面的按钮位于form标签之外,但仍是表单的一部分

select

定义下拉列表,可以包含任意数量的option和optgroup标签,标签特性如下所示。

autofocus 页面加载后自动获得焦点

disabled 禁用控件

form 规定文本区域所属的一个或多个表单

multiple 允许多选

name 规定下拉列表的名称

size 规定下拉列表中可见选项的数目,size不可为0,默认为1

option标签

定义下拉列表的选项。option标签有两个应用场景,其一下拉列表select,其二选项列表datalist。标签特性如下所示。

disabled 规定此选项应在首次加载时被禁用

label 定义当使用optgroup时所使用的标注,替代option元素内容,firefox不支持label属性

selected 规定选项在首次显示在列表中时表现为选中状态

value 定义送往服务器的选项值

当设置value特性时,服务器提交的是value特性值,否则提交给服务器的是option标签的文本内容。注意,option无法设置margin、padding、border等盒模型样式。

optgroup标签

定义选项组,用于组合选项。注意,optgroup无法设置margin、padding、border等盒模型样式。标签特性如下所示。

label 为选项组规定描述(必须)

disabled 规定禁用该选项组(可选)



textarea标签

定义多行文本输入控件,文本区可容纳无限数量的文本。注意,浏览器不允许textarea嵌套textarea。标签特性如下所示。

name 规定文本区的名称

value 表示文本区的值

disabled 规定禁用该文本区

readonly 规定文本区为只读

注意,ie7及以下版本的浏览器不支持通过setAttribute('disabled','')的写法,必须设置为setAttribute('disabled','disabled')。ie7及以下版本的浏览器不支持通过JS设置readonly特性。

form 规定文本区域所属的一个或多个表单,IE浏览器不支持该属性

autofous 规定在页面加载后文本区域自动获得焦点,IE9-浏览器不支持该属性

required 规定文本区域是必填的,IE9-浏览器和safari浏览器不支持该属性

placeholder 规定描述文本区域预期值的简短提示,IE9-浏览器不支持该属性

maxlength 规定文本区域的最大字符数,IE9-浏览器不支持该属性

cols 规定文本区内的可见列数

rows 规定文本区内的可见行数

注意,可以用cols和rows来规定textarea的尺寸,但更好的办法是使用CSS的height和width属性。

cols:

rows:

wrap 规定当在表单中提交时,文本区域中折行如何处理

当特性值为soft时,表示表单提交时,虽然文字在屏幕上折行,但提交的数据里不会有换行符(默认值)。当特性值为hard时,表示表单提交时,提交的数据包含文本换行符%0D%0A。

fieldset标签

用于将表单内的相关元素分组,提升可访问性,多数浏览器用一个简单的边框来显示fieldset。特性值如下所示。

disabled 禁用fieldset

form 规定fieldset所属的一个或多个表单

name 规定fieldset的名称

legend标签

用于定义fieldset标签的标题。

健康信息

身高:

体重:

label标签

为input标签定义标注,建立文字标签与表单控件的关联。在label标签内点击文本会触发此控件,选择该文本时浏览器会自动把焦点转移到和标签相关的表单控件上。标签特性值如下所示。

for 规定label绑定到哪个表单控件

form 规定label字段所属的一个或多个表单

label标签有两种用法,其一使用for特性,其二将表单控件嵌套到label标签内部。ie6浏览器只识别使用for特性的方法。

注意,label标签的for特性值为绑定表单控件的id特性值。

使用for方法


使用嵌套方法


label标签有三个JS属性,分别是form、htmlFor和control。

form:表示label控件所归属的表单

htmlFor:表示label控件的for特性值

control:表示label控件所指定的input控件(注意:IE浏览器不支持)

三、新增控件

datalist 定义输入域的选项列表

keygen 定义密钥对生成器,用于生成密钥

output 用于显示计算的结果

progress 用于显示进度(前进量)

meter 用于显示度量(剩余量)

datalist标签

规定输入域的选项列表,列表是通过option标签创建的。若要把datalist绑定到输入域,需要把输入域的list特性值设置为datalist的id特性值。option标签一定要设置value特性。注意,ie9及以下版本的浏览器及safari浏览器不支持。

keygen标签

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

autofocus 页面加载时获得焦点

challenge 如果使用,则将keygen的值设置为在提交时询问

disabled 禁用keygen字段

form 定义所属的一个或多个表单

keytype 定义keytype,rsa生成RSA密钥(默认)

name 定义keygen元素的唯一名称

Username:

Encryption:

output标签

用于显示计算的结果。这是一个语义化标签,定义不同类型的输出,比如脚本的输出。注意,ie浏览器不支持该标签。标签特性如下所示。

for 定义输出域相关的一个或多个标签

form 定义输入字段所属的一个或多个表单

name 定义对象的唯一名称

0100

+

=

progress标签

用来表示任务的进度或进程(常用于表示过程)。注意,ie9及以下版本的浏览器及safari浏览器不支持。

max 规定任务一共需要多少工作

value 规定已完成多少工作

如果progress控件什么属性都不设置,则会有进度条左右往返运动的效果。

下载进度:

meter标签

meter元素用于显示剩余容量或剩余库存(常用于表示状态),注意,ie浏览器及safari浏览器不支持。标签特性如下所示。

form 规定标签所属的一个或多个表单

high 规定被视作高的值的范围

low 规定被视作低的值的范围

max 规定范围的最大值

min 规定范围的最小值

optimum 规定度量的最优值

value 规定度量的当前值(必需)

注意,min < low < high < max。

库存量:

如果meter标签的value特性,取值为小数,如0.3,且没有max属性值时,则颜色块显示为宽高的30%。

相关推荐