HTML表单元素--input输入类型（2）

叁歲伎倆 2022-12-20 11:10 212阅读 0赞

HTML表单元素–input输入类型（2）

在HTML中，表单元素中的input元素是占很重要的地位的，第一原因是常用，第二是input元素有太多的type值。老的在之前的文章：input输入类型（1）中有讲解；这里主压迫详细介绍HTML5中新增的

HTML5 增加了多个新的type：

color 用于应该包含颜色的输入字段。

  1. <form>
  2.   Birthday:
  3.   <input type="date" name="bday">
  4. </form>

date 用于应该包含日期的输入字段。

  1. <form>
  2.   Birthday:
  3.   <input type="date" name="bday">
  4. </form>

datetime 允许用户选择日期和时间（有时区）

  1. <form>
  2.   Birthday (date and time):
  3.   <input type="datetime" name="bdaytime">
  4. </form>

datetime-local 允许用户选择日期和时间（无时区）。

  1. <form>
  2.   Birthday (date and time):
  3.   <input type="datetime-local" name="bdaytime">
  4. </form>

email 用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。

  1. <form>
  2.   E-mail:
  3.   <input type="email" name="email">
  4. </form>

month 允许用户选择月份和年份。根据浏览器支持，日期选择器会出现输入字段中。

  1. <form>
  2.   Birthday (month and year):
  3.   <input type="month" name="bdaymonth">
  4. </form>

range 用于应该包含一定范围内的值的输入字段。

  1. <form>
  2.   <input type="range" name="points" min="0" max="10">
  3. </form>

search 用于搜索字段（搜索字段的表现类似常规文本字段）。

  1. <form>
  2.   Search Google:
  3.   <input type="search" name="googlesearch">
  4. </form>

tel 用于应该包含电话号码的输入字段。

  1. <form>
  2.   Telephone:
  3.   <input type="tel" name="usrtel">
  4. </form>

time 允许用户选择时间（无时区）。

  1. <form>
  2.   Select a time:
  3.   <input type="time" name="usr_time">
  4. </form>

url 用于应该包含 URL 地址的输入字段。

  1. <form>
  2.   Add your homepage:
  3.   <input type="url" name="homepage">
  4. </form>

week 允许用户选择周和年。

  1. <form>
  2.   Select a week:
  3.   <input type="week" name="week_year">
  4. </form>

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text

发表评论

表情：
评论列表 （有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML表单元素

    HTML表单元素 HTML中的表单元素，可以说是整个HTML中最常用也是最重要的部分，里面包含的太多的元素，尔每一个元素中的type类型又有很多种。所以需要大家理清楚区分

    向右看齐向右看齐/ 0 赞/ 260 阅读