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背景下的@font face规则
May 04 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 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
PHP的开发框架的现状和展望
2007/03/16 PHP
PHP HTML代码串截取代码
2008/12/29 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PDO::setAttribute讲解
2019/01/29 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
python文件操作整理汇总
2014/10/21 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
自荐书范文
2013/12/08 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js