HTML5新增的属性与元素02

2018-01-24

功能丰富的input元素

HTML5进一步丰富了type属性的类型，从而允许通过<input.../>元素来生成各种不同的表单控件。HTML5为<input.../>元素的type属性新增了如下几种可能的类型：

color：让<input.../>元素生成一个颜色选择器。当用户在颜色选择器中选中指定颜色后，该文本框内自动显示用户选中的颜色，该文本框的value为该颜色的值，形如#xxxxxx的颜色值
data：让<input.../>元素生成一个日期选择器
time：让<input.../>元素生成一个时间选择器
datetime：让<input.../>元素生成一个UTC日期、时间选择器
datetime-local：让<input.../>元素生成一个本地日期、时间选择器
week：让<input.../>元素生成一个供用户选择第几周的文本框
month：让<input.../>元素生成一个月份选择器
email：让<input.../>元素生成一个E-mail输入框。浏览器将会自动检查该文本框的value，如果用户在该文本框内输入的内容不符合E-mail格式，浏览器将会不允许提交表单，并自动生成提示。当指定type=“email”时，<input.../>元素可以指定如下属性
- multiple：该属性的值可以是multiple或省略属性值。如果指定了该属性值，则表明该文本框内允许输入多个E-mail地址
tel：让<input.../>元素生成一个只能输入电话号码的文本框。但这种类型的文本框并没有提供额外的要求，也就是并不会执行太多额外的检查
url：让<input.../>元素生成一个URL输入框。浏览器将会自动检查该文本框的value，如果用户在该文本框内输入的内容不符合URL格式，浏览器将会不允许提交表单，并自动生成提示
number：让<input.../>元素生成一个只能输入数字的文本框
range：让<input.../>元素生成一个拖动条，通过拖动条使得用户只能输入指定范围、知道的步长的值。当指定文本框的type=“range”时，该文本框还可以指定如下3个属性。
- min：指定该拖动条的最小值。
- max：指定该拖动条的最大值
- step：指定该拖动条的步长
search：让<input.../>元素生成一个专门用于输入搜索关键字的文本框。这种类型的文本框与type=“text”的文本框没有太大的区别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>功能丰富的input元素</title>
</head>
<body>
  <form action="login">
  <input type="color" name="color" /><br>
  <input type="date" name="date" /><br>
  <input type="time" name="time" /><br>
  <input type="datetime" name="datetime" /><br>
  <input type="datetime-local" name="datetime-local" /><br>
  <input type="month" type="month" /><br>
  <input type="time" name="time" /><br>
  <input type="week" name="week" /><br>
  <input type="email" name="email" /><br>
  <input type="tel" name="tel" /><br>
  <input type="url" name="url" /><br>
  <input type="number" name="number" /><br>
  <input type="range" name="range" /><br>
  <input type="search" type="search" /><br>
  <input type="submit" value="提交" />
  </form>
</body>
</html>

HTML5新增的表单控件

HTML5新增了一个<output.../>表单控件，该元素用于显示输出，比如计算结果或脚本的输出。<output.../>元素必须属于某个表单，也就是说，该元素要么定义在表单内部，要么为它指定form属性

<output.../>元素除了可以指定id、style、class、form等属性之外，还可以指定如下属性：

for：该属性指定该元素将会显示哪个元素的值。该属性值应该是其它元素的id

与其它表单控件不同的是，<output.../>所生产的表单控件并不会生成请求参数，它只是用于显示输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>output</title>
</head>
<body>
  <form action="#" oninput="a.value=color1.value;b.value=range1.value">
    <input id="color1" name="color1" type="color"  />
    <output name="a" for="color1" ></output><p>
    <input id="range1" name="range1" type="range" min="0" max="100" step="1" />
    <output name="b" for="range1"></output><p>
    <input type="submit" value="提交">
  </form><!-- 此为笔者个人案例 -->
  <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>