HTML 表单Input类型

本页内容

HTML 输入类型

以下是您可以在 HTML 中使用的不同input类型:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

type 属性的默认值为“text”。

输入类型文本

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


示例

<form>

    <label for="fname">First name:</label><br>
  <input 
  type="text" id="fname" name="fname"><br>
  <label for="lname">Last 
  name:</label><br>
  <input type="text" id="lname" name="lname">

</form>

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




密码

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


示例

<form>

   <label for="username">Username:</label><br>
  <input type="text" 
  id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  
  <input type="password" id="pwd" name="pwd">
  <input type="submit" value="提交">

</form>

上面的 HTML 代码在浏览器中的显示为:




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

输入类型 提交

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

表单处理程序通常是带有用于处理输入数据的脚本的服务器页面。

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


示例

<form action="/third/http.php">
  <label for="fname">First 
  name:</label><br>
  <input type="text" id="fname" name="fname" 
  value="John"><br>
  <label for="lname">Last name:</label><br>
  
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  
  <input type="submit" value="Submit">
</form>

上面的 HTML 代码在浏览器中的显示为:






如果省略提交按钮的 value 属性,按钮将使用默认文本:


示例

<form action="/action_page.php">
  <label for="fname">First 
  name:</label><br>
  <input type="text" id="fname" name="fname" 
  value="John"><br>
  <label for="lname">Last name:</label><br>
  
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  
  <input type="submit">
</form>

reset重置

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


示例

<form action="/action_page.php">
  <label for="fname">First 
  name:</label><br>
  <input type="text" id="fname" name="fname" 
  value="John"><br>
  <label for="lname">Last name:</label><br>
  
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  
  <input type="submit" value="Submit">
  <input type="reset">
</form>

上面的 HTML 代码在浏览器中的显示为:






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

单选

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

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


示例

<p>Choose your favorite Web language:</p>


<form>
  <input type="radio" id="html" name="fav_language" 
  value="HTML">
  <label for="html">HTML</label><br>
  <input 
  type="radio" id="css" name="fav_language" value="CSS">
  <label 
  for="css">CSS</label><br>
  <input type="radio" id="javascript" 
  name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
  <input type="submit" value="提交">

</form>

上面的 HTML 代码在浏览器中的显示为:



checkbox类型

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

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


示例

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  
  <label for="vehicle1"> I have a bike</label><br>
  <input 
  type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> 
  I have a car</label><br>
  <input type="checkbox" 
  id="vehicle3" name="vehicle3" 
  value="Boat">
  <label for="vehicle3"> I have a boat</label>
  <input type="submit" value="提交">

 </form>

上面的 HTML 代码在浏览器中的显示为:



按钮

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


示例

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

上面的 HTML 代码在浏览器中的显示为:

 
 


颜色

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

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


示例

<form>
  <label for="favcolor">选择您的最爱
  颜色:</label>
  <input type="color" id="favcolor" name="favcolor">

 </form>

日期

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

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


示例

<form>
  <label for="birthday">生日:</label>
  <input 
  type="date" id="birthday" name="birthday">
</form>

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


示例

<form>
  <label for="datemax">输入日期在1980-01-01之前:</label>
  <input type="date" id="datemax" name="datemax" 
  max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 
  2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" 
  min="2000-01-02">
</form>

Datetime-local

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

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


示例

<form>
  <label for="birthdaytime">生日(日期和
  时间):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">

 </form>

电子邮件

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

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

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


示例

<form>
  <label for="email">输入你的电子邮箱:</label>
  
  <input type="email" id="email" name="email">

 </form>

文件

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


示例

<form>
  <label for="myfile">选择一个文件:</label>
  
  <input type="file" id="myfile" name="myfile">
</form>

隐藏类型

定义了一个隐藏的 <input type="hidden"> 输入字段(对用户不可见)。

隐藏字段允许 Web 开发人员在提交表单时包含用户无法看到或修改的数据。

隐藏字段通常存储提交表单时需要更新的数据库记录。

注意:虽然该值不会在页面内容中显示给用户,但可以使用任何浏览器的开发人员工具或“查看源代码”功能看到(并且可以编辑)。不要使用隐藏输入作为一种安全形式!


示例

<form>
  <label for="fname">First name:</label>
  
  <input type="text" id="fname" name="fname"><br><br>
  <input 
  type="hidden" id="custId" name="custId" value="3487">
  <input 
  type="submit" value="Submit">
</form>

年月

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

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


示例

<form>
  <label for="bdaymonth">生日(月份和
  年):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">

 </form>

数字

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

您还可以对接受的数字设置限制。

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


示例

<form>
  <label for="quantity">数量(1至
  5):</label>
  <input type="number" id="quantity" name="quantity" 
  min="1" max="5">
</form>

输入限制

以下是一些常见输入限制的列表:

属性 描述
checked 指定页面加载时应预选输入字段
disabled 指定应禁用输入字段
max 指定输入字段的最大值
maxlength 指定输入字段的最大字符数
min 指定输入字段的最小值
pattern 指定正则表达式以检查针对输入值
readonly 指定仅读取输入字段(无法更改)
required 指定需要输入字段(必须填写)
size 指定输入字段的长度(字符)
step 指定输入字段的法定数字步长
value 指定输入字段的默认值


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

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


示例

<form>
  <label for="quantity">数量:</label>
  <input 
  type="number" id="quantity" name="quantity" min="0" max="100" step="10" 
  value="30">
</form>


range 范围

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


示例

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  
    <input type="range" id="vol" name="vol" min="0" max="50">

 </form>

search 搜索

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


示例

<form>
  <label for="gsearch">搜索Google:</label>
  
  <input type="search" id="gsearch" name="gsearch">

 </form>

tel 电话

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


示例

<form action="/third/http.php">
  <label for="phone">输入你的电话号码:</label>
  
    <input type="tel" id="phone" name="phone" 
    pattern="1[0-9]{10}">
    <input type="submit">

</form>

time 时间

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

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


示例

<form>
  <label for="appt">Select a time:</label>
  
  <input type="time" id="appt" name="appt">

 </form>

URL 网址

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

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

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


示例

<form>
  <label for="homepage">添加您的主页:</label>
  
  <input type="url" id="homepage" name="homepage">

 </form>

week 周

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

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


示例

<form>
  <label for="week">选择一个星期:</label>
  
  <input type="week" id="week" name="week">
  <input type="submit" value="提交">

 </form>
此页面最后编辑于2022年8月14日 (星期日) 22:06。