IT兄弟连 HTML5教程 HTML5表单 新增的表单属性3

9 novalidate
novalidate是属性规定在提交表单时不应该验证form和input域。novalidate属性适用于的<input>类型有:text、search、url、telephone、email、password、date pickers、range及color。用法如下:

这段代码中,我们为表单设置novalidate属性,使表单不验证提交,表单中的email和url文本域不必通过验证。
10 pattern
pattern属性规定用于验证input域的模式,即是正则表达式。Pattern属性适用于<input>标签的类型有text、search、url、email及password。下例我们为邮编的输入框设置pattern属性,只允许输入6位数字。用法如下:

这段代码中,我们设置邮编号码只能是6位数字的输入。若不符合这个正则表达式,浏览器会提示“邮编号码为6位数字”。效果如图1所示:

图1 为text文本域设置pattern属性
11 placeholder
placeholder属性提供一种(hint),描述输入域所期待值,提示会在用户输入值前会显示在输入域上。placeholder属性使用的<input>标签类型有text、search、url、email及password。用法如下:

这段代码中,我们为各个输入框都设置了placeholder属性,为的是提示用户在这个输入框内需要填写的信息。效果如图2所示:

图2 为文本域设置placeholder属性
12 required
required属性规定在表单提交之间,用户必须填写该输入域即不能为空。required属性使用的<input>标签类型有text、search、url、email、password、date pickers、number、checkbox、radio及file。用法如下:

这段代码中,我们为姓名后的text输入框都设置了required属性,表示该输入框为必填项,若用户未输入任何值,页面会出现图3的提示:

图3 为文本域设置required属性
IT兄弟连 HTML5教程 HTML5表单 新增的表单属性3的更多相关文章
- [html5] 学习笔记-表单新增的元素与属性(续)
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1
HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1 autocomplete属性 autocomplete属性规定form或inp ...
- IT兄弟连 HTML5教程 HTML5表单 小结及习题
小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...
- IT兄弟连 HTML5教程 HTML5表单 HTML表单中的get和post方法
指引 表单在网页应用中十分重要,基本上任何一个网站都必须使用到表单元素,所以表单的美观和易于交互对于网站设计就变得十分重要.HTML5对目前Web表单进行了全面提升,使得我们使用表单更加智能.它在保持 ...
- IT兄弟连 HTML5教程 HTML5表单 HTML表单设计1
表单是PHP程序中最常使用的收集站点访问者信息的数据输入界面.通过表单浏览器获取用户的输入数据,并传送给Web服务器的脚本程序中,以各种不同的方式进行处理.在表单中提供了多种输入方式,包括文本输入域. ...
- html5表单新增的元素与属性
1.表单内元素的form属性 在html4中,表单内的从属元素必须书写在表单内部, 而在html5中,可以把他们书写在页面上任何地方, 然后为该元素指定一个form属性,属性值为该表单的id,这样就可 ...
- IT兄弟连 HTML5教程 HTML5的学习线路图 第二、三阶段
第二阶段编写用户交互功能 通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用 ...
- IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容
为了保证HTML5能与之前的HTML版本达到最大的兼容,HTML5对一些元素标记的省略.boolean值的属性,以及引号的省略这几方面进行了兼顾,确保与之前版本的HTML达到兼容.在下面示例中,将本节 ...
- IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素
HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性, ...
随机推荐
- 关于async/await、promise和setTimeout执行顺序
先来一道关于async/await.promise和setTimeout的执行顺序的题目: async function async1() { console.log('async1 start'); ...
- JQuery 操作checkbox
获取checkbox选中的状态 deleteAll全选的name 1. $("input[name='deleteAll']").is(":checked") ...
- CCF-CSP题解 201809-4 再卖菜
碎碎念..近视加老花,还以为第二天除了第二家范围在100以内别的都不确定,于是x**算的记搜复杂度超时了.还鼓捣着什么差分区间最长路,虽然有大神用差分区间做出来了,然而自己并没有看懂. 其实就是一个记 ...
- SQL-SQL查询检索阶段二
一 前提准备 先声明一下,下面的库表只是简易的学习示例,不是生产的设计,不要深究,此文我们的目的是学习sql的检索不是库表设计:初学者最好跟着作者的文章一步一步敲一遍,如果没有使用过sql的可以查阅作 ...
- 《Java基础知识》Java抽象类,接口的概念和使用
1.抽象类 在自上而下的继承层次结构中,位于上层的类更具有通用性,甚至可能更加抽象.从某种角度看,祖先类更加通用,它只包含一些最基本的成员,人们只将它作为派生其他类的基类,而不会用来创建对象.甚至,你 ...
- 《Java基础知识》动态代理(InvocationHandler)详解
1. 什么是动态代理 对象的执行方法,交给代理来负责.比如user.get() 方法,是User对象亲自去执行.而使用代理则是由proxy去执行get方法. 举例:投资商找明星拍广告,投资商是通过经纪 ...
- 新手如何快速入门node.js
附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全: 书单导航页(点击右侧 极客侠栈 即可打开个人博客):极客侠栈 ①[Java]学习之路吐血整理技术书 ...
- 解密国内BAT等大厂前端技术体系-腾讯篇(长文建议收藏)
1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第三篇,前两篇已经讲述了阿里和百度在前端技术这几年的技术发展.这一篇从腾讯 ...
- C# get folder's Md5 generated by file's and filename's md5. get dictionary md5
C# get dictionary md5 static string GetDicMD5(string dirFullName) { logBuilder = new StringBuilder() ...
- 【Cef编译】 CefSharp编译失败,检测到“RuntimeLibrary”的不匹配项: 值“MT_StaticRelease”不匹配值“MD_DynamicRelease”
编译CefSharp生成后一个libcef_dll_wrapper.lib时,供CefSharp使用.结果CefSharp编译的时候报错.遇到以下异常: libcef_dll_wrapper.lib( ...