HTML5表单_输入类型

最新推荐文章于 2022-11-08 23:20:21 发布

翻译最新推荐文章于 2022-11-08 23:20:21 发布 · 2.4k 阅读

文章标签：

#email #url #number #range #date

HTML 专栏收录该内容

20 篇文章

订阅专栏

HTML5新的input类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

浏览器支持：

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	No
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	No
search	No	4.0	11.0	10.0	No
color	No	No	11.0	No	No

email类型

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

<!DOCTYPE HTML>
<html>
<body>

<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get">

E-mail: <input type="email" name="user_email" /><br />
        <input type="submit" />

</form>

</body>
</html>

url类型

url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">

Homepage: <input type="url" name="user_url" /><br />
          <input type="submit" />

</form>

</body>
</html>

number类型

number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">

Points: <input type="number" name="points" min="1" max="10" step="3" value="6" />
        <input type="submit" />

</form>

</body>
</html>

range类型

range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">

Points: <input type="range" name="points" min="1" max="10" />
        <input type="submit" />

</form>

</body>
</html>

date类型

HTML5 拥有多个可供选取日期和时间的新输入类型：

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">

Date: <input type="date" name="user_date" />
      <input type="submit" />

</form>

</body>
</html>