HTML5新增表单控件

1.数据列表

双击会出现一个类似浏览历史的下拉框
<input type="" list="id">
<datalist id="id值">
<option value="值">文本</option>
......
</datalist>

2.<time> 标签

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的

3.Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值。

4.Input 类型 - URL

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

5.Input 类型 - number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定

6.Input 类型 - range

range 类型用于应该包含一定范围内数字值的滑动条。

range 类型显示为滑动条。

7.Input 类型 - Date Pickers（日期选择器）

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）

datetime-local - 选取时间、日、月、年（本地时间）

8.Input 类型 - search（搜索）

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域

9.Input 类型 - color（颜色）

默认颜色 value=“#ff0000”

10.电话input 类型 ---tel（电话号码) telphone

定义用于输入电话号码的字段。

电话号是11位纯数字，需要加入patten。

11.autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 <input> 标签的类型。

12.required 属性

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

13.音频和视频

可以使像插入图片一样引入音频和视频。

14.新增语义标签（块元素）

<header></header>

<nav></nav>

<section></section>

<footer></footer>

<main></main>

<aside></aside>

<article></article>

<figure>
<figcaption>独立流内容标题</figcaption>
独立流内容(图标、代码、图片、表格等）
</figure>

<delatils>
<summary>概要.标题</summary>
内容
</detalis>

示例：

15.新增语义标签（内联元素）

<progress value="进度值“ min="最小值"max="最大值">
你的浏览器不支持此标签
</progress>

<meter value="值" min="" max="" low=""hight=""> Your browser is not supported
</meter>

<time datetime="yyyy-mm-dd"></time>
<mark>标记</mark>

<audio src="sound.mp3" controls></audio>

<video src="movie.webm" autoplay controls></video>

<input type="text" name="usr_name" required="required" />

<input type="text" name="user_name" autofocus="autofocus" />

<input type="tel" patten="\d{11}">

颜色

<input type="color">

数字

<input type="number" name="points" min="1" max="10" />

<form>
<p>颜色选择控件:
<input type="color">
</p>
<p>日期选择:
<input type="date">
</p>
<p>时间选择:
<input type="time">
</p>
<p>电子邮件:
<input type="email">
</p>
<p>必填字段:
<input type="text" required>
</p>
<p>数字限制:
<input type="number" max="20" min="3">
</p>
<p>拖拽条:
<input type="range" max="1000" min="500">
</p>
<p>搜索框:
<input type="search">
</p>
<p>网址:
<input type="url">
</p>
<p>提交表单:
<input type="submit" value="提交">
</p>
</form>

HTML5新增表单控件相关推荐

html5新增表单控件和表单属性
新的输入性表单控件: email:电子邮箱文本框,跟普通的没什么区别 - 当输入不是邮箱的时候,验证不通过 - 移动端的键盘会发生变化 tel:电话号码 url:网页的URL search:搜索引擎 ...
html5新增标签——新增语义化标签、新增表单控件、多媒体
1.html5 HTML5是一个新的网络标准,现在仍处于发展阶段.目标是取代现有的HTML 4.01和XHTML 1.0 标准.它希望能够减少互联网富应用(RIA)对Flash.Silverlight ...
HTML5之表单控件的使用
表单用来搜集用户输入的数据组成 1.表单控件(搜集信息) 2.提示信息 3.表单域表单域中的属性 action:设置一个用来接收数据的后台程序地址 method:设置表单数据 ...
新增表单控件和表单属性
·email 电子邮箱文本框 ·tel 电话号码 (主要功能在移动端,一个键盘的切换) ·url 网页的url ·search 搜索引擎 (chrome下输入文字后, ...
web day02 表格表单及HTML常用的表单控件
一. 表格的标签及属性 table属性 Width.height 宽高(单位是像素或百分比) align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cells ...
html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
【HTML5】html5中列表、表格、表单控件、浮动框架及结构化标签知识详解大全
一.列表 1.有序列表 <ol>有序列表 order list <li>列表项</li> <li>列表项</li> </ol> ...
html文本框控件,HTML5的文本框表单控件
E-mail表单控件 E-mail表单控件与文本框相似,作用是链接电邮地址,为元素设置type="email":即可配置一个E-mail地址表单控件.只有支持HTML5email属 ...
html5表单域,html5表单控件和表单域
一.表单控件文章目录一.表单控件 1.1 认识表单 1.2 input控件 1.2.1 文本框与密码框 1.2.2 单选框和复选框 1.2.3 默认选中表单属性 1.2.4 input按钮组 1. ...

HTML5新增表单控件

HTML5新增表单控件相关推荐

最新文章

热门文章