HTML标签
<!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <command> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <head> <header> <hgroup> <h1> - <h6> <hr> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <html> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>
首页 > HTML > HTML标签

type

HTML <input> type 属性

实例

带有两种不同输入类型的 HTML 表单，text 和 submit：

<form action="demo_form.html">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>


(查看本页底部更多实例)

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流浏览器都支持 type 属性。但是，并非所有主流浏览器都支持所有不同的 input 类型都能在所有主流浏览器中工作。

请看下面关于每种输入类型的浏览器支持。

定义和用法

type 属性规定要显示的 <input> 元素的类型。

默认类型是：text。

提示：该属性不是必需的，但是我们认为您应该始终使用它。

HTML 4.01 与 HTML5之间的差异

以下 input 类型是 HTML5 中的新类型：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。

语法

<input type="value">

属性值

值 描述
button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox 定义复选框。
colorNew 定义拾色器。
dateNew 定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
monthNew 定义 month 和 year 控件（不带时区）。
numberNew 定义用于输入数字的字段。
password 定义密码字段（字段中的字符会被遮蔽）。
radio 定义单选按钮。
rangeNew 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset 定义重置按钮（重置所有的表单值为默认值）。
searchNew 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
telNew 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew 定义用于输入时间的控件（不带时区）。
urlNew 定义用于输入 URL 的字段。
weekNew 定义 week 和 year 控件（不带时区）。

实例

输入类型：button

Opera Safari Chrome Firefox Internet Explorer

实例

定义可点击的按钮，在用户单击按钮时启动一段 JavaScript：

<input type="button" value="Click me" onclick="msg()">


输入类型：checkbox

Opera Safari Chrome Firefox Internet Explorer

实例

复选框允许用户在一定数量的选择中选取一个或多个选项：

<input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle[]" value="Car"> I have a car


输入类型：color

Opera Safari Chrome Firefox Internet Explorer

实例

从拾色器中选取颜色：

Select your favorite color: <input type="color" name="favcolor">


输入类型：date

Opera Safari Chrome Firefox Internet Explorer

实例

定义 date 控件：

Birthday: <input type="date" name="bday">


输入类型：datetime

Opera Safari Chrome Firefox Internet Explorer

实例

定义 date 和 time 控件（带有时区）：

Birthday (date and time): <input type="datetime" name="bdaytime">


输入类型：datetime-local

Opera Safari Chrome Firefox Internet Explorer

实例

定义 date 和 time 控件（不带时区）：

Birthday (date and time): <input type="datetime-local" name="bdaytime">


输入类型：email

Opera Safari Chrome Firefox Internet Explorer

实例

定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）：

E-mail: <input type="email" name="usremail">

提示：iPhone 的 Safari 浏览器会识别 email 输入类型，然后改变触摸屏的键盘来适应它（添加 @ 和 .com 选项）。

输入类型：file

Opera Safari Chrome Firefox Internet Explorer

实例

定义文件选择字段和 "浏览..." 按钮，供文件上传：

Select a file: <input type="file" name="img">


输入类型：hidden

Opera Safari Chrome Firefox Internet Explorer

实例

定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值：

<input type="hidden" name="country" value="Norway">


输入类型：image

Opera Safari Chrome Firefox Internet Explorer

实例

定义图像作为提交按钮：

<input type="image" src="img_submit.gif" alt="Submit">


输入类型：month

Opera Safari Chrome Firefox Internet Explorer

实例

定义 month 和 year 控件（不带时区）：

Birthday (month and year): <input type="month" name="bdaymonth">


输入类型：number

Opera Safari Chrome Firefox Internet Explorer

实例

定义用于输入数字的字段（您可以设置可接受数字的限制）：

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

请使用下面的属性来规定限制：

  • max - 规定允许的最大值。
  • min - 规定允许的最小值。
  • step - 规定合法数字间隔。
  • value - 规定默认值。

输入类型：password

Opera Safari Chrome Firefox Internet Explorer

实例

定义密码字段（密码字段中的字符会被遮蔽）：

<input type="password" name="pwd">


输入类型：radio

Opera Safari Chrome Firefox Internet Explorer

实例

允许用户在一定数量的选择中选取一个选项：

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female


输入类型：range

Opera Safari Chrome Firefox Internet Explorer

实例

定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：

<input type="range" name="points" min="1" max="10">

请使用下面的属性来规定限制：

  • max - 规定允许的最大值。
  • min - 规定允许的最小值。
  • step - 规定合法数字间隔。
  • value - 规定默认值。

输入类型：reset

Opera Safari Chrome Firefox Internet Explorer

实例

定义重置按钮（重置所有表单值为默认值）：

<input type="reset">

提示：请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情。

输入类型：search

Opera Safari Chrome Firefox Internet Explorer

实例

定义搜索字段（比如站内搜索或谷歌搜索等）：

Search Google: <input type="search" name="googlesearch">


输入类型：submit

Opera Safari Chrome Firefox Internet Explorer

实例

定义提交按钮：

<input type="submit">


输入类型：tel

Opera Safari Chrome Firefox Internet Explorer

实例

定义用于输入电话号码的字段：

Telephone: <input type="tel" name="usrtel">


输入类型：text

Opera Safari Chrome Firefox Internet Explorer

实例

定义两个用户可向其中输入文本的单行的文本字段：

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>


输入类型：time

Opera Safari Chrome Firefox Internet Explorer

实例

定义用于输入时间的控件（不带时区）：

Select a time: <input type="time" name="usr_time">


输入类型：url

Opera Safari Chrome Firefox Internet Explorer

实例

定义用于输入 URL 的字段：

Add your homepage: <input type="url" name="homepage">

提示：iPhone 的 Safari 浏览器会识别 url 输入类型，然后改变触摸屏的键盘来适应它（添加 .com 选项）。

输入类型：week

Opera Safari Chrome Firefox Internet Explorer

实例

定义 week 和 year 控件（不带时区）：

Select a week: <input type="week" name="week_year">

上一篇
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案：鲁ICP备09046678号-3