美文网首页
HTML5 表单

HTML5 表单

作者: 踏浪free | 来源:发表于2018-11-22 10:04 被阅读0次

@(HTML5)[HTML5表单]

[TOC]

七、HTML5表单

新的输入型控件

  • email:电子邮件
  • tel:电话号码
  • url:网页的url(需要带上http(s)://)
  • search:搜索引擎
  • range:数值控件,特定范围内的数值选择器
    • min
    • max
    • step(步数)
    • value

新的输入控件

number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期(chrome)
datetime-local : 显示完整日期,不含时区
time : 显示时间,不含时区
date : 显示日期
week : 显示周
month : 显示月

新的表单特性

placeholder : 输入框提示信息
autocomplete : 是否保存用户输入值。默认为on,关闭提示选择off
autofocus : 指定表单获取输入焦点 true
required : 此项必填,不能为空
Pattern : 正则验证 pattern="\d{1,5}“
Formaction 在submit里定义提交地址

表单验证

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

相关文章

  • HTML5表单新验证属性、状态

    HTML5 - 表单新验证属性 HTML5 - 表单新验证状态

  • h5表单

    html5 表单 新增input类型 新增表单元素 html5表单验证 新增表单属性 新增的input类型 inp...

  • HTML5 表单

    @(HTML5)[HTML5表单] [TOC] 七、HTML5表单 新的输入型控件 email:电子邮件 tel:...

  • HTML5详解

    01-HTML5新增语义化标签 HTML5语义化标签的兼容 HTML5新增表单控件和表单属性 HTML5表单验证反...

  • HTML5 表单元素

    HTML5 新的表单元素HTML5有以下新的表单元素 ?:不是所有的浏览器都支持HTML5新的表单元素,但是你...

  • HTML5表单的创建;学习笔记(三)

    HTML5表单的创建

  • HTML5 表单元素

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性。 本章介绍以下新的表单元素: datali...

  • 响应式布局和CSS3动画

    HTML5 表单类 inputtextpasswordradiocheckboxnumbertelsubmit 提...

  • 2019-10-18 HTML

    1.html新表单元素 HTML5 表单元素 HTML5 增加了如下表单元素: 注释:默认地,浏览器不会显示未知元...

  • HTML5 表单元素+属性

    HTML5 新的表单元素 HTML5 有以下新的表单元素: < datalist> 注意:不是所有的浏览器都支持H...

网友评论

      本文标题:HTML5 表单

      本文链接:https://www.haomeiwen.com/subject/wobkqqtx.html