html5 大幅度地增加和改良input元素的种类

时间：2023-09-18 13:52:14

增加和改良input元素

url类型、email类型、date类型、time类型、datetime类型、datetime-local类型、month类型、week类型、number类型、range类型、search类型、tel类型、color类型

详细介绍

1.url类型

  1. url 类型用于应该包含 URL 地址的输入域。
  2. 在提交表单时，会自动验证 url 域的值。
<input type="url" name="user_url" />

2.email类型

  1. email 类型用于应该包含 e-mail 地址的输入域
  2. 在提交表单时会自动验证email的格式
<input type="email" name="email" />

3.date类型

选取日、月、年

4.time类型

选取时间（小时和分钟）

5.datetime类型

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

6.datetime-local类型

  1. 选取时间、日、月、年（本地时间）
  2. step属性默认值60

7.month类型

选取月、年

8.week类型

选取周和年

9.number类型

  1. number 类型用于应该包含数值的输入域。
  2. 可以设定对所接受的数字的限定
  1. 例如
<input type="number" name="points" min="1" max="10" />
  1. 下面的属性来规定对数字类型的限定：
    1. max 规定允许的最大值
    2. min 规定允许的最小值
    3. step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
    4. value 规定默认值

10.range类型

  1. range 类型用于应该包含一定范围内数字值的输入域。
  2. range 类型显示为滑动条。
  3. 可以设定对所接受的数字的限定：
  4. 例如
<input type="range" name="points" min="1" max="10" />

11.search类型

  1. search 类型用于搜索域,边框自带微圆角。
  2. 例如
<input type="search" name="search" />

12.tel类型

  1. 与text文本框类似，但是专用与电话
  2. 没有特殊的校验规则，不强制输入数字

13.color类型

  1. 显示一个颜色控件，点击选中需要的颜色。 2.例如
<input type="color" onchange="document.body.style.backgroudColor = document.getElenmentById('currentColor').textContent = this.value;">

    <span id="currentColor"></span>

相关文章