HTML表单输入类型

文
章
目
录

• <input>所有type列表
• HTML5 <input>新增类型
• <input>所有type列表示例
• <input type=”text”>:
• <input type=”password”>:
• <input type=”submit”>:
• <input type=”reset”>:
• <input type=”radio”>:
• <input type=”checkbox”>:
• <input type=”button”>
• <input type=”file”>:
• <input type=”image”>:
• HTML5 新增的 <input> 类型元素示例
• <input type=”color”>:
• <input type=”date”>:
• <input type=”datetime-local”>:
• <input type=”email”>:
• <input type=”month”>:
• <input type=”number”>:
• <input type=”url”>:
• <input type=”week”>:
• <input type=”search”>:
• <input type=”tel”>:

在HTML中，<input type=””>是HTML表单的重要元素。<input>元素的”type”属性可以是各种类型，用于定义信息字段。例如，<input type=”text” name=”name”> 创建一个文本框。

<input>所有type列表

以下是HTML中<input>元素的所有type=\"\"的列表

类型	描述
text	定义单行文本输入字段。
password	定义单行密码输入字段。
submit	定义用于将表单提交至服务器的提交按钮。
reset	定义用于重置表单中所有值的重置按钮。
radio	定义单选按钮，允许选择一个选项。
checkbox	定义复选框，允许选择多个选项。
button	定义简单的按钮，可编程执行事件上的任务。
file	定义从设备存储中选择文件的输入字段。
image	定义图形提交按钮。

HTML5 <input>新增类型

HTML5在<input>元素上添加了新类型。以下是HTML5中<input>元素类型的列表，以及带有示例的类型描述。

类型	描述
color	定义一个具有特定颜色的输入字段。
date	定义用于选择日期的输入字段。
datetime-local	定义用于输入无时区日期的输入字段。
email	定义用于输入电子邮件地址的输入字段。
month	定义带有月份和年份但无时区的控件。
number	定义输入数字的输入字段。
url	定义用于输入URL的字段。
week	定义用于输入周-年日期但无时区的字段。
search	定义用于输入搜索字符串的单行文本字段。
tel	定义用于输入电话号码的输入字段。

<input>所有type列表示例

<input type=”text”>:

<input>元素的”type”为”text”用于定义单行输入文本字段。

示例：

<form>  
    <label>Enter first name</label><br>  
    <input type=\"text\" name=\"firstname\"><br>  
    <label>Enter last name</label><br>  
    <input type=\"text\" name=\"lastname\"><br>  
    <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>  
</form>  

<input type=”password”>:

<input>元素的”type”为”password”用于允许用户在网页上安全地输入密码。在密码字段中输入的文本会被转换成”*”或”.”，以便其他用户无法阅读。

示例：

<form>  
    <label>Enter User name</label><br>  
    <input type=\"text\" name=\"firstname\"><br>  
    <label>Enter Password</label><br>  
    <input type=\"Password\" name=\"password\"><br>  
    <br><input type=\"submit\" value=\"submit\">  
</form> 

<input type=”submit”>:

<input> 元素的 “submit” 类型定义了一个提交按钮，当发生 “click” 事件时，用于将表单提交到服务器。

例子：

<form action=\"https://www.javatpoint.com/html-tutorial\">  
    <label>Enter User name</label><br>  
    <input type=\"text\" name=\"firstname\"><br>  
    <label>Enter Password</label><br>  
    <input type=\"Password\" name=\"password\"><br>  
    <br><input type=\"submit\" value=\"submit\">  
</form>  

单击提交按钮后，将提交表单到服务器并重定向到 “action” 值。我们将在后面的章节中了解 “action” 属性。

<input type=”reset”>:

<input> 的 “reset” 类型也被定义为一个按钮，但当用户执行点击事件时，默认情况下会重置所有输入的值。

例子：

<form>  
    <label>User id: </label>  
     <input type=\"text\" name=\"user-id\" value=\"user\">  
              <label>Password: </label>  
     <input type=\"password\" name=\"pass\" value=\"pass\"><br><br>   
     <input type=\"submit\" value=\"login\">  
      <input type=\"reset\" value=\"Reset\">  
</form>  

尝试更改用户ID和密码的输入值，然后单击重置，它将重置输入字段为默认值。

<input type=”radio”>:

<input> 的 “radio” 类型定义了单选按钮，允许在一组相关选项之间选择一个选项。一次只能选择一个单选按钮选项。

例子：

<form>  
  <p>Kindly Select your favorite color</p>  
  <input type=\"radio\" name=\"color\" value=\"red\"> Red <br>  
  <input type=\"radio\" name=\"color\" value=\"blue\"> blue <br>  
  <input type=\"radio\" name=\"color\" value=\"green\">green <br>  
  <input type=\"radio\" name=\"color\" value=\"pink\">pink <br>  
  <input type=\"submit\" value=\"submit\">  
</form>  

<input type=”checkbox”>:

<input> 的 “checkbox” 类型显示为可以选中或取消选中的方形框，以选择给定选项。

注意：”radio” 按钮类似于复选框，但两者之间有一个重要区别：单选按钮允许用户一次只能选择一个选项，而复选框允许用户一次选择零到多个选项。

例子：

<form>   
      <label>Enter your Name:</label>  
      <input type=\"text\" name=\"name\">  
      <p>Kindly Select your favourite sports</p>  
      <input type=\"checkbox\" name=\"sport1\" value=\"cricket\">Cricket<br>  
      <input type=\"checkbox\" name=\"sport2\" value=\"tennis\">Tennis<br>  
      <input type=\"checkbox\" name=\"sport3\" value=\"football\">Football<br>  
      <input type=\"checkbox\" name=\"sport4\" value=\"baseball\">Baseball<br>  
      <input type=\"checkbox\" name=\"sport5\" value=\"badminton\">Badminton<br><br>  
      <input type=\"submit\" value=\"submit\">  
  </form>  

<input type=”button”>

<input> 的 “button” 类型定义了一个简单的按钮，可以编程控制任何事件上的功能，例如单击事件。

注意：它主要与 JavaScript 一起使用。

例子：

<form>  
     <input type=\"button\" value=\"Clcik me \" onclick=\"alert(\'you are learning HTML\')\">  
</form>  

注意：在上面的例子中，我们使用了JS的 “alert”，你将在我们的JS教程中了解它。它用于显示弹出窗口。

<input type=”file”>:

具有 “file” 类型的 <input> 元素用于从用户设备存储中选择一个或多个文件。一旦选择了文件，并在提交后，可以使用JS代码和文件API将该文件上传到服务器。

例子：

<form>  
     <label>Select file to upload:</label>  
     <input type=\"file\" name=\"newfile\">  
     <input type=\"submit\" value=\"submit\">  
</form>  



输入 “file” 类型。我们可以选择任何类型的文件，直到我们指定它！所选文件将出现在 “选择文件” 选项旁边。

<input type=”image”>:

<input> 的 “image” 类型用于以图像的形式表示提交按钮。

例子：

<!DOCTYPE html>  
<html>  
<body>  
<h2>Input \"image\" type.</h2>  
<p>We can create an image as submit button</p>  
  <form>  
    <label>User id:</label><br>  
     <input type=\"text\" name=\"name\"><br><br>  
     <input type=\"image\" alt=\"Submit\" src=\"login.png\"  width=\"100px\">  
  </form>  
  
 </body>  
</html>  

HTML5 新增的 <input> 类型元素示例

<input type=”color”>:

<input> 的 “color” 类型用于定义一个包含颜色的输入字段。它允许用户通过浏览器上的视觉颜色界面指定颜色。

注意： “color” 类型仅支持十六进制格式的颜色值，默认值为 #000000（黑色）。

例子：

<form>  
    Pick your Favorite color: <br><br>  
    <input type=\"color\" name=\"upclick\" value=\"#a52a2a\"> Upclick<br><br>  
    <input type=\"color\" name=\"downclick\" value=\"#f5f5dc\"> Downclick  
</form>  



注意： “color” 类型的默认值为 #000000（黑色）。它仅支持十六进制格式的颜色值。

<input type=”date”>:

“date” 类型的 <input> 元素生成一个输入字段，允许用户以给定格式输入日期。用户可以通过文本字段或日期选择器界面输入日期。

例子：

<form>  
    Select Start and End Date: <br><br>  
      <input type=\"date\" name=\"Startdate\"> Start date:<br><br>  
      <input type=\"date\" name=\"Enddate\"> End date:<br><br>  
     <input type=\"submit\">  
</form>  



<input type=”datetime-local”>:

“datetime-local” 类型的 <input> 元素创建一个输入字段，允许用户选择日期以及小时和分钟，不包含时区信息。

例子：

<form>  
    <label>  
      Select the meeting schedule: <br><br>  
      Select date & time: <input type=\"datetime-local\" name=\"meetingdate\"> <br><br>  
    </label>  
      <input type=\"submit\">  
</form>  



<input type=”email”>:

“email” 类型的 <input> 创建一个输入字段，允许用户输入带有模式验证的电子邮件地址。多个属性允许用户输入多个电子邮件地址。

例子：

<form>  
         <label><b>Enter your Email-address</b></label>  
        <input type=\"email\" name=\"email\" required>  
        <input type=\"submit\">  
         <p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p>  
         <label><b>Enter multiple Email-addresses</b></label>  
         <input type=\"email\" name=\"email\"  multiple>  
        <input type=\"submit\">  
</form>     

注意：用户还可以通过逗号或空格分隔输入多个电子邮件地址，

<input type=”month”>:

“month” 类型的 <input> 创建一个输入字段，允许用户轻松输入月份和年份，格式为 “MM, YYYY”，其中 MM 定义月份值，而 YYYY 定义年份值。

例子：

<form>  
    <label>Enter your Birth Month-year: </label>  
    <input type=\"month\" name=\"newMonth\">  
    <input type=\"submit\">  
</form>  



<input type=”number”>:

“number” 类型的 <input> 元素创建一个输入字段，允许用户输入数字值。您还可以使用 “min” 和 “max” 属性限制输入最小值和最大值。

例子：

<form>  
    <label>Enter your age: </label>  
    <input type=\"number\" name=\"num\" min=\"50\" max=\"80\">  
     <input type=\"submit\">  
</form>  



注意：它允许输入范围在50到80之间的数字。如果要输入范围之外的数字，它将显示错误。

<input type=”url”>:

“url” 类型的 <input> 元素创建一个输入字段，允许用户输入URL。

例子：

<form>  
    <label>Enter your website URL: </label>  
    <input type=\"url\" name=\"website\" placeholder=\"http://www.panziye.com\"><br>  
    <input type=\"submit\" value=\"send data\">  
</form>  



<input type=”week”>:

“week” 类型创建一个输入字段，允许用户从下拉日历中选择一周和年份，不包含时区。

例子：

<form>  
    <label><b>Select your best week of year:</b></label><br><br>  
    <input type=\"week\" name=\"bestweek\">  
    <input type=\"submit\" value=\"Send data\">  
 </form>  



<input type=”search”>:

“search” 类型创建一个输入字段，允许用户输入搜索字符串。它们在功能上与文本输入类型相似，但可能具有不同的样式。

例子：

<form>  
    <label>Search here:</label>  
    <input type=\"search\" name=\"q\">  
    <input type=\"submit\" value=\"search\">  
</form>  

<input type=”tel”>:

“tel” 类型的 <input> 元素创建一个输入字段，用于输入电话号码。 “tel” 类型没有默认验证，例如电子邮件，因为电话号码模式可以在全球范围内有所不同。

例子：

<form>  
      <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>  
      <input type=\"tel\" name=\"telephone\" pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\" required>  
      <input type=\"submit\"><br><br>  
  </form>   

注意：这里我们使用了 “pattern” 和 “required” 两个属性，允许用户按给定格式输入号码，并且在输入字段中必须输入号码。