html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
类别:Web前端 浏览量:869
时间:2021-10-12 00:27:23 html5新的表单元素新的特性
HTML5表单验证特性知识点小结前台提交信息到后台一般两种常见提交方式:
Form表单提交 和 Ajax无刷新页面提交
placeholder 不是所有的input都支持,比如input date就不支持
解决方案:
可以在date上面覆盖一个li,填写placeholder的内容
html5表单新增的类型:
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>
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 表单验证内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- js如何解决iphone异形屏适配(Html5适配iphoneX刘海屏的简单实现)
- h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
- html5标签图片(HTML5图片层叠的实现示例)
- html元素和属性的区别(HTML5 HTMLCollection和NodeList的区别详解)
- html5创作(HTML5录音实践总结Preact)
- 用于播放视频文件的html5元素(html5自动播放mov格式视频的实例代码)
- HTMl5 sessionStorage和localStorage
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- html5滑动刷新(HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码)
- html5自定义结构指令(浅析HTML5 meta viewport参数)
- html5最好用语义元素(HTML5语义化元素你真的用对了吗)
- html5的新特性
- Html5中的<section>标签
- html5定位地理位置(html5 制作地图当前定位箭头的方法示例)
- html5和css3最新特性(html5中使用hotcss.js实现手机端自适配的方法)
- html5按钮点击跳转(HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
- 《白狐的人生》热拍 贾征宇偶像包袱难自弃 图(白狐的人生热拍)
- 七夕取消了,牛郎织女没做核酸七夕已经取消(牛郎织女没做核酸七夕已经取消)
- 网友抵制 多地取消 夏日祭 为何惹众怒(网友抵制多地取消)
- 兄弟萌,今年的七夕又取消了 思考 思考(今年的七夕又取消了)
热门推荐
- mysql binlog模式实际使用(实例验证MySQL|update字段为相同的值是否会记录binlog)
- , , 的区别
- docker配置说明(Docker安装Kong API Gateway并使用的详细教程)
- mysql快速创建索引(MySQL创建高性能索引的全步骤)
- react子组件的动态参数(浅谈React Component生命周期函数)
- laravel多线程处理请求(Laravel 6 将新增为指定队列任务设置中间件的功能)
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- 从宝塔面板找网站会员数据(BT宝塔面板高并发大流量网站优化方案分享)
- dedecms标签调用大全(Dedecms文章标题长度修改方法小结)
- 如何增大docker内存使用(docker 内存监控与压测方式)