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的更多相关文章

  1. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  2. IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

    HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1. 1  autocomplete属性 autocomplete属性规定form或inp ...

  3. IT兄弟连 HTML5教程 HTML5表单 小结及习题

    小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...

  4. IT兄弟连 HTML5教程 HTML5表单 HTML表单中的get和post方法

    指引 表单在网页应用中十分重要,基本上任何一个网站都必须使用到表单元素,所以表单的美观和易于交互对于网站设计就变得十分重要.HTML5对目前Web表单进行了全面提升,使得我们使用表单更加智能.它在保持 ...

  5. IT兄弟连 HTML5教程 HTML5表单 HTML表单设计1

    表单是PHP程序中最常使用的收集站点访问者信息的数据输入界面.通过表单浏览器获取用户的输入数据,并传送给Web服务器的脚本程序中,以各种不同的方式进行处理.在表单中提供了多种输入方式,包括文本输入域. ...

  6. html5表单新增的元素与属性

    1.表单内元素的form属性 在html4中,表单内的从属元素必须书写在表单内部, 而在html5中,可以把他们书写在页面上任何地方, 然后为该元素指定一个form属性,属性值为该表单的id,这样就可 ...

  7. IT兄弟连 HTML5教程 HTML5的学习线路图 第二、三阶段

    第二阶段编写用户交互功能 通过第一阶段的学习虽说可以完成页面制作,但并不完美,不能算是合格的前端工程师,所以要继续学习如图1.13中的第二阶段内容.现在的Web页面都融入了大量的特效,并且多数需要与用 ...

  8. IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容

    为了保证HTML5能与之前的HTML版本达到最大的兼容,HTML5对一些元素标记的省略.boolean值的属性,以及引号的省略这几方面进行了兼顾,确保与之前版本的HTML达到兼容.在下面示例中,将本节 ...

  9. IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

    HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性, ...

随机推荐

  1. JS基础-事件

    事件机制 事件触发三阶段 事件触发有三个阶段: window 往事件触发处传播,遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往 window 传播,遇到注册的冒泡事件会触发 ...

  2. java面试题干货51-95

    51.类ExampleA继承Exception,类ExampleB继承ExampleA. 有如下代码片断: try { throw new ExampleB("b") } catc ...

  3. rsync实现服务器之间同步目录文件

    一般情况下 服务环境一般有三种 dev 开发环境 test 测试环境 prod   生产环境 环境多了,不可避免的事是一些重复的操作,部署什么的 能不能在开发环境打包后,直接同步到测试环境呢?(毕竟重 ...

  4. MySQL高级查询之索引创建、删除、增加、修改、慢sql、explain解释sql

    day04数据库 昨日知识点回顾 1.单表操作 1.单表的操作 条件查询的优先级别: where > group by >having > order by > limit; ...

  5. Blazor(WebAssembly) + .NETCore 实现斗地主

    之前群里大神发了一个 html5+ .NETCore的斗地主,刚好在看Blazor WebAssembly 就尝试重写试试. 还有就是有些标题党了,因为文章里几乎没有斗地主的相关实现:),这里主要介绍 ...

  6. 使用 Docker 和 Nginx 打造高性能的二维码服务

    使用 Docker 和 Nginx 打造高性能的二维码服务 本文将演示如何使用 Docker 完整打造一个基于 Nginx 的高性能二维码服务,以及对整个服务镜像进行优化的方法.如果你的网络状况良好, ...

  7. VS2019 开发Django(六)------Admin中图片上传

    导航:VS2019开发Django系列 该篇继续完善在Django的管理界面上传图片,因为LazyOrders小程序中菜单需要展示图片,而不是一个文本路径,所以我们还需要继续改造一下. 1)安装pil ...

  8. ps -ef |grep -v 在shell sh 脚本中貌似无效?

    想通过ps -ef |grep erdp_ |awk '{print $2}' 获取 erdp_ 开头的进程id, 执行在终端环境下执行是ok的,但是在 sh 脚本里面竟然多出了 两个 root 11 ...

  9. IO - 同步 异步 阻塞 非阻塞的区别,学习Swoole有帮助

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?本文较长需耐心阅读,基础 ...

  10. 关于java基础、多线程、JavaWeb基础、数据库、SSM、Springboot技术汇总

    作者 : Stanley 罗昊 本人自行总结,纯手打,有疑问请在评论区留言 [转载请注明出处和署名,谢谢!] 一.java基础 1.多态有哪些体现形式? 重写.重载 2. Overriding的是什么 ...