html语言表单的元素,HTML5中的表单元素

本节重点

HTML5中添加了许多新特性的表单元素

表单元素主要表现在 元素Element + 类型Type + 属性attribute

表单元素汇总解析

表单元素列表

元素名称

说明

form

表示 HTML 表单

input

表示用来收集用户输入数据的控件

textarea

表示可以输入多行文本的控件

select

表示用来提供一组固定的选项

option

表示提供提供一个选项

optgroup

表示一组相关的 option 元素

button

表示可用来提交或重置的表单按钮(或一般按钮)

datalist

定义一组提供给用户的建议值

fieldset

表示一组表单元素

legend

表示 fieldset 元素的说明性标签

label

表示表单元素的说明标签

output

表示计算结果

其他表单元素

元素名称

说明

select

生成一个下拉列表进行选择

optgroup

对 select 元素进行编组

option

select 元素中的项目

textarea

生成一个多行文本框

output

表示计算结果

表单元素解析

表单元素有许多共有的属性，大家注意分辨 不同表单元素的特有属性

1.form 表单解析

提交

form 表单的属性

属性名称

说明

action

表单需要提交的页面

method

表单需要提交的方式 get/post

entype

entype与文件上传息息相关
1. application/x-www-form-urlencoded(默认编码，不能将进行文件上传)

2. multipart/form-data (用于将文件上传到服务器的编码)
3. text/plain (未规范编码，不建议使用)

name

表单名称，建议书写，用于程序识别表单

target

设置提交时的目标位置:_blank、_parent、_self、_top

autocomplete

设置浏览器记住用户输入的数据,实现自动完成表单。
默认为on自动完成 , 如果不想自动完成则设置 off。

novalidate

是否进行表单的有效性检查(浏览器m默认的检查效果)

2.input 表单的属性

属性名称

说明

autofocues

让光标聚焦在input上，可以让用户直接输入

disable

禁用input,(禁止用户输入)

autocomplete

设置input的自动完成功能

form

设置表单挂钩

让表单外的元素设置表单挂钩提交

type

元素的 type 属性是最多的

3.设置表单说明

用户名:

4.

对表单进行编组

`

`元素可以将一些表单元素组织在一起,形成一个整体,并且可与外部挂钩

属性名称

说明

name

给分组定义一个名称

form

让表单外的分组与表单挂钩

disabled

禁用分组内的表单

5.添加分组说明标签

注册表单

6.添加按钮

button 按钮的type 属性有如下几个值:

值名称

说明

submit

表示按钮的作用是提交表单,默认

reset

表示按钮的作用是重置表单

button

表示按钮为一般性按钮,没有任何作用

button 的 type = submit 时会提供额外的属性 主要用作覆盖已有的 form 表单属性

属性名称

说明

form

指定按钮关联的表单

formaction

覆盖 form 元素的 action 属性

formenctype

覆盖 form 元素的 enctype 属性

formmethod

覆盖 form 元素的 method 属性

formtarget

覆盖 form 元素的 target 属性

formnovalidate

覆盖 form 元素的 novalidate 属性

表单元素(主要为 Input)的类型 Type

input 表单的属性用于 限制表单的内容 + 表单的样式

1.表单的属性汇总

属性

说明

text

简单的文本框，input的默认行为

password

密码框

search

搜索框

submit 、reset 、button

提交按钮、重置按钮、普通按钮

number range

只能输入数字的按钮，range 用于设置数字范围

checkbox 、radio

复选框，单选框

image

生成一个图片按钮

color

生成颜色代码的按钮

email、tel、url

生成一个检测电子邮件、号码、网址的文本框

date、month、time、
week、datetime、 datetime-local

获取日期和时间

hidden

生成一个隐藏的控件

file

生成一个上传文件的组件

表单元素类型的分类解析

1.type值为text时 元素属性

属性

说明

list

和为 input 框提供值的datalist一块使用，相当于select的变形形式

maxlength

设置文本框的最大宽度

pattern

用于输入的正则表达式

placeholder

用于输入字符的提示

readonly

设置只读状态

disabled

设置禁用状态

size

设置文本框的宽度

value

文本框的初始值

required

是否为必填字段

设置文本提供的建议值 为 select 的变相形式

苹果

桔子

2.type值为password时 一般用于密码框的输入,所有的字符都会显示星号

属性名称

说明

maxlength

设置密码框最大字符长度

pattern

用于输入验证的正则表达式

placeholder

输入密码的提示

readonly

密码框处于只读状态

disabled

文本框处于禁用状态

size

设置密码框宽度

value

设置密码框初始值

required

表明用户必须输入同一个值

3.type值search search表单会显示一个叉来取消搜索内容

search 表单的属性和 text 表单的属性相同

type 为 number、range 时

type = number 生成一个只能填写数字的文本框

type = range 生成一个表示数字范围的文本框，并且只能拖动

属性

说明

list

指定为文本框提供建议值的 datalist 元素,其值为 datalist 元素的 id 值

min

设置可接受的最小值

max

设定可接受的最大值

readonly

设置文本框内容只读

required

表明用户必须输入一个值,否则无法通过输入验证

step

指定上下调节值的步长

value

指定初始值

设置数字的步长以及范围

5.type = data时 文本框可以获取日期和时间的值

6.type = color 实现文本框获取颜色的功能

7.type = image 生成一个图片按钮,点击图片就实现提交功能

属性名称

说明

src

指定要显示图像的 URL

alt

提供图片的文字说明

width

图像的长度

height

图像的高度

提交额外属性

formaction、formenctype、formmethod、formtarget和 formnovalidate。

8.type 为 checkbox、radio 时 生成一个获取布尔值的复选框或固定选项的单选框

属性名称

说明

checked

设置复选框、单选框是否为勾选状态

required

表示用户必须勾选,否则无法通过验证

value

设置复选框、单选框勾选状态时提交的数据。默认为 on

9.type 为 submit、reset 和 button 生成 提交、重置和一般按钮

如果是 type = submit 时,提供了和元素一样的额外属性

formaction、

formenctype、

formmethod、

formtarget、

formnovalidate

10.**type 为 email、tel、url **

11.type 为 hidden 生成一个隐藏控件

12.type 为 file 生成一个文件上传控件

属性名称

说明

accept

指定接受的 MIME 类型

required

表明用户必须提供一个值,否则无法通过验证

accept="image/gif, image/jpeg, image/png"

其他元素解析 select + textarea

其他表单元素

元素名称

说明

select

生成一个下拉列表进行选择

optgroup

对 select 元素进行编组

option

select 元素中的项目

textarea

生成一个多行文本框

output

表示计算结果

select表单元素 生成下拉列表

苹果

橘子

香蕉

下拉列表元素至少包含一个子元素,才能形成有效的选项列 表。

可以充分利用 形成分组select选择区域内分组

slect的属性解析 (所有的表单元素都有 autofocus 属性)

属性名称

说明

name

设定提交时的名称

disabled

将下拉列表禁用

form

将表单外的下拉列表与某个表单挂钩

size

设置下拉列表的高度

multiple

设置是否可以多选

橘子

苹果

橘子

香蕉

3.多行文本框

多行文本框的属性设置

属性名称

说明

name

设定提交时的名称

form

将表单外的多行文本框与某个表单挂钩

readonly

设置多行文本框只读

disabled

将多行文本框禁用

maxlength

设置最大可输入的字符长度

autofocus

获取焦点

placeholder

设置输入时的提示信息

rows

设置行数

cols

设置列数

wrap

设置是否插入换行符,有 soft 和 hard 两种

required

设置必须输入值,否则无法通过验证

输入验证 主要针对于表单中的 email password number 等形式的表单进行验证

必填验证

范围限制验证

正则表达式验证 适用于所有的表单

阻止表单的验证动作