HTML5的表单所有TYPE类型

标签：

1.复选框（Checkboxs）

  <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

代码如下：

<form method="post">
    爱好：<input type="checkbox" name="love" value="1">爬山
    <input type="checkbox" name="love" value="2">游泳
    <input type="checkbox" name="love" value="3">篮球
</form>

2.拾色器（color）

  color 类型用在input字段主要用于选取颜色。

代码如下：

选择你喜欢的颜色: <input type="color" name="color">

3.date(带有calender控件)

  date 类型允许你从一个日期选择器选择一个日期,定义一个时间控制器。

代码如下：

生日: <input type="date" name="bday">

4.datetime

  datetime 类型允许你选择一个日期（UTC 时间）,定义一个日期和时间控制器（本地时间）。

代码如下：

生日 (日期和时间): <input type="datetime" name="bdaytime">

5.datetime-local

  datetime-local 类型允许你选择一个日期和时间 (无时区)，定义一个日期和时间 (无时区)。

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

6.month

  month 类型允许你选择一个月份，定义月与年 (无时区)。

代码入下：

生日 (月和年): <input type="month" name="bdaymonth">

7.week

  week 类型允许你选择周和年，定义周和年 (无时区)。

选择周: <input type="week" name="week_year">

8.time

time 类型允许你选择一个时间，定义可输入时间控制器（无时区）。

代码如下：

选择时间: <input type="time" name="usr_time">

9.email

  email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效。

代码入下：

<form action="">
        <input type="email" name=“email”>
        <input type="submit" value="提交">
</form>

10.file

  file 定义文件选择字段和 "浏览..." 按钮，供文件上传。

代码如下：

头像： <input type="file" name="timg">

11.输入类型：hidden

  hidden 定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。

代码入下：

<input type="hidden" name="city" value="hz">

12.输入类型：image

  image 定义图像作为提交按钮。

代码如下：

<input type="image" src="...jpg" name="img">

13.输入类型：number

  number 定义用于输入数字的字段（您可以设置可接受数字的限制）

代码如下：

数字（1-5）<input type="number" name="quantity" min="1" max="5" >
数字（规定数字间隔为0.1）<input type="number" name="quantity" min="1" max="5">

• max - 规定允许的最大值。
• min - 规定允许的最小值。
• step - 规定合法数字间隔。
• value - 规定默认值

14.输入类型：password

  password 定义密码字段（密码字段中的字符会被遮蔽）。

代码如下：

密码：<input type="password" name="password">

15.输入类型：radio

  radio 允许用户在一定数量的选择中选取一个选项.

代码如下：

性别：<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女

• max - 规定允许的最大值。
• min - 规定允许的最小值。
• step - 规定合法数字间隔。
• value - 规定默认值

16.输入类型：range

  range 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制.

代码如下：

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

17.输入类型：reset

  reset 定义重置按钮（重置所有表单值为默认值）。

代码如下：

<input type="reset" name="res" value="重置按钮">

18.输入类型：search

  search 定义搜索字段（比如站内搜索或谷歌搜索等）。

代码如下：

搜索<input type="search" name="sea">

19.输入类型：submit

  submit 定义提交按钮。

代码入下：

<input type="submit" name="sub" value="提交">

20.输入类型：tel（- -！表示很少浏览器兼容）

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

代码入下：

电话: <input type="tel" name="usrtel">

21.输入类型：text

  text 定义但行文本输入框。

代码如下：

用户名：<input type="text" name="username">

22.输入类型：url

  url 定义用于输入 URL 的字段。

代码入下：

Add your homepage: <input type="url" name="homepage">

提示：iPhone 的 Safari 浏览器会识别 url 输入类型，然后改变触摸屏的键盘来适应它（添加 .com 选项）。

扩展：有用的表单属性：

1.使用autofocus操作焦点。

代码入下：

用户名：<input type="text" name="username" autofocus>

2.为文本使用placeholder占位符

代码如下：

密码：<input type="password" name="password" placeholder="请输入密码">

HTML5的表单所有TYPE类型

标签：

原文地址：http://www.cnblogs.com/lzh739887959/p/5734333.html