H5新增表单元素

H5新增表单元素

我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表单元素，下面列出这些元素及其作用

• email 类型用于验证email的格式，当提交表单时会自动验证email域的值
• url 类型用于验证 URL 地址的格式，当提交表单时会自动验证url域的值
• number 类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持
• range 类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100
• 日期和时间类型：HTML5 拥有多个可供选取日期和时间的新输入类型：
  date - 选取日、月、年
  month - 选取月、年
  week - 选取周和年
  time - 选取时间（小时和分钟）
  datetime - 选取时间、日、月、年（UTC 时间）
  datetime-local - 选取时间、日、月、年（本地时间）
• search 类型用于搜索域，比如站点搜索或 Google 搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标
• tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持
• color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中

案例如下，大家可以将代码拷贝或者自己编写之后，在浏览器中查看效果

<form action="upload.php" method="post" accept-charset="utf-8" id="form1">        
    <br> 主页:
    <input type="url" name="url" value="" placeholder="个人主页" required>
    <br> 邮箱:
    <input type="email" name="email" value="" placeholder="邮箱" required>
    <br> 生日:
    <input type="date" name="date" value="" required>
    <br> 时间:
    <input type="time" name="time" value="" required>
    <br> 星期:
    <input type="week" name="week" value="" required>
    <br> 年龄:
    <input type="number" name="age" value="">
    <br> 薪水:
    <input type="range" name="range" value="">
    <br> 电话:
    <input type="tel" name="tell" value="" placeholder="都不支持">
    <br> 颜色:
    <input type="color" name="mycolor">
    <br>
    <input type="search" name="key" value="" results="s"><br>
    <input type="submit" name="sub" value="提交" form="form1">
</form>