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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
PL-880隐藏功能
2021/03/01 无线电
什么是MVC,好东西啊
2007/05/03 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php筛选不存在的图片资源
2015/04/28 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
python求斐波那契数列示例分享
2014/02/14 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Python imread、newaxis用法详解
2019/11/04 Python
python新手学习可变和不可变对象
2020/06/11 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
经典婚礼主持词
2014/03/13 职场文书
黄金酒广告词
2014/03/21 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
2016年情人节广告语
2016/01/28 职场文书
装修安全责任协议书
2016/03/22 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers