HTML5新增form控件和表单属性实例代码详解


Posted in HTML / CSS onMay 15, 2019

第一个知识点:表单的属性及总结

第二个知识点:H5新增的表单控件和属性以及总结

第一个知识点:

我们常见的表单验证有哪些呢

text

文本框标签

password 密码框

checkbox 多选框

radio

单选框

button

按钮

submit

提交按钮

HTML5新增form控件和表单属性实例代码详解

以上是我们常用的一些form属性

第二个知识点:H5新的输入型控件

(一)email:电子邮箱文本框,跟普通的没什么区别

1.当输入不是邮箱的时候,验证不通过

2.移动端键盘会有变化

HTML5新增form控件和表单属性实例代码详解

(二)tel:电话号码

1.主要在移动端,一个键盘的切换

HTML5新增form控件和表单属性实例代码详解

(三)url:网页的URL

HTML5新增form控件和表单属性实例代码详解

输入正确的网址

(四)sear:搜索引擎

1.chrome下输入文字后,会多出一个关闭的x

HTML5新增form控件和表单属性实例代码详解

(五)range:特定范围内的数值选择器

1.min、max、step(步数)

2.例子:用js来显示当前数值

HTML5新增form控件和表单属性实例代码详解

(六)number:只能包含数字的输入框

HTML5新增form控件和表单属性实例代码详解

(七)color:颜色选择器

HTML5新增form控件和表单属性实例代码详解

(八)detetime显示完整日期

HTML5新增form控件和表单属性实例代码详解

(九)autocomplete:是否保存用户输入值

默人为on,关闭提示选择off

(十):指定表单获取输入焦点

HTML5新增form控件和表单属性实例代码详解

(十一):此项必填,不能为空

HTML5新增form控件和表单属性实例代码详解

如果只写第一个输入框,第二个输入框就会弹出“请填写此字段”

(十二)parrern:正则验证 pattrn="\d{1,5}"

HTML5新增form控件和表单属性实例代码详解

我设置的正则是1-5数字,如果不是就提交失败

总结

以上所述是小编给大家介绍的HTML5新增form控件和表单属性实例代码详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
Html5 滚动穿透的方法
May 13 #HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 #HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 #HTML / CSS
基于Html5实现的语音搜索功能
May 13 #HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 #HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 #HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 #HTML / CSS
You might like
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python实现微信自动回复功能
2018/04/11 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
Python如何批量生成和调用变量
2020/11/21 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
单位介绍信范文
2014/01/18 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
人民调解协议书范本
2014/10/11 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
专项资金申请报告
2015/05/15 职场文书
亲情作文之母爱
2019/09/25 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
JS实现简单九宫格抽奖
2022/06/28 Javascript