本节重点
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 等形式的表单进行验证
必填验证
范围限制验证
正则表达式验证 适用于所有的表单
阻止表单的验证动作