HTML input类型

本章介绍<input>元素的不同输入类型。

类型	描述
text	单行文本输入
password	密码输入
submit	提交表单
reset	重置表单
radio	单选按钮
checkbox	多选框
button	按钮
color	颜色(HTML5新添加)
date	日期(HTML5新添加)
datetime-local	日期时间(HTML5新添加)
email	电子邮件(HTML5新添加)
file	文件上传
month	月份(HTML5新添加)
number	数字(HTML5新添加)
range	范围(HTML5新添加)
search	搜索(HTML5新添加)
tel	电话(HTML5新添加)
time	时间(HTML5新添加)
url	网址(HTML5新添加)
week	星期(HTML5新添加)

HTML5新添加的type，旧版浏览器不识别将会表现为text类型。

HTML input text

<input type="text">定义一行文本输入字段

<form>
         名字:<br>
         <input type="text" name="yourname"><br>
         姓氏:<br>
         <input type="text" name="homename">
       </form>

尝试一下

HTML input password

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

<form>
         名字:<br>
         <input type="text" name="yourname"><br>
         密码:<br>
         <input type="password" name="pwd">
       </form>

尝试一下

在密码字段中的字符被掩码（显示为星号或圆圈）。

HTML input submit

<input type="submit">定义了一个用于将表单数据提交给表单处理程序的按钮。表单处理程序通常是一个服务器页面，其中包含用于处理输入数据的脚本。表单处理程序在<form>的action属性中指定：

<form action="/jc_script/urlencode.php">
         名字:<br>
         <input type="text" name="yourname"><br>
         姓氏:<br>
         <input type="text" name="homename">
         <input type="submit" value="提交">
       </form>

尝试一下

如果省略提交按钮的value属性，该按钮将获得默认文本：submit。

HTML input reset

<input type="reset">定义一个重置按钮，将所有表单值重置为其默认值。

<form action="/jc_script/urlencode.php">
         名字:<br>
         <input type="text" name="yourname" value="Jim"><br>
         姓氏:<br>
         <input type="text" name="homename" value="Green">
         <input type="submit" value="提交">
         <input type="reset" value="重置">
       </form>

尝试一下

HTML input radio

<input type="radio">定义一个单选按钮。

<form>
         <input type="radio" name="lang" value="java" checked> Java<br>
         <input type="radio" name="lang" value="php"> PHP<br>
         <input type="radio" name="lang" value="python"> Python
       </form>

尝试一下

HTML input checkbox

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

<form>
         <input type="checkbox" name="lang1" value="java" checked> Java<br>
         <input type="checkbox" name="lang2" value="php"> PHP<br>
         <input type="checkbox" name="lang3" value="python"> Python
       </form>

尝试一下

HTML input button

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

<input type="button" onclick="alert('欢迎来到蝴蝶教程!')" value="点击我!">

尝试一下

HTML input color

<input type="color">定义一个颜色输入字段。

<form action="/jc_script/urlencode.php">
         选择您喜欢的颜色
         <input type="color" name="favcolor" value="#00FF00">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="color" IE11或更早的版本不支持，Safari9.1或更早的版本不支持。</p>

尝试一下

HTML input date

<input type="date">定义一个日期输入字段。

<form action="/jc_script/urlencode.php">
         生日：
         <input type="date" name="bday">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="date" IE11或更早的版本不支持，Safari不支持。</p>

尝试一下

您还可以使用min和max属性为日期添加限制：

<form action="/jc_script/urlencode.php">
         开始时间：
         <input type="date" name="starttime" min="1999-01-01">
         结束时间：
         <input type="date" name="endtime" max="2028-12-31">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="date" IE11或更早的版本不支持，Safari不支持。</p>

尝试一下

HTML input datetime-local

<input type="datetime-local">定义一个日期时间输入字段。

<form action="/jc_script/urlencode.php">
         生日：
         <input type="datetime-local" name="bday">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="datetime-local" IE12或更早的版本不支持，Safari不支持。Firefox不支持。</p>

尝试一下

HTML input email

<input type="email">被用于应该包含一个E-mail地址输入字段。根据浏览器支持，可以在提交时自动验证电子邮件地址。一些智能手机识别电子邮件类型，并在键盘上添加“.com”以匹配电子邮件输入。

<form action="/jc_script/urlencode.php">
         E-mail：
         <input type="email" name="email">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="email" IE9或更早的版本不支持。</p>

尝试一下

HTML input file

<input type="file">定义文件选择字段和文件上传一个“浏览”按钮。

<form action="/jc_script/urlencode.php">
         选择文件：
         <input type="file" name="file">
         <input type="submit" value="提交">
       </form>

尝试一下

HTML input month

<input type="month">允许用户选择年份和月份。

<form action="/jc_script/urlencode.php">
         生日：
         <input type="month" name="bday">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="month" IE11或更早的版本不支持，Firefox不支持，Safari不支持</p>

尝试一下

HTML input number

<input type="number">定义了一个数字输入字段。还可以对接受的数字设置限制。以下示例显示数字输入字段，您可以在其中输入10到15之间的值：

<form action="/jc_script/urlencode.php">
          请输入10-15的数字：
         <input type="number" min="10" max="15" name="number">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="number" IE9或更早的版本不支持。</p>

尝试一下

还可以用step属性设置步长

<form action="/jc_script/urlencode.php">
          请输入0-50为5的倍数的数字：
         <input type="number" min="0" max="50"  step="5" name="number">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="number" IE9或更早的版本不支持。</p>

尝试一下

HTML input range

<input type="range">限定用于输入数字，其确切值（滑块控制）。默认范围是0到100。但是，您可以设置被接受什么数字与限制min，max以及step属性：

<form action="/jc_script/urlencode.php">
         范围输入：
         <input type="range" name="range" min="10" max="100" step="10">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="range" IE9或更早的版本不支持。</p>

尝试一下

HTML input search

<input type="search">用于搜索字段（搜索字段行为就像一个普通的文本字段）。

<form action="/jc_script/urlencode.php">
         百度一下：
         <input type="search" name="search">
         <input type="submit" value="提交">
       </form>

尝试一下

HTML input tel

<input type="tel">被用于应该包含电话号码输入字段。

<form action="/jc_script/urlencode.php">
         请输入电话号码：
         <input type="tel" name="tel">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="tel" 只在Safari8支持。</p>

尝试一下

HTML input time

<input type="time">允许用户选择时间。

<form action="/jc_script/urlencode.php">
         请输入时间：
         <input type="time" name="time">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="time" IE12或更早的版本不支持，Safari不支持</p>

尝试一下

HTML input url

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

<form action="/jc_script/urlencode.php">
         请输入网址：
         <input type="url" name="url">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="url" IE9或更早的版本不支持。</p>

尝试一下

HTML input week

<input type="week">一年的第几个星期

<form action="/jc_script/urlencode.php">
         x年x周：
         <input type="week" name="week">
         <input type="submit" value="提交">
       </form>
       <p><b>提示:</b> type="week" IE11或更早的版本不支持，Firefox不支持，Safari不支持。</p>

尝试一下