内部的第一个元素 ,会嵌入显示在控件组的上边框里面
学生情况登记
年龄:
性别:
这个控件组的标题会,嵌入显示在``的上边框。
label标签
标签标签是一个行内元素,提供控件的文字说明 ,帮助用户理解控件的目的
用户名:
输入框前面会有文字说明“用户名:”
注意:
控件也可以放在
之中,这时不需要for
属性和id
属性
用户名:
优势
增加了控件的可用性 --- 有些控件比较小 (比如单选框),不容易点击 ,那么点击对应的
标签,也能选中该控件。点击
,就相当于控件本身的click
事件
label属性
for --- 关联相对应的控件 ,它的值是对应控件的id
属性。所以,控件最好设置id
属性
form --- 关联表单的id
属性。设置了该属性后,
可以放置在页面的任何位置 ,否则只能放在
内部
标签是一个行内元素,用来接收用户的输入。它是一个单独使用的标签,没有结束标志
autofocus --- 布尔属性,是否在页面加载时自动获得焦点
disabled --- 布尔属性,是否禁用该控件 。一旦设置,该控件将变灰,用户可以看到,但是无法操作
form --- 关联表单的id
属性 。设置了该属性后,控件可以放置在页面的任何位置,否则只能放在
内部
lisit --- 关联的
的id
属性,设置该控件相关的数据列表
name --- 控件的名称,主要用于向服务器提交数据时,控件键值对的键名 。注意,只有设置了name
属性的控件,才会向服务器提交,不设置就不会提交
readonly --- 布尔属性,是否为只读
required --- 布尔属性,是否为必填
type --- 控件类型,详见下文
value --- 控件的值
text
是普通的文本输入框 ,用来输入单行文本。如果用户输入换行符,换行符会自动从输入中删除
text输入框有以下配套属性
maxlength --- 可以输入的最大字符数 ,值为一个非负整数
minlength --- 可以输入的最小字符数 ,值为一个非负整数,且必须小于maxlength
pattern --- 用户输入必须匹配的正则表达式 ,比如要求用户输入4个~8个英文字符,可以写成pattern="[a-z]{4,8}"
。如果用户输入不符合要求,浏览器会弹出提示,不会提交表单
placeholder --- 输入字段为空 时,用于提示的示例值 。只要用户没有任何字符,该提示就会出现,否则会消失
readonly --- 布尔属性,表示该输入框是只读的 ,用户只能看,不能输入
size --- 表示输入框的显示长度有多少个字符宽 ,它的值是一个正整数,默认等于20。超过这个数字的字符,必须移动光标才能看到
spellcheck --- 否对用户输入启用拼写检查 ,可能的值为true
或false
searc
是一个用于搜索的文本输入框 ,基本等同于type="text"
。某些浏览器会在输入的时候,在输入框的尾部显示一个删除按钮,点击就会删除所有输入,让用户从头开始输入
是没有默认行为的按钮 ,通常脚本指定click
事件的监听函数 来使用
注意:
建议尽量不使用这个类型,而使用
标签代替 ,一则语义更清晰,二则
标签内部可以插入图片或其他 HTML 代码
submit
是表单的提交按钮。用户点击这个按钮,就会把表单提交给服务器
注意:
如果不指定value
属性 ,浏览器会在提交按钮上显示默认的文字 ,通常是Submit
image
表示将一个图像文件 作为提交按钮,行为和用法与submit完全一致
图像文件是一个可以点击的按钮,点击后会提交数据到服务器
image属性
alt --- 图像无法加载 时显示的替代字符串
scr --- 加载的图像 URL
geight --- 图像的显示高度 ,单位为像素
width --- 图像的显示宽度 ,单位为像素
formaction --- 提交表单数据的服务器 URL
formenctype --- 表单数据的编码类型
formmethod --- 提交表单使用的 HTTP 方法 (get
或post
)
formnovalidate --- 一个布尔值,表示数据提交给服务器之前,是否要忽略表单验证
formtarget --- 收到服务器返回的数据后,在哪一个窗口显示
注意:
用户点击图像按钮提交时,会额外提交两个参数x
和y
到服务器,表示鼠标的点击位置,比如x=52&y=55
。x
是横坐标,y
是纵坐标,都以图像左上角作为原点(0, 0)
。如果图像按钮设置了name
属性,比如name="position"
,那么将以该值作为坐标的前缀,比如position.x=52&position.y=55
。这个功能通常用来地图类型的操作 ,让服务器知道用户点击了地图的哪个部分
reset
是一个重置按钮 ,用户点击以后,所有表格控件重置为初始值
注意:
如果不设置value
属性,浏览器会在按钮上面加上默认文字,通常是Reset
checkbox
是复选框,允许选择或取消 选择该选项。
是否同意
上面代码会在文字前面,显示一个可以点击的选择框,点击可以选中,再次点击可以取消。上面代码中,checked属性表示默认选中
多个相关的复选框,可以放在 里面
你的兴趣
编码
音乐
radio
是单选框 ,表示一组选择之中 , 只能选中一项 。单选框通常为一个小圆圈 ,选中时会被填充或突出显示
性别
男
女
radio属性
checked --- 布尔属性,表示是否默认选中当前项
value --- 用户选中该项时,提交到服务器的值,默认为on
email
是一个只能输入电子邮箱的文本输入框。表单提交之前 ,浏览器会自动验证 是否符合电子邮箱的格式,如果不符合 就会显示提示 ,无法提交到服务器
能输入后缀为`foobar.com`的邮箱地址
email 属性
maxlength --- 可以输入的最大 字符数
minlength --- 可以输入的最少 字符数
multiple --- 布尔属性,是否允许输入多个以逗号分隔 的电子邮箱
pattern --- 输入必须匹配 的正则 表达式
placeholder --- 输入为空时的显示文本
readonly --- 布尔属性,该输入框是否只读
size --- 一个非负整数,表示输入框的显示长度为多少个字符
spellcheck --- 是否对输入内容启用拼写检查 ,可能的值为true或false
password
是一个密码输入框。用户的输入会被遮挡 ,字符通常显示星号(*
)或点(·
)
password属性
maxlength --- 可以输入的最大 字符数
minlength --- 可以输入的最少 字符数
pattern --- 输入必须匹配 的正则 表达式
placeholder --- 输入为空时的显示文本
readonly --- 布尔属性,该输入框是否只读
size --- 一个非负整数,表示输入框的显示长度为多少个字符
autocomplete --- 是否允许自动填充 ,可能的值有on
(允许自动填充)、off
(不允许自动填充)、current-password
(填入当前网站保存的密码)、new-password
(自动生成一个随机密码)
inputmode --- 允许用户输入的数据类型 ,可能的值有none
(不使用系统输入法)、text
(标准文本输入)、decimal
(数字,包含小数)、numeric
(数字0-9)等
file
是一个文件选择框,允许用户选择一个或多个文件,常用于文件上传功能
file 属性
accept --- 允许选择的文件类型 ,使用逗号分隔 ,可以使用 MIME 类型(比如image/jpeg
),也可以使用后缀名(比如.doc
),还可以使用audio/*
(任何音频文件)、video/*
(任何视频文件)、image/*
(任何图像文件)等表示法
capture --- 用于捕获图像 或视频数据的源 ,可能的值有user
(面向用户的摄像头或麦克风),environment
(外接的摄像头或麦克风)
multiple --- 布尔属性,是否允许用户选择多个文件
hidden
是一个不显示在页面 的控件,用户无法输入它的值,主要用来向服务器传递一些隐藏信息 。比如,CSRF 攻击会伪造表单数据,那么使用这个控件,可以为每个表单生成一个独一无二的隐藏编号,防止伪造表单提交
用户提交表单的时候,浏览器会将`prodId=xm234jq`发给服务器
number
是一个数字输入框,只能输入数字 。浏览器通常会在输入框的最右侧 ,显示一个可以点击的上下箭头,点击向上箭头,数字会递增,点击向下箭头,数字会递减
最小可以输入10,最大可以输入100。
number属性
max --- 允许输入的最大数值
min --- 允许输入的最小数值
placeholder --- 用户输入为空时,显示的示例值
readonly --- 布尔属性,表示是否为只读
step --- 点击向上和向下箭头时,数值每次递减的步长值 。如果用户输入的值,不符合步长值的设定,浏览器会自动四舍五入到最近似的值。默认的步长值是1
,如果初始的value
属性设为1.5
,那么点击向上箭头得到2.5
,点击向下箭头得到0.5
range
是一个滑块 ,用户拖动滑块,选择给定范围之中的一个数值。常见的例子是调节音量
注意:
因为拖动产生的值是不精确的,如果需要精确数值 ,不建议使用这个控件
range属性
max --- 允许输入的最大数值 ,默认为100
min --- 允许输入的最小数值 ,默认为0
step --- 步长值,默认为1
value 属性的初始值就是滑块的默认位置 。如果没有设置value属性,滑块默认就会停在最大值和最小值中间
url
是一个只能输入网址的文本框 。提交表单之前,浏览器会自动检查网址格式 是否正确,如果不正确,就会无法提交
pattern 属性指定输入的网址只能使用 HTTPS 协议
注意:
该类型规定,不带有协议的网址是无效的比如foo.com是无效的,http://foo.com是有效的
url属性
maxlength --- 可以输入的最大 字符数
minlength --- 可以输入的最少 字符数
pattern --- 输入必须匹配 的正则 表达式
placeholder --- 输入为空时的显示文本
readonly --- 布尔属性,该输入框是否只读
size --- 一个非负整数,表示输入框的显示长度为多少个字符
spellcheck --- 是否启动拼写检查 ,可能的值为true
(启用)和false
(不启用)
tel
是一个只能输入电话号码 的输入框。由于全世界的电话号码格式都不相同,因此浏览器没有默认的验证模式 ,大多数时候需要自定义验证
Format: 123-456-7890
只能输入10位电话号码的输入框
tel属性
maxlength --- 可以输入的最大 字符数
minlength --- 可以输入的最少 字符数
pattern --- 输入必须匹配 的正则 表达式
placeholder --- 输入为空时的显示文本
readonly --- 布尔属性,该输入框是否只读
size --- 一个非负整数,表示输入框的显示长度为多少个字符
color
会显示一个'#e66465'的色块。点击色块,就会出现一个拾色器,供用户选择颜色
注意:
如果没有指定value
属性的初始值,默认值为#000000
(黑色)
date
是一个只能输入日期的输入框 ,用户可以输入年月日,但是不能输入时分秒。输入格式是YYYY-MM-DD
默认日期是2018年7月22日。用户点击以后,会日期选择器,供用户选择新的日期
date属性
max --- 允许输入的最晚日期 ,格式为YYYY-MM-DD
min --- 允许输入的最晚日期 ,格式为YYYY-MM-DD
step --- 步长值,一个数字,以天数为单位
time
是一个只能输入时间的输入框 ,可以输入时分秒,不能输入年月日 。日期格式是24小时制 的hh:mm,如果包括秒数 ,格式则是hh:mm:ss。日期选择器的形式则随浏览器不同而不同
time属性
max --- 允许输入的最晚时间
min --- 允许输入的最早时间
readonly --- 布尔属性,表示用户是否不可以编辑 时间
step --- 步长值,单位为秒
month
是一个只能输入年份和月份 的输入框,格式为 YYYY-MM
month属性
max --- 允许输入的最晚时间 ,格式为YYYY-MM
min --- 允许输入的最早时间 ,格式为YYYY-MM
readonly --- 布尔属性,表示用户是否不可以编辑 时间
step --- 步长值,单位为月
week
是一个输入一年中第几周的输入框 。格式为yyyy-Www,比如2018W18表示2018年第18周
week属性
max --- 允许输入的最晚时间 ,格式为YYYY-Www
min --- 允许输入的最早时间 ,格式为YYYY-Www
readonly --- 布尔属性,表示用户是否不可以编辑 时间
step --- 步长值,单位为周
datetime-local
是一个时间输入框,让用户输入年月日和时分,格式为YYYY-MM--ddThh:mm
datetime-local属性
max --- 允许输入的最晚时间 ,格式为YYYY-MM-ddThh:mm
min --- 允许输入的最早时间 ,格式为YYYY-MM-ddThh:mm
step --- 步长值,单位为秒,默认值为60
表单标签会生成一个可以点击的按钮,没有默认行为,通常需要用type属性或脚本指定按钮的功能
点击
会产生一个按钮,上面的文字就是“点击”
autofocus --- 布尔属性,表示网页加载时,焦点就在这个按钮。网页里面只能有一个元素,具有这个属性
disabled --- 布尔属性,表示按钮不可用 ,会导致按钮变灰,不可点击
name --- 按钮的名称 (与value属性配合使用)
value --- 按钮的值 (与name属性配合使用),将以name=value的形式,随表单一起提交到服务器
type --- 按钮的类型 ,可能得值有三种:submit(点击后将数据提交给服务器),reset(将所有控制的值重置为初始值),button(没有默认行为,由脚本指定按钮的行为)
form --- 指定按钮关联的