HTML表单输入类型

Input 类型文本

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

<form action="action_page.php">
  名字:<br>
  <input type="text" name="firstname">
  <br>
  姓氏:<br>
  <input type="text" name="lastname">
  <br><br>
  <input type="submit">
</form>

让我试试

Input 类型密码

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

<form action="">
  用户名:<br>
  <input type="text" name="userid">
  <br>
  密码:<br>
  <input type="password" name="psw">
</form>

让我试试

在密码字段的字符被屏蔽（显示为星号或圆）。

Input 类型提交

<input type="submit"> 定义将表单数据提交给表单处理程序的按钮。

表单处理程序通常是能够处理输入数据的脚本的服务器页面。

表单处理程序指定表单的action属性：

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

让我试试

如果忽略提交按钮的值属性，按钮将得到默认文本：

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit">
</form>

让我试试

Input 类型重置

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

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

让我试试

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

Input 类型单选按钮

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

单选按钮让用户只选择一个：

<form action="action_page.php">
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其他<br><br>
  <input type="submit">
</form>

让我试试

Input 类型多选

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

复选框让用户选择零个或多个有限的选择选项。

<form action="action_page.php">
  <input type="checkbox" name="vehicle1" value="Bike">我有一辆直行车
  <br>
  <input type="checkbox" name="vehicle2" value="Car">我有一辆汽车
  <br><br>
  <input type="submit">
</form>

让我试试

Input 类型按钮

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

<input type="button"
onclick="alert('Hello World!')" value="点击我!">

让我试试

HTML5 Input类型

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

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

旧web浏览器不支持的新输入类型将表现为 <input type="text">.

Input 类型数字

<input type="number"> 定义一个数字输入字段。

您还可以设置限制什么号码接受。

下面的示例显示数字输入字段，您可以在其中输入值从1到5：

<form action="action_page.php">
  数量 (1到5之间):
  <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

让我试试

Input 限制

下面列出了一些常见的输入限制（有些是新的HTML5）：

属性 描述
disabled 指定一个输入字段应该是 disabled
max 指定输入字段的最大值.
maxlength 指定输入字段的字符的最大数目.
min 定输入字段的最小值.
pattern 指定检查输入值的正则表达式.
readonly 指定只读输入字段（不能更改）.
required 指定需要输入字段（必须填写）
size 指定输入字段的宽度（字符）.
step 指定输入字段的合法编号间隔.
value 指定输入字段的默认值.

在下一章中，您将了解更多有关输入限制的知识。

下面的示例显示一个数字输入字段，在这里您可以输入值从0到100，步长为10。默认值为30：

<form action="action_page.php">
  数量:
  <input type="number" name="quantity"
   min="0" max="100" step="10" value="30">
  <input type="submit">
</form>

让我试试

Input 类型日期

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

这取决于浏览器的支持，日期选择器可以显示在输入字段。

<form action="action_page.php">
  Birthday:
  <input type="date" name="bday">
  <input type="submit">
</form>

让我试试

您还可以添加日期的限制：

<form action="action_page.php">
    输入一个 1980-01-01 之前的日期:<br>
    <input type="date" name="bday" max="1979-12-31"><br><br>
    输入一个 2000-01-01 之后的日期:<br>
    <input type="date" name="bday" min="2000-01-02"><br><br>
    <input type="submit">
</form>

让我试试

Input 类型颜色

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

这取决于浏览器的支持，颜色选择器可以显示在输入字段。

<form action="action_page.php">
  选择一个你喜欢的颜色:
  <input type="color" name="favcolor" value="#ff0000">
  <input type="submit">
</form>

让我试试

Input 类型范围

<input type="range"> 用于输入字段，该字段应包含范围内的值。

根据浏览器支持，输入字段可以显示为滑块控件。

<form action="action_page.php" method="get">
  点:
  <input type="range" name="points" min="0" max="10">
  <input type="submit">
</form>

让我试试

您可以使用以下属性来指定限制：最小值，最大值，步长和值。

Input 类型月份

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

这取决于浏览器的支持，日期选择器可以显示在输入字段。

<form action="action_page.php">
  你的生日 (年和月):
  <input type="month" name="bdaymonth">
  <input type="submit">
</form>

让我试试

Input 类型星期

<input type="week"> 允许用户选择一个星期和一年。

这取决于浏览器的支持，日期选择器可以显示在输入字段。

<form action="action_page.php">
  选择一个星期:
  <input type="week" name="year_week">
  <input type="submit">
</form>

让我试试

Input 类型时间

<input type="time"> 允许用户选择时间（没有时区）。

这取决于浏览器的支持，一时间选择器可以显示在输入字段。

<form action="action_page.php">
  选择一个时间:
  <input type="time" name="usr_time">
  <input type="submit">
</form>

让我试试

Input 类型本地日期时间

<input type="datetime-local">指定没有时区的日期和时间输入字段。

这取决于浏览器的支持，日期选择器可以显示在输入字段。

<form action="action_page.php">
  生日 (日期和时间):
  <input type="datetime-local" name="bdaytime">
  <input type="submit" value="Send">
</form>

让我试试

Input 类型 Email

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

根据浏览器的支持，提交时可以自动验证电子邮件地址。

一些智能手机识别的电子邮件类型，并添加.com的键盘，以配合电子邮件输入。

<form action="action_page.php">
  E-mail:
  <input type="email" name="email">
  <input type="submit">
</form>

让我试试

Input 类似搜索

<input type="search"> 用于搜索字段（搜索字段的行为像常规文本字段）。

<form action="action_page.php">
  搜索:
  <input type="search" name="googlesearch">
  <input type="submit">
</form>

让我试试

Input 类型电话

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

电话型目前只在Safari 8支持。

<form action="action_page.php">
  电话:
  <input type="tel" name="usrtel">
  <input type="submit">
</form>

让我试试

Input 类型 Url地址

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

根据浏览器的支持，提交时可以自动验证URL字段。

一些智能手机识别的URL类型，并添加.com到键盘，以配合URL输入。

<form action="action_page.php">
  添加你的主页:
  <input type="url" name="homepage">
  <input type="submit">
</form>

让我试试