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开发的app(浅谈Html5页面打开app的一些思考)
- html5字体倾斜代码(html5响应式开发自动计算fontSize的方法)
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- html5入门布局(吃透移动端 Html5 响应式布局)
- html5 固定图片(HTML5拖放API实现自动生成相框功能)
- html5导航栏跳转(Html5跳转到APP指定页面的实现)
- html5 web技术(html5视频常用API接口的实战示例)
- html5怎么设置左边input(HTML5中input输入框默认提示文字向左向右移动的示例代码)
- 用html5做一个音乐的播放器(HTML5自定义mp3播放器源码)
- html5div怎样居中(HTML5+CSS设置浮动却没有动反而在中间且错行的问题)
- html5标签怎么做(html5用video标签流式加载的实现)
- html5背景怎么变色(HTML5 背景的显示区域实现)
- css弹出遮罩层页面不可滑动(Html5页面点击遮罩层背景关闭遮罩层)
- 如何获取html5表单中的元素的值(html5 datalist 选中option选项后的触发事件)
- html5炫酷代码(HTML5超炫酷粒子效果的进度条的实现示例)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩(贾怀胤唱白龙马)
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
- 朱鹤松被不断认可,凤凰传奇玲花喊话岳云鹏,索要老朱演出门票(朱鹤松被不断认可)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
热门推荐
- python在mysql创建数据库(python3对接mysql数据库实例详解)
- 面试如何谈自己做过的项目
- phpstudyv8.0使用教程学习(phpStudy环境安装SSL证书教程)
- serv-u设置文件夹权限(serv_U 域离线 解决方法)
- ubuntu中source指令(怎么修改Ubuntu的源列表source list详解)
- php模块使用方法(PHP操作XML中XPath的应用示例)
- pythonexcel生成报表(python生成每日报表数据Excel并邮件发送的实例)
- php可以一次下载几个文件(php实现大文件断点续传下载实例代码)
- linq中延迟执行
- html5video怎么优化(html5 移动端视频video的android兼容去除播放控件、全屏)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9