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 表单验证内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5滑动刷新(HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码)
- html5播放代码(html5 video全屏播放/自动播放的实现示例)
- vscode快速生成html框架(VSCode 自定义html5模板的实现)
- html5中怎么做圆形框架(HTML5 层的叠加的实现)
- h5页面强制关注微信公众号(Html5页面获取微信公众号的openid的方法)
- html5表格设计(Html5饼图绘制实现统计图的方法)
- html5的新特性
- html5+css样式代码(详解HTML5中CSS外观属性)
- html5自动静音(html5录音功能实战示例)
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- html5基本代码文字颜色(html5默认气泡修改的代码详解)
- html5video怎么优化(HTML5 video循环播放多个视频的方法步骤)
- html5基本结构图解(html5简介及新增功能介绍)
- Html5新增的标签
- html5的canvas图形绘制技术(详解HTML5 Canvas标签及基本使用)
- html5canvas动画(html5 canvas 实现光线沿不规则路径运动)
- 美国数十万加仑牛奶倒入下水道,贫民区食不果腹,历史再次重演(美国数十万加仑牛奶倒入下水道)
- 美国倒掉数十万加仑牛奶 上热搜第一,这一幕似曾相识(美国倒掉数十万加仑牛奶)
- 深度 倒牛奶 这一幕为何又在美国上演(深度倒牛奶)
- 美国数十万加仑牛奶倒下水道怎么回事 原因曝光令人心痛(美国数十万加仑牛奶倒下水道怎么回事)
- 探索中国神秘文字(探索中国神秘文字)
- 重温《蜗居》 宋思明选中海藻为红颜知己,纯属巧合,与爱无关(宋思明选中海藻为红颜知己)
热门推荐
- nginx日志请求状态(Nginx设置日志打印post请求参数的方法)
- mysql join规则(浅谈为什么MySQL不推荐使用子查询和join)
- ASP.NET URL路径问题
- tomcat不显示图片怎么办(解决Tomcat重新部署后图片等资源被自动删除的问题)
- mysql顺序排序(Mysql 中文排序规则说明)
- nginx更改html内容(apache与iis下让html格式的页面也同样具有shtml的动态解析)
- apachephp安装配置教程交流(Apache中利用mod_rewrite实现防盗链)
- laravel图文分离(laravel实现前后台路由分离的方法)
- 有哪些最好用的云服务器(日本云服务器好不好?日本云服务器有哪些优势?)
- python获取游戏画面信息(python游戏开发之视频转彩色字符动画)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9