HTML Input 类型


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


text(文本域)

<input type="text"> 定义单行的输入字段,用户可在其中输入文本.默认宽度为 20 个字符

实例

<form>
  姓:<br>
  <input type="text" name="lastname"><br>
  名:<br>
  <input type="text" name="firstname">
</form>
运行 »

这就是上面的HTML代码在浏览器中显示效果:

姓:

名:


password(密码字段)

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

实例

<form>
  用户名:<br>
  <input type="text" name="username"><br>
  密码:<br>
  <input type="password" name="psw">
</form>
运行 »

这就是上面的HTML代码在浏览器中显示效果:

用户名:

用户密码:

密码字段中的字符被屏蔽(显示为星号或圆圈).


submit(提交按钮)

<input type="submit"> 定义了一个用于 将表单数据提交表单处理程序的按钮.

表单处理程序通常是一个服务器页面,其中包含用于处理输入数据的脚本(后端处理 PHP Java Nodejs Python等)

表单处理程序在表单的action属性中指定:

实例

<form action="/action_page">
  姓:<br>
  <input type="text" name="lastname" value="zhang"><br>
  名:<br>
  <input type="text" name="firstname" value="san"><br><br>
  <input type="submit" value="提交">
</form>
运行 »

这就是上面的HTML代码在浏览器中显示效果:

姓:

名:


如果省略提交按钮的值(value)属性,该按钮将获取默认值:

实例

<form action="/action_page">
  姓:<br>
  <input type="text" name="lastname" value="zhang"><br>
  名:<br>
  <input type="text" name="firstname" value="san"><br><br>
  <input type="submit">
</form>
运行 »

reset(重置按钮)

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

实例

<form action="/action_page">
  姓:<br>
  <input type="text" name="lastname" value="zhang"><br>
  名:<br>
  <input type="text" name="firstname" value="san"><br><br>
  <input type="submit">
  <input type="reset">
</form>
运行 »

这就是上面的HTML代码在浏览器中显示效果:

姓:

名:

如果更改输入值然后单击“重置”按钮,则表单数据将重置为默认值.


radio(单选按钮)

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

单选按钮让用户只能选择有限数量选项中的一个:

实例

<form>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 秘密
</form>
运行 »

这就是上面的HTML代码在浏览器中显示效果:



秘密

checkbox(复选框)

<input type="checkbox">定义一个复选框 .

用户需要从若干给定的选择中选取一个或若干选项

实例

<form>
  <input type="checkbox" name="car" value="宝马"> 喜欢宝马<br>
  <input type="checkbox" name="car" value="奥迪"> 喜欢奥迪
</form>
运行 »

这就是上面的HTML代码在浏览器中显示效果:

喜欢宝马
喜欢奥迪

button(按钮)

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

实例

<input type="button" onclick="alert('Hello World!')" value="Click Me!">
运行 »

这就是上面的HTML代码在浏览器中显示效果:


HTML5输入类型

HTML5添加了几种新的输入类型:

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

旧版Web浏览器不支持的新输入类型将显示为<input type="text"> .


color(颜色)

<input type="color">用于应包含颜色的输入字段.

根据浏览器支持,颜色选择器可以显示在输入字段中.

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  选择颜色:
  <input type="color" name="favcolor">
</form>
运行 »

date(日期)

<input type="date">用于应包含日期的输入字段.

根据浏览器支持,日期选择器可以显示在输入字段中.

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  生日 :
  <input type="date" name="bday">
</form>
运行 »

您还可以使用minmax属性为日期添加限制:

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  输入 1980-01-01 之前的日期:
  <input type="date" name="bday" max="1979-12-31"><br>
  输入 2000-01-01 之后的日期:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
运行 »

datetime-local(本地日期)

<input type="datetime-local">类型创建让用户便捷输入日期和时间的输入控件,包括“年”、“月”、“日”,以及“时”和“分”。所使用的是用户所在时区.

根据浏览器支持,日期选择器可以显示在输入字段中.

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  生日 (日期和时间):
  <input type="datetime-local" name="bdaytime">
</form>
运行 »

email(电子邮件)

<input type="email">用于应包含电子邮件地址的输入字段.

根据浏览器支持,可以在提交时自动验证电子邮件地址.

一些智能手机识别电子邮件类型,并在键盘上添加“.com”以匹配电子邮件输入.

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  E-mail:
  <input type="email" name="email">
</form>
运行 »

file(文件)

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

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  选择文件: <input type="file" name="myFile">
</form>
运行 »

month(月份)

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

根据浏览器支持,日期选择器可以显示在输入字段中.

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  生日 (年份和月份):
  <input type="month" name="bdaymonth">
</form>
运行 »

number(数字)

<input type="number">定义数字输入字段.

您还可以对接受的号码设置限制.

以下示例显示数字输入字段,您可以在其中输入1到5之间的值:

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  数量(1到5之间):
  <input type="number" name="quantity" min="1" max="5">
</form>
运行 »

输入限制

以下是一些常见输入限制的列表(有些是HTML5中的新增内容):

属性 描述
disabled 指定禁用输入字段
max 指定输入字段的最大值
maxlength 指定输入字段的最大字符数
min 指定输入字段的最小值
pattern 指定用于检查输入值的正则表达式
readonly 指定输入字段是只读的(不能更改)
required 指定需要输入字段(必须填写)
size 指定输入字段的宽度(以字符为单位)
step 指定输入字段的合法数字间隔
value 指定输入字段的默认值

您将在下一章中了解有关输入限制的更多信息.

以下示例显示一个数字输入字段,您可以在其中输入0到100之间的值,步长为10.默认值为30:

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  数量:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
运行 »

points(范围)

<input type="range"> 定义一个控件,用于输入其精确值不重要的数字(如滑块控件).默认范围是0到100.但是,您可以使用 minmaxstep属性设置对接受的数字的限制:

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  <input type="range" name="points" min="0" max="10">
</form>
运行 »

search(搜索)

<input type="search">用于搜索字段(搜索字段的行为类似于常规文本字段).

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
 搜索:
  <input type="search" name="googlesearch">
</form>
运行 »

tel(电话)

<input type="tel">用于包含电话号码的输入字段.

注意:目前仅在Safari 8中支持电话类型.

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
 电话号码:
  <input type="tel" name="usrtel">
</form>
运行 »

time(时间)

<input type="time">允许用户选择时间(无时区).

根据浏览器支持,时间选择器可以显示在输入字段中.

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
 选择时间:
  <input type="time" name="usr_time">
</form>
运行 »

url(网址)

<input type="url">用于应包含URL地址的输入字段.

根据浏览器支持,url字段可以在提交时自动验证.

一些智能手机识别网址类型,并在键盘上添加“.com”以匹配网址输入.

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  添加您的主页:
  <input type="url" name="homepage">
</form>
运行 »

week(周)

<input type="week">允许用户选择周和年.

根据浏览器支持,日期选择器可以显示在输入字段中.

Opera Safari Chrome Firefox Internet Explorer

实例

<form>
  选择一周:
  <input type="week" name="week_year">
</form>
运行 »

HTML输入类型属性

标签 描述
<input type=""> 指定要显示的输入类型