HTML5 表单元素

HTML5 新的表单元素

HTML5 有以下新的表单元素:

  • datalist
  • keygen
  • output

HTML5 datalist 元素

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

实例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Datalist</title>

</head>

<body>

	<input list="browsers">

	<datalist id="browsers">

	  <option value="Internet Explorer">

	  <option value="Firefox">

	  <option value="Chrome">

	  <option value="Chrome1">

	  <option value="Chrome2">

	  <option value="Opera">

	  <option value="Safari">

	</datalist>

</body>

</html>

HTML5 keygen 元素

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

实例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>keygen</title>

</head>

<body>

	<form action="" method="get">

		用户名: <input type="text" name="usr_name"/>

		加密: <keygen name="security"/>

		<input type="submit" />

	</form>

</body>

</html>

HTML5 output 元素

<output> 元素用于不同类型的输出，比如计算或脚本输出：

实例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>output</title>

</head>

<body>

	<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

		<input type="range" id="a" value="50">100 +

		<input type="number" id="b" value="50">=

		<output name="x" for="a b"></output>

	</form>

</body>

</html>

HTML5 新的表单属性

HTML5 的 form 和 input 标签添加了几个新属性.

form标签的新属性

属性 描述
autocomplete 规定 form 域应该拥有自动完成功能。
novalidate 规定在提交表单时不应该验证 form域。

input标签的新属性

属性 描述
autocomplete 规定 form 域应该拥有自动完成功能。
autofocus 规定在页面加载时，域自动地获得焦点。
form 规定输入域所属的一个或多个表单。
formaction 用于描述表单提交的URL地址，覆盖 元素中的action属性.
formenctype 描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formmethod 定义了表单提交的方式，覆盖了 元素的 method 属性。
formnovalidate 描述了 input 元素在表单提交时无需被验证，覆盖 元素的novalidate属性。
formtarget 指定一个名称或一个关键字来指明表单提交数据接收后的展示。
list 规定输入域的 datalist。datalist 是输入域的选项列表。
pattern 描述了一个正则表达式用于验证 input 元素的值。
placeholder 提供一种提示（hint），描述输入域所期待的值。
required 规定必须在提交之前填写输入域（不能为空）。
step 为输入域规定合法的数字间隔。

input标签的新类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

类型 描述
email 用于应该包含 e-mail 地址的输入域。
url 用于应该包含 URL 地址的输入域。
number 用于应该包含数值的输入域。
range 用于应该包含一定范围内数字值的输入域。显示为滑动条。
Date Pickers 可供选取日期和时间的新输入类型：date, month, week, time, datetime, datetime-local
search 用于搜索域，比如站点搜索或 Google 搜索。
color 用于创建一个允许用户使用颜色选择器。

Input 类型 - email

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

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

实例

E-mail: <input type="email" name="user_email" />

Input 类型 - url

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

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

实例

Homepage: <input type="url" name="user_url" />

Input 类型 - number

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

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

实例

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

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

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

实例

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

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

HTML5 拥有多个可供选取日期和时间的新输入类型：

  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间（小时和分钟）
  • datetime - 选取时间、日、月、年（UTC 时间）
  • datetime-local - 选取时间、日、月、年（本地时间）

下面的例子允许您从日历中选取一个日期：

实例

Date: <input type="date" name="user_date" />

Input 类型 - search

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

search 域显示为常规的文本域。

​

HTML5（六）表单合集的更多相关文章

  1. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  2. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  3. Bootstrap 表单和图片 （内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）

    一．表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  4. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  5. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  6. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

  7. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

  8. HTML5的表单input元素的新属性

    知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...

  9. 学习HTML5之表单

    HTML5 的标准已经定了,应该火了,或者已经火了.那么是不是可以学习一下呢? 目前h5的主场还是在手机端,pc还是受困于浏览器的兼容,主要是IE在拖后腿.所以这里侧重的是手机里面的表现. 先来看看表 ...

随机推荐

  1. java实现转方阵

    /* 对一个方阵转置,就是把原来的行号变列号,原来的列号变行号 例如,如下的方阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 转置后变为: 1 5 9 13 2 6 ...

  2. STL中的string

    string常用函数 1.构造函数 string(const char *s); //用c字符串s初始化 string(int n,char c); //用n个字符c初始化 string类还支持默认构 ...

  3. 记录RecyclerView的位置并进行恢复

    //监听RecyclerView滚动状态 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Overri ...

  4. Myeclipse 2014 破解补丁以及Y2课件迅雷下载

    一. 在破解myeclipse2014之前,要先把环境变量配置好: 1)打开我的电脑--属性--高级--环境变量2)新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变 ...

  5. Azure AD（四）知识补充-服务主体

    一,引言 又到了新的一周了,也到了我新的分享的时间了,还记得上一周立得Flag,其中 “保证每周输出一篇文章” ,让我特别“在意”(这里用词不太恰当).主要是我的一个大学舍友,他突然问了我一个关于写博 ...

  6. Qt自动生成.rc文件并配置对应属性 程序图标 版本 描述等

    Qt项目配置文件pro里需要如下配置,进行qmake,build后会自动生成.rc文件,并将对应的信息写入文件中 VERSION = 1.0.0.1 RC_ICONS = "http.ico ...

  7. Windows环境下PHP安装pthreads多线程扩展

    一.判断PHP是ts还是nts版 通过phpinfo(); 查看其中的 Thread Safety 项,这个项目就是查看是否是线程安全,如果是:enabled,一般来说应该是ts版,否则是nts版. ...

  8. 0.0---selenium+java自动化基础01---元素定位和操作

    一.定位方法 1.通过ID定位元素:driver. findElement(By.id(value)); 2.通过元素的名称定位元素: driver. findElement(By.name( val ...

  9. Android开发Fragment的使用学习

    基本概念 Fragment是Android3.0(API11)提出的概念,support-v4库中也开发了一套Fragment API,最低兼容Android 1.6.所以在开发中要注意不要导错包 导 ...

  10. 宝塔面板搭载yii2.0项目关于open_basedir报错解决办法

    昨天配置完宝塔的lamp后,然后把原本的yii项目放上去,发现出现三个报错,就是大概  require openssl之类的三个错误 然后去宝塔的界面里去配置了一个端口,然后再去阿里云上开放这个端口 ...