HTML5的表单新属性(扩展)

新的 form 属性: autocomplete、 novalidate

 autocomplete控件是指用户在文本框输入前几个字母或是汉字的时候, autocomplete控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便。

autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="" method="post" enctype="" autocomplete="on">
<label for="user">用户名:</label>
<input type="text" name="user" id="user" >
<input type="submit" name="" value="提交">

</form>

novalidate 属性的一个boolean 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

表单01 type类型email用了novalidate属性,提交表单时不需要验证则提交成功

表单02 type类型email没用了novalidate属性,提交表单时需要验证。

<!--表单01 用了novalidate属性-->
<form name="form01" action="" method="post" enctype="" novalidate>
E-mail01: <input type="email" name="email">
<input type="submit" name="" value="提交">
</form>

<!--表单02 没用-->
<form name="form02" action="" method="post" enctype="">
E-mail02: <input type="email" name="email">
<input type="submit" name="" value="提交">
</form> 

新的 input 属性:placeholder、autofocus、required等

placeholder属性提供一种提示(hint),描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。如图,灰色字体的请输入用户名...

placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。

autofocus属性光标自动聚焦,当打开网页时光标就会自动聚焦到事先设定好autofocus属性的输入框哪里,如图,用户名的那个 |

<form action="" method="post" enctype="" >
<label for="user">用户名:</label>
<input type="text" name="user" id="user" placeholder="请输入用户名..." autofocus ><br>
<label for="password">密 码:</label>
<input type="password" name="password" id="password" > <input type="submit" name="" value="提交">
</form> 

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域(不能为空)。

required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<form action="" method="post" enctype="" >
<label for="user">用户名:</label>
<input type="text" name="user" id="user" required><br>
<label for="password">密 码:</label>
<input type="password" name="password" id="password" > <input type="submit" name="" value="提交">
</form> 

html5新的 input 属性还有

autocomplete、

form、

form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)、

height 和 width、

list 、

min, max 和 step、

multiple、

pattern (regexp)

时间: 2024-11-07 06:49:10

HTML5的表单新属性(扩展)的相关文章

HTML5的表单新特性(2)

HTML5 表单新特性:等待了12年之久,我们迎来了HTML5主要修订版本.虽然此版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就开始关注,并对最新功能展开了热烈讨论. HTML5新特性的目的是改善嵌入,比如视频和音频等多媒体的支持,为开发者和终端用户供简单的编程和更好的用户体验.现在互联网世界都在等待,浏览器更新时能支持HTML5的新版本.HTML5已经被很多浏览器支持,比如Safari, Chrome, FireFox, Opera, IE9,它是向后兼容的

HTML5的表单新特性(3)

虽然目前各种浏览器对HTML5的支持程度参差不齐,但是不可否认HTML5将会成为未来的流行趋势. 一.HTML5表单新增属性 (1)placeholder 这个属性的用处是颇大的,可以向用户显示描述性说明或者提示信息.如果浏览器不支持的话,此属性 会忽略掉,显示浏览器默认的状态.当输入框中有值或者获得焦点的时候,不显示placeholder的值 eg:  您的名字: <input type="text" placeholder="请输入您的真实姓名" name

HTML5的表单新特性

HTML5 Web Forms 2.0是对目前Web表单的全面提升,它在保持了简便易用的特性的同时,增加了许多内置的控件或者控件属性来满足用户的需求,并且同时减少了开发人员的编程.在我看来,HTML5 主要在以下几个方面对目前的Web表单做了改进: 新的控件类型 还在为类型检查犯愁吗,还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗,HTML5提供的一系列新的控件将天然的具备类型检查的功能.比如说URL输入框,Email输入框等. <input type="url">

HTML5之表单新增属性

之前已经接触过的新增属性:autocomplete.autofocus.list.multiple.placeholder.required.min.max.step from属性:将表单外的内容与表单进行关联 <form action="" id="kc" > <input type="text" name="dd" form="kc" >(不再form表单中) novalidat

html5 css3表单新特性

2如何给不支持新特性的浏览器打补丁1 2如何给不支持新特性的浏览器打补丁1Modernizr补丁下载 <!DOCTYPE html> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="

HTML5_01之表单新特性

1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt+L:格式化当前文档2.HTML5九大新特性: ①表单新特性.②视频音频.③Canvas绘图.④SVG绘图.⑤地理定位.⑥拖放API.⑦WebWorker.⑧WebStorage.⑨WebSocket3.表单Input类型: ①已有type类型:  text(文本框).password(密码框).r

HTML5表单新特征简介与举例

一.前言一撇 其实关于HTML5的表单特征早在去年你必须知道的28个HTML5特征.窍门和技术一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦,关键是TouTuBe视频,需要越狱观看.得,像我这样安分守已的良民,除了看空姐,其他情况都是懒得fan墙的,所以这部分视频展示的内容,其实就是个空. 所以,这里打个补丁,把这部分内容完善下.本文的大致内容有: # input type=number / # input type=range / # i

跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性

这节课给大家补充一下,一些 前些课程没有接触的知识. 在XHTML中,表单内的从属元素必须书写在表单内部,但是在HTML5中,可以把他们书写在页面上任何地方,然后给元素制定一个form属性,属性值为该表单单位的id,这样就可以声明该元素从属于指定表单了. 这个我想对于我们来说,应该是个很新奇的玩意吧 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>form

HTML5(二)——特殊符号、新增属性、表单重写属性、

一.HTML5 特殊符号 &nbsp :空格 &gt:大于号 > &It :小于号 < &quot :引号" &copy:"版权符号 @ 二.HTML 新增属性 1.contentEditable 规定是否可编辑元素的内容属性值:true -----可以编辑元素的内容false -----无法编辑元素的内容inherit -----继承父元素的contenteditable属性当为空字符串时,效果和true一致.当一个元素的conte