HTML5表单验证特性(知识点小结)


Posted in HTML / CSS onMarch 10, 2020

前台提交信息到后台一般两种常见提交方式:

Form表单提交 和 Ajax无刷新页面提交

placeholder 不是所有的input都支持,比如input date就不支持

解决方案:

可以在date上面覆盖一个div,填写placeholder的内容

html5表单新增的类型:

email

url

range

number

date(date, month, week, time, datetime, datetime-local)

search

color

tel

去掉chrome记住密码后自动填充表单的黄色背景:

autocomplete="off" 可以加在input或者form上

下拉提示:

list 和 datalist

html5表单使用正则:pattern

提交表单时不进行验证:novalidate(加在form上)   formnovalidate(加在input:submit上)

文本框自动聚焦:autofocus

如果input中有文件提示file,则form必须添加:

enctype="multipart/form-data"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="" enctype="multipart/form-data" novalidate>
        <input type="file">

        <!-- 正则:5个数字+cyy中任意一个字母 -->
        <input type="text" required autocomplete autofocus pattern="/^\d{5}[cyy]$/">

        <input type="text" list="mylist">
        <datalist id="mylist">
            <option value="list1">list1</option>
            <option value="list2">list2</option>
            <option value="list3">list3</option>
        </datalist>

        <input type="submit" value="提交" formnovalidate>
    </form>
</body>
</html>

HTML5表单验证特性(知识点小结) 

label for  在radio或者checkbox中比较明显(对应的是input的id)

效果就是选中label时,对应的radio或者checkbox就会被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
    <form action="" enctype="multipart/form-data" novalidate>

        <label for="man">男</label>
        <input type="radio" name="sex" id="man">
        <label for="woman">女</label>
        <input type="radio" name="sex" id="woman">

        <input type="submit" value="提交" formnovalidate>
    </form>
</body>
</html>

HTML5表单验证特性(知识点小结) 

总结

到此这篇关于HTML5表单验证特性的文章就介绍到这了,更多相关html5 表单验证内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 #HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 #HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 #HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 #HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 #HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 #HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 #HTML / CSS
You might like
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
浅析javascript的return语句
2015/12/15 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
Python内置函数的用法实例教程
2014/09/08 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
区域总监的岗位职责
2013/11/21 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
人大调研汇报材料
2014/08/14 职场文书
申报材料格式
2014/12/30 职场文书
安徽导游词
2015/02/12 职场文书
学校运动会开幕词
2016/03/03 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
Python+pyaudio实现音频控制示例详解
2022/07/23 Python