本节主要讲解表单新增元素的controls属性、placeholder属性、List属性、Autocomplete属性、Pattern属性、SelectionDirection属性、Indeterminate属性、Image提交按钮的宽高属性。

1、controls属性

在html5中，可以在标签内部放置一个表单元素，并且通过该标签的controls属性来访问该表单元素。

 <body>
     <script>
         function setValue(){
             var label = document.getElementById("label");
             var textbox = label.control;
             textbox.value = "010111";
         }
     </script>
     <form>
         <label id="label">
             邮编：
             <input id="txt_zip" maxlength="6">
             <small>请输入六位数字</small>
         </label>
         <input type="button" value="设置默认值" onclick="setValue()">
     </form>
 </body>

2、文本框的placeholder属性

placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

 <body>
     <input type="text" placeholder="请输入用户名"></input>
 </body>

3、文本框的list属性

在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的Id。datalist元素也是html5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入（与下拉菜单的区别是，下拉菜单不允许自行输入）。datalist元素本身并不显示，而是当文本框获得焦点时，以提示输入的方式显示。

 <body>
     <form>
         <input type="text" name="greeting" list="greeting">
         <datalist id="greeting" style="display: none">
             <option value="HTML5学习">HTML5学习</option>
             <option value="Android学习">Android学习</option>
             <option value="IOS学习">IOS学习</option>
         </datalist>
     </form>
 </body>

4、文本框的autocomplete属性

帮助输入所用的自动完成功能，是一个既节省时间又十分方便的功能。在HTML5之前，因为谁都可以看见输入的值，所以在安全方面存在缺陷，只要使用了autocomplete属性，安全性方面也可以很好的控制。属性值为on，则会基于之前键入并提交的值，有自动补全功能；属性值为off，则关闭该功能；属性值为“”，则取决于浏览器的默认值。

 <body>
     <form>
     <input type="text" name="greeting" autocomplete="on" list="greeting"></input>
     <input type="submit"></input>
     </form>
 </body>

5、文本框的pattern属性

在html5中，对input元素使用pattern属性，并将属性设置为某个格式的正则表达式时，在提交时，会针对这些进行检查。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定格式。

 <body>
     <form>
         请输入内容
         <input pattern="[A-Z]{3}" name ="part"></input>
         <input type="submit"></input>
     </form>
 </body>

6、文本框的SelectionDirection属性

对input和textarea元素，HTML5增加了SelectionDirection属性，当用户在这两个元素中，用鼠标选择部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为“forward"，当用户反向选取文字时，该属性值为”backward"。当用户没有选择任何文字时，该属性值为“forward"。

 <body>
     <script>
         function AD(){
             var control = document.forms[0]['text'];
             var Direction = control.selectionDirection;
             alert(Direction);
         }
     </script>
     <form>
         <input type="test" name="text"></input>
         <input type="button" value="点击我" onclick="AD()"></input>
     </form>
 </body>

7、复选框的indeterminate属性

对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在HTML5中，可以在javascript脚本代码中，对该元素使用indeterminate属性，说明复选框处于尚未明确选取与否的状态。

 <body>
     <input type="checkbox" indeterminate id="cd">属性测试</input>
     <script>
         var cd = document.getElementById("cd");
         cd.indeterminate = true;
     </script>
 </body>

8、image提交按钮的height属性与width属性

针对类型为image的Input元素，html5新增加了两个属性，height、width属性分别用来指定图片按钮的高度和宽度。

 <body>
     <form action="test.json" method="post">
         姓名：<input type="text" name="name"></input>
         <input type="image" src="1.gif" alt="编辑" width="50" height="50"></input>
     </form>
 </body>

[html5] 学习笔记-表单新增的元素与属性（续）的更多相关文章

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

    本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...

  2. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

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

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

  4. HTML5学习笔记一：新增主体结构元素

    Dreamweaver快捷键: 属性面板:Ctrl+F3 新建文档:Ctrl+N 选择用网页查看:F12 新增的主体结构元素: section元素(例子如下): <!DOCTYPE HTML&g ...

  5. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  6. 9. Javascript学习笔记——表单处理

    9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...

  7. HTML学习笔记 表单元素

    <form></form>代表表单 action:往什么地方提交 method:提交方式  get显示提交(不安全)  post隐视提交(安全) 提交内容:  name=输入的 ...

  8. 【html5】html5学习笔记2--表单

    html5 新增输入类型 html5新增了 email.number.Date pickers (date, month, week, time, datetime, datetime-local) ...

  9. php学习笔记——表单

    13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...

随机推荐

  1. centos 7用ss命令来查看端口占用和对应进程

    mysqld进程在监听4567端口,进程id是2593:# ss -lnp|grep 4567tcp    LISTEN     0      128                    *:456 ...

  2. Sublime Text 2快捷键大全

    作者:zccst 2015-04-13 Sublime 插件安装 http://www.cnblogs.com/jingwhale/p/4421021.html 2014-09-17 Sublime ...

  3. LPC1768的IIS通讯

    IIS是飞利浦公司定义的一种用于音频传输的数字总线,LPC1768支持该总线, I2S接口为一条3线串行总线,含有1根数据线.1根时钟线和1根字选择信号线.基本的I2S连接具有一个主机(其总是为主机) ...

  4. UIResponder学习

    http://blog.csdn.net/jimzhai/article/details/23283515 UIResponder 介绍 UIResponder 这个类定义了很多用来处理响应和时间处理 ...

  5. 「LINUX资料」简单实用命令less和vi（三）

  6. HTTP协议快速入门

    一.定义 The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborativ ...

  7. linux 5个查找命令

    1. find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件. find的使用格式如下: $ find <指定目录> <指定条件> <指定动作> ...

  8. 创建 github 仓库

    1. 创建入口 在右上角找到 “+” 然后,选择 “New repository” 进行创建. 2. 填入信息 输入名字和描述 . 选择 “Initialize this repository wit ...

  9. Angular - - ngHref、ngSrc、ngCopy/ngCut/ngPaste

    ngHref 在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面. 格式:ng-href=”value” value:表达式. 使用 ...

  10. C++写时钟表

    time函数的运用,输出是没输换行,在流中,就什么的输不出,可以用清流函数,fflush(stdout) 代码 #include<iostream>#include<cstdio&g ...