常用标签
input:
id
type:
text (普通文本)
checkbox (多选框)
password (密码,placeholder提示内容不影响value的值)
radio (单选框,根据name分组)
name (输入框的名称)
value (值状态名称)
file (上传文件用)
hidden (隐藏,可以储存也可以防伪)
button (相当于button属性)
submit (相当于submit属性)
reset (清空已设置属性值)
label :
for和对应的input ID控制同一个输入框的光标
select:(下拉框)
option(不同的选项,标签中添加selected 表示默认值)
value (后台查看状态名)
textarea (大文本框)
button (按钮)
ul
li (无序列表)
ol(有序列表)
meta()
head(头部)
foot (尾部)
body(主体部分)
form (定义供用户输入的表单)
select(定义下拉选项列表)
option(定义下拉列表中的选项)
h5语义化新标签
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部
<hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题,或者标语的组合
<nav></nav> 导航 (包含链接的的一个列表)
<footer></footer>页脚 页面的底部 或者 版块底部
<section> <section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等。
<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分
<figure> < figure > 用于对元素进行组合。一般用于图片或视频
<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明
<time></time>用来表现时间或日期
<details></details>用于描述文档或文档某个部分的细节 该元素用于摘录引用等
应该与页面的主要内容区分开的其他内容 Open 属性默认展开
< summary></summary> details 元素的标题
<dialog></dialog>定义一段对话
<mark></mark> 需要标记的词或句子(高亮显示)
<keygen>给表单添加一个公钥
<output>定义一个计算结果
<progress><progress>定义进度条
<progress max="10" value="7">
<span>76</span>%
</progress>
扩展补充
Forms新的输入型控件
email : 电子邮箱文本框,跟普通的没什么区别
当输入不是邮箱的时候,验证通不过
移动端的键盘会有变化 tel : 电话号码
url : 网页的URL
search : 搜索引擎 chrome下输入文字后,会多出一个关闭的X
range : 特定范围内的数值选择器
min、max、step( 步数 )
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性和函数
placeholder : 输入框提示信息,占位符,对于密码类型的input,体验更好
<input type="password" required placeholder="请输入6-18位字符" />
autocomplete : 是否保存用户输入值 默认为on,关闭提示选择off
<input type="text" name="user" autocomplete="off"/>
autofocus : 指定表单获取输入焦点
<input type="text" name="user" autocomplete="off" autofocus />
list和datalist : 为输入框构造一个选择列表
list值为datalist标签的id

required : 此项必填,不能为空
<input type="password" required placeholder="请输入6-18位字符" />
Pattern : 正则验证 pattern="\d{1,5}“

Formaction 在submit里定义提交地址

表单验证
validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false
oText.addEventListener("invalid",fn1,false); 验证反馈
ev.preventDefault()
oText.validity.valueMissing : 输入值为空时
oText.validity.typeMismatch : 控件值与预期类型不匹配
oText.validity.patternMismatch : 输入值不满足pattern正则
oText.validity.tooLong : 超过maxLength最大限制(MOZ ,-WEBKIT 未实现)
oText.validity.rangeUnderflow : 验证的range最小值
oText.validity.rangeOverflow:验证的range最大值
oText.validity.stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
oText.validity.customError 不符合自定义验证
this.setCustomValidity(); 自定义验证
formnovalidate属性 : 关闭验证
网友评论