首页 web前端 H5教程 HTML5新增的表单元素和属性实例解析_html5教程技巧

HTML5新增的表单元素和属性实例解析_html5教程技巧

May 16, 2016 pm 03:47 PM
html5 属性 新增 表单元素

本文以实例代码演示说明了HTML5新增的表单元素和属性,演示代码中包含了placeholder属性、autofocus 属性、list 和 datalist 元素、search 类型文本框、email 类型文本框、number 类型文本框、range 类型文本框、tel 类型文本框、url 类型文本框以及还有日期、时间类型的 input元素等等。
示例代码如下:


复制代码
代码如下:


HTML5 移动Web开发指南






HTML5 移动Web开发指南





HTML5 新元素--表单元素


                placeholder 属性:<br>                                 一般用在文本框上<br>                                 其主要作用是当文本框处于未输入状态并且内容为空时给文本框的提示内容<br>                            效果:<br>                                 当文本框获取焦点时,提示信息自动清空,失去焦点且未输入内容时,提示信息又自动出现<br>                                 省去传统的文本框需要借助 onfocel 和 onblur 事件才能实现的效果<br>                                 (兼容大部分的PC浏览器和Mobile浏览器,只能说科技确实进步了)<br>                示例:<input type="text" placeholder="我是 placeholder,是用来起提示作用"><br>               
登录后复制



                autofocus 属性:<br>                               指定控件自动获取焦点,需要注意的是一个HTML页面上只能有一个控件具有改属性<br>                示例:<input type="text" autofocus="true" placeholder="我设置了 autofocus自动获取焦点属性"> <br>                
登录后复制



                list 和 datalist 元素:<br>                                     list 元素的主要作用是提示文本框输入,提示的数据源则由 datalist 提供<br>                                     目前 list 和 datalist 元素只有 Opera 浏览器支持,甚至没有任何一款移动浏览器支持该特性<br>                示例:<input type="text" placeholder="我添加了 list 属性 和 datalist 元素,可没多少人懂我" list="myDataList"><br>               <datalist id="myDataList"><br>                   <option label="1">我是datalist1</option>
<br>                   <option label="2">我是datalist2</option>
<br>                   <option label="3">我是datalist3</option>
<br>                   <option label="4">我是datalist4</option>
<br>               </datalist><br>               
登录后复制



                search 类型文本框:<br>                                 主要用来搜索关键词的文本框<br>                                 该文本框和普通文本框唯一区别,在 Safari 和 Chrome 浏览器下,文本框的外观为圆角<br>                示例:<input type="search" placeholder="我是search 类型文本框"><br>               
登录后复制



                 email 类型文本框:<br>                                  是一个可以指定电子邮件内容的文本框,通常用在输入E-mail地址的输入文本框上<br>                                  这种文本框和普通文本框在外观上几乎一样,但实际上在Safari移动版浏览器下是有区别的<br>                                  其键盘会根据文本框类型不同而显示相对应的键盘<br>                 示例:<input type="email" placeholder="我是 email 类型文本框"><br>               
登录后复制



                number 类型文本框:<br>                                  是一种用于输入数字的文本框类型<br>                                  它可以配合 min、max、及step属性使用<br>                示例:<input type="number" value="0" min="0" max="10" step="1"><br>               
登录后复制



                range 类型文本框:<br>                                  是一种数值范围输入文本框类型,提供的是一种滑动输入方式<br>                                  需要配合 min、max、range等属性的使用<br>                示例:<input type="range" value="1" min="0" max="100" step="1"><br>               
登录后复制



                tel 类型文本框:<br>                                  是一种供用户输入电话号码的文本框类型<br>                                  这种文本框在移动版浏览器下,其键盘会根据文本框类型不同而显示相对应的键盘<br>                示例:<input type="tel" placeholder="我是 tel 类型文本框"><br>               
登录后复制



                url 类型文本框:<br>                                  是一种供用户输入Url地址的文本框类型<br>                                  这种文本框在移动版浏览器下,其键盘会根据文本框类型不同而显示相对应的键盘<br>                示例:<input type="url" placeholder="我是 url 类型文本框"><br>               
登录后复制



                在HTML5规范中,除了新增表单元素外,还有日期、时间类型的 input元素<br>                但这些类型都没有得到广泛的支持<br>                具体如下:<br>                        日期和时间(含时区):<br>                        <input type="datetime"><br>                        日期和时间(不含时区):<br>                        <input type="datetime-local"><br>                        时间选择器文本框:<br>                        <input type="time"><br>                        日期选择器文本框:<br>                        <input type="date"><br>                        年的周号选择器文本框:<br>                        <input type="week"><br>                        月份选择器文本框:<br>                        <input type="month"><br>               
登录后复制







HTML5 新元素--表单元素




本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

See all articles