参考手册
HTML 教程
HTML 表单元素
HTML 输入属性

HTML 输入类型

HTML 输入类型有 text，password，submit，radio，checkbox，button，本章节着重讲解这些输入类型的用法。

输入类型：text

<input type="text"> 定义供文本输入的单行输入字段：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <form action="/example/html/html_form.aspx">
  6. 姓氏:<br>
  7. <input type="text" name="firstname">
  8. <br>
  9. 名字:<br>
  10. <input type="text" name="lastname">
  11. <br><br>
  12. <input type="submit">
  13. </form>
  15. <p>请注意表单本身是不可见的。</p>
  16. <p>同时请注意文本字段的默认宽度是 20 个字符。</p>
  18. </body>
  19. </html>
运行一下

输入类型：password

<input type="password"> 定义密码字段。

实例
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  6. <form action="/example/html/html_form.aspx">
  7. 用户名:<br>
  8. <input type="text" name="userid">
  9. <br>
  10. 密码:<br>
  11. <input type="password" name="psw">
  12. </form>
  14. <p>密码字段中的字符被掩码（显示为星号或圆点）。</p>
  16. </body>
  17. </html>
运行一下

注释：password 字段中的字符会被做掩码处理（显示为星号或实心圆）。

输入类型：submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。在表单的 action 属性中规定表单处理程序（form-handler）：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <form action="/example/html/html_form.aspx">
  5. 姓氏:<br>
  6. <input type="text" name="firstname" value="韩">
  7. <br>
  8. 名字:<br>
  9. <input type="text" name="lastname" value="梅梅">
  10. <br><br>
  11. <input type="submit" value="Submit">
  12. </form> 
  13. <p>如果您点击提交，表单数据会被发送到名为 demo_form.ashx 的页面。</p>
  14. </body>
  15. </html>
运行一下

以上 HTML 代码在浏览器中看上去是这样的：

姓氏:

名字:

如果您省略了提交按钮的 value 属性，那么该按钮将获得默认文本： 
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <form action="/example/html/html_form.aspx">
  6. 姓氏:<br>
  7. <input type="text" name="firstname" value="韩">
  8. <br>
  9. 名字:<br>
  10. <input type="text" name="lastname" value="梅梅">
  11. <br><br>
  12. <input type="submit">
  13. </form> 
  15. </body>
  16. </html>
运行一下

Input Type: radio

<input type="radio"> 定义单选按钮。Radio buttons 是让用户在限定的选项中选择其中一个:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <form action="/example/html/html_form.aspx">
  6. <input type="radio" name="sex" value="1" checked>男
  7. <br>
  8. <input type="radio" name="sex" value="2">女
  9. <br><br>
  10. <input type="submit">
  11. </form> 
  12. </body>
  13. </html>
运行一下

以上 HTML 代码在浏览器中看上去是这样的：

男

女

Input Type: checkbox

<input type="checkbox"> 定义复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <form action="/example/html/html_form.aspx">
  6. <input type="checkbox" name="vehicle" value="Bike">我有一辆自行车
  7. <br>
  8. <input type="checkbox" name="vehicle" value="Car">我有一辆车
  9. <br><br>
  10. <input type="submit">
  11. </form> 
  13. </body>
  14. </html>
运行一下

亲自试一试以上 HTML 代码在浏览器中看上去是这样的：

我有一辆自行车

我有一辆车

Input Type: button

<input type="button> 定义按钮。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <button type="button" onclick="alert('Hello World!')">点击我!</button>
  5. </body>
  6. </html>
运行一下

以上 HTML 代码在浏览器中看上去是这样的：

HTML5 输入类型

HTML5 增加了多个新的输入类型：

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

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

输入类型：number

<input type="number"> 用于应该包含数字值的输入字段。您能够对数字做出限制。根据浏览器支持，限制可应用到输入字段。

实例
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <p>
  6. 根据浏览器支持：<br>
  7. 数值约束会应用到输入字段中。
  8. </p>
  10. <form action="/example/html/html_form.aspx">
  11.   数量（1 到 5 之间）：
  12.   <input type="number" name="quantity" min="1" max="5">
  13.   <input type="submit">
  14. </form>
  16. <p><b>注释：</b>IE9 及早期版本不支持 type="number"。</p>
  18. </body>
  19. </html>
运行一下

输入限制

这里列出了一些常用的输入限制（其中一些是 HTML5 中新增的）：

属性描述
disabled规定输入字段应该被禁用。
max规定输入字段的最大值。
maxlength规定输入字段的最大字符数。
min规定输入字段的最小值。
pattern规定通过其检查输入值的正则表达式。
readonly规定输入字段为只读（无法修改）。
required规定输入字段是必需的（必需填写）。
size规定输入字段的宽度（以字符计）。
step规定输入字段的合法数字间隔。
value规定输入字段的默认值。
您将在下一章学到更多有关输入限制的知识。
实例
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  6. <p>
  7. 取决于浏览器支持:<br>
  8. 固定步骤将应用于输入字段。
  9. </p>
  11. <form action="/example/html/html_form.aspx">
  12.   数量:
  13.   <input type="number" name="points"
  14.    min="0" max="100" step="10" value="30">
  15.   <input type="submit">
  16. </form>
  18. <p><b>Note:</b>type="number" 不支持IE9及更早的版本.
  19. </p>
  21. </body>
  22. </html>
运行一下

输入类型：date

<input type="date"> 用于应该包含日期的输入字段。根据浏览器支持，日期选择器会出现输入字段中。

实例
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  6. <p>
  7. 根据浏览器支持：<br>
  8. 当您填写输入字段时会弹出日期选择器。
  9. </p>
  11. <form action="/example/html/html_form.aspx">
  12.   生日：
  13.   <input type="date" name="bday">
  14.   <input type="submit">
  15. </form>
  17. <p><b>注释：</b>Firefox 或者
  18. Internet Explorer 11 以及更早版本不支持 type="date"。</p>
  20. </body>
  21. </html>
运行一下

您可以向输入添加限制：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <form action="/example/html/html_form.aspx">
  6. 请输入 1980-01-01 之前的日期：<br>
  7. <input type="date" name="bday" max="1979-12-31"><br><br>
  8. 请输入 2000-01-01 之后的日期：<br>
  9. <input type="date" name="bday" min="2000-01-02"><br><br>
  10. <input type="submit"> 
  11. </form>
  13. <p><b>注释：</b>
  14. Internet Explorer 不支持 type="date"。</p>
  16. </body>
  17. </html>
运行一下

输入类型：color

<input type="color"> 用于应该包含颜色的输入字段。根据浏览器支持，颜色选择器会出现输入字段中。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>
  6. 取决于浏览器支持:<br>
  7. 当您填写输入框时，会弹出一个颜色选择器。
  8. </p>
  10. <form action="/example/html/html_form.aspx">
  11.   选择你喜欢的颜色:
  12.   <input type="color" name="favcolor" value="#ff0000">
  13.   <input type="submit">
  14. </form>
  16. <p><b>Note:</b> type="color" Internet Explorer不支持.</p>
  18. </body>
  19. </html>
运行一下

输入类型：range

<input type="range"> 用于应该包含一定范围内的值的输入字段。根据浏览器支持，输入字段能够显示为滑块控件。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>
  6. 根据浏览器支持：<br>
  7. 输入类型 "range" 可显示为滑动控件。
  8. </p>
  10. <form action="/example/html/html_form.aspx" method="get">
  11.   Points:
  12.   <input type="range" name="points" min="0" max="10">
  13.   <input type="submit">
  14. </form>
  15. <p><b>注释：</b>IE9 及早期版本不支持 type="range"。</p>
  16. </body>
  17. </html>
运行一下

您能够使用如下属性来规定限制：min、max、step、value。

输入类型：month

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

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>
  6. 根据浏览器支持：<br>
  7. 当您填写输入字段时会弹出日期选择器。
  8. </p>
  10. <form action="/example/html/html_form.aspx">
  11.   生日（月和年）：
  12.   <input type="month" name="bdaymonth">
  13.   <input type="submit">
  14. </form>
  16. <p><b>注释：</b>Firefox 或者
  17. Internet Explorer 11 以及更早版本不支持 type="month"。</p>
  19. </body>
  20. </html>
运行一下

输入类型：week

<input type="week"> 允许用户选择周和年。根据浏览器支持，日期选择器会出现输入字段中。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>
  6. 根据浏览器支持：<br>
  7. 当您填写输入字段时会弹出日期选择器。
  8. </p>
  10. <form action="/example/html/html_form.aspx">
  11.   选择一个周:
  12.   <input type="week" name="year_week">
  13.   <input type="submit">
  14. </form>
  16. <p><b>注释：</b>
  17. Internet Explorer 不支持 type="week"。</p>
  19. </body>
  20. </html>
运行一下

输入类型：time

<input type="time"> 允许用户选择时间（无时区）。根据浏览器支持，时间选择器会出现输入字段中。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>
  6. 根据浏览器支持：<br>
  7. 当您填写输入字段时会弹出日期选择器。
  8. </p>
  10. <form action="/example/html/html_form.aspx">
  11.   请选取一个时间：
  12.   <input type="time" name="usr_time">
  13.   <input type="submit">
  14. </form>
  16. <p><b>注释：</b>Firefox 或者
  17. Internet Explorer 11 以及更早版本不支持 type="time"。</p>
  19. </body>
  20. </html>
运行一下

输入类型：datetime

<input type="datetime"> 允许用户选择日期和时间（有时区）。根据浏览器支持，日期选择器会出现输入字段中。

实例
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  6. <p>
  7. 根据浏览器支持：<br>
  8. 当您填写输入字段时会弹出日期选择器。
  9. </p>
  11. <form action="/example/html/html_form.aspx">
  12.   生日（日期和时间）：
  13.   <input type="datetime" name="bdaytime">
  14.   <input type="submit">
  15. </form>
  17. <p><b>注释：</b>Chrome、Firefox 或 Internet Explorer 不支持 type="datetime"。</p>
  19. </body>
  20. </html>
运行一下

输入类型：datetime-local

<input type="datetime-local"> 允许用户选择日期和时间（无时区）。根据浏览器支持，日期选择器会出现输入字段中。

实例
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  6. <p>
  7. 根据浏览器支持：<br>
  8. 当您填写输入字段时会弹出日期选择器。
  9. </p>
  11. <form action="/example/html/html_form.aspx">
  12.   生日（日期和时间）：
  13.   <input type="datetime-local" name="bdaytime">
  14.   <input type="submit" value="Send">
  15. </form>
  17. <p><b>注释：</b>Firefox 或者
  18. Internet Explorer 不支持 type="datetime-local"。</p>
  20. </body>
  21. </html>
运行一下

输入类型：email

<input type="email"> 用于应该包含电子邮件地址的输入字段。根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。某些智能手机会识别 email 类型，并在键盘增加 ".com" 以匹配电子邮件输入。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <form action="/example/html/html_form.aspx">
  6.   E-mail:
  7.   <input type="email" name="email">
  8.   <input type="submit">
  9. </form>
  11. <p>
  12. <b>注释：</b>IE9 及更早版本不支持 type="email"。</p>
  14. </body>
  15. </html>
运行一下

输入类型：search

<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <form action="/example/html/html_form.aspx">
  6.   搜索谷歌：
  7.   <input type="search" name="googlesearch">
  8.   <input type="submit">
  9. </form>
  11. </body>
  12. </html>
运行一下

输入类型：tel

<input type="tel"> 用于应该包含电话号码的输入字段。目前只有 Safari 8 支持 tel 类型。

实例
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  6. <form action="/example/html/html_form.aspx">
  7.   Telephone:
  8.   <input type="tel" name="usrtel">
  9.   <input type="submit">
  10. </form>
  12. <p><b>注释：</b>Safari 8 及更新版本支持 type="tel"。</p>
  14. </body>
  15. </html>
运行一下

输入类型：url

<input type="url"> 用于应该包含 URL 地址的输入字段。根据浏览器支持，在提交时能够自动验证 url 字段。某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配 url 输入。

实例
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <form action="/example/html/html_form.aspx">
  6.   请添加您的首页：
  7.   <input type="url" name="homepage">
  8.   <input type="submit">
  9. </form>
  10. <p><b>Note:</b>IE9 及其更早版本不支持 type="url"。</p>
  11. </body>
  12. </html>
运行一下
HTML 表单元素
HTML 输入属性

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML