表单和页面功能
<input type="替换位置">
text: 文本域 —— 定义单行输入字段,在表单中输入字母、数字等内容。默认宽度:20个字符
radio: 单选按钮 —— 若干给定的选项中选取一个
checkbox: 复选框 —— 从若干中选取一个或几个
<select><option>: 下拉列表 —— 提供多个可选的项,(两个必须联合使用)
<password>: 密码域 —— 密码会自动掩盖
<submit>: 提交按钮 —— 将表单自动提交到数据库
<button>: 可点击按钮 —— 普通点击按钮
<image>: 图像按钮 —— 图像形式的提交按钮,可以用户自己选择
<hidden>: 隐藏域 —— 隐藏的输入字段
<reset>: 重置按钮 —— 清除表单中所有数据
<file>: 文件域 —— 输入字段和“浏览”按钮,用于上传文件
email类型:
专门输入Email地址的文本框。再提交表单的时候,会自动验证。
url类型:
输入url地址这类特殊的文本的文本框,再提交的是url地址,则会提交数据库的服务器,不是则不允许提交
number类型:
输入数值的文本框,用户可以设定对所接受的数字的限制。
range类型:
输入包含一定范围内数字值的文本框,显示为滑动条,可以设置max、min,step、默认
日期选择器类型:
date:选取日、月、年
month:月、年
week:周、年
time:时间(小时和分钟)—— max、min、step、value
datetime:时间、日、月、年(UTC时间)
datetime-local:时间、日、月、年(本地时间)
search:
用于输入搜索关键词的文本框。
tel:
用于输入电话号码的文本框
color:
专门用于输入颜色的文本框,
input属性
autocomplete:
帮助用户在input类型的输入框中自动完成内容的输入 on/off
autofocus:
页面加载时,某表单控件自动获取焦点。,同一页面只能指定一个。
form属性
<form></form>:
用户要提交一个表单,必须把相关的控件元素都放在表单内部。:吧表单内的从属元素写在页面的任意位置, 最后只要指定一下form属性并为其指定属性值为表但的id
当从属多个表单,form值要用空格隔开
表单重写属性:仅适用submit、image
formaction :表单的action属性
formenctype :表单的enctype属性
formmethod :表单的method属性
formnovalidate :表单的novalidate属性
formtarget :表单的target属性
height和width:
设置image类型的input标签的高度和宽度。只适用于image的input标签
list属性
datalist:
实现数据列表的下拉效果
min、max、step:最小、最大、步长
multiple:
一次性选择多个文件。
pattern:
验证input类型输入框中用户输入的内容是否与自定义的正则表达式相匹配
placeholder:
为input类型的输入框提供一种提示(hint)
required:
定义输入框填写的内容不能为空,否则不允许用户提交表单。
新表单控件
datalist:
为输入框提供一个可选的列表,用户可以直接选择列表中的某一预设的项
keygen:
密钥对生成器
output:
显示计算结果或脚本输出,包含完整的开始和结束标签
新表单属性
autocomplete:
整个form都包含时,去除单独的则需要特别设置为off
novalidate:
提交表单时取消真个表单的验证
显示验证:
checkValidity()方法,显示的对表单内所有元素内容或单个元素内容进行有效性验证
新增页面元素
figure:
可以定义独立的流内容,eg:图像、图表。。。figcaption:表示figure元素的标题它属于figure必须写在内部
details:
描述文档或文档某个部分的细节,open布尔选项ture显示/false收缩
summary:
为details的子元素,可以为details定义标题,标题是可见的。点击可以显示details的信息
mark:
定义带有记号的文本,突出显示
progress:
定义任务的进度(或进程)表示进度正在进行。max:总共需要多少工作量;value:已经完成多任务
meter:定义已知范围或分数值内的标量测量,
value:标出实际值,默认0
min:规定范围时最小值
max:最大值
low:范围的下限值,必须小于或等于high属性值。
high:上限值
optimum:最佳值,
form:设置meter所书的一个或多个表单
dialog:
定义对话框或窗口。默认是隐藏状态。
a元素
download:
设置被下载的超链接目标
media:
设置被链接文档是为何种媒介/设备优化的
type:
设置被链接文件的MIME类型
ol元素
reversed:
列表顺序为降序显示
dl元素
允许dl列表包含多个带名字的列表项。
每一项包含一条或多条带名字的dt元素
dt元素后面紧跟一个或多个dd元素,用来表示定义。
cite元素
它包含的文本对某个参考文件的引用
small元素
iframe元素
sandbox:
启用一系列对iframe中内容的额外限制,取值包含:“”、allow-forms(允许表单提交)、allow-same-origin(允许同源 访问)、allow-script(允许执行脚本)、allow-top-navigation(允许框架访问)
seamless:
使它看上去像包含文档的一部分,
srcdoc:
在iframe中显示的HTML内容,取值为HTML代码
script元素
async:
异步执行脚本,仅适用于外部脚本
defer:
是否对脚本执行进行延迟,知道页面加载为止