在 HTML 中 <input type=" "> 是 HTML 表单的一个重要元素。输入元素的“type”属性可以是多种类型，它定义了信息字段。如<input type="text" name="name">给出了一个文本框。

以下是 HTML 的所有类型 <input> 元素的列表。

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

HTML5 在 <input> 元素上添加了新类型。以下是 HTML5 元素类型列表

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

下面是关于 <input> 元素类型的描述和例子。

1. <input 类型="text">：

“文本”类型的 <input> 元素用于定义单行输入文本字段。

例子：

<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>

输出：

1.png

2. <input 类型=“password”>：

“密码”类型的 <input> 元素允许用户在网页中安全地输入密码。密码字段中输入的文本转换为“*”或“.”，这样就无法被其他用户读取。

例子：

<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>

输出：

2.png

3. <input 类型=“submit”>：

“submit”类型的 <input> 元素定义了一个提交按钮，用于在“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>

输出：

3.png

4. <input 类型="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>

输出：

4.png

5. <input 类型="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>

输出：

5.png

6. <input 类型="checkbox">：

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

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

例子：

<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>

输出：

6.png

7. <input 类型=“button”>：

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

注意：它主要适用于 JavaScript。

例子：

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

输出：

7.png

8. <input 类型=“file”>：

类型为“文件”的 <input> 元素用于从用户设备存储中选择一个或多个文件。选择文件并提交后，可以借助 JS 代码和文件 API 将此文件上传到服务器。

例子：

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

输出：

8.png

9. <input 类型=“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> types 元素

1. <input 类型="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>

输出：

9.png

2. <input 类型="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>

输出：

10.png

3. <input 类型="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>

输出：

11.png

4. <input 类型="email">:

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

例子：

<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>

输出：

12.png

5. <input 类型="month">:

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

例子：

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

输出：

13.png

6. <input 类型="number">：

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

例子：

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

输出：

14.png

7. <input 类型=“url”>：

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

例子：

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

输出：

15.png

8. <input 类型="week">:

<input> 类型 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>

输出：

16.png

9. <input 类型=“search”>：

<input> 类型“search”创建一个输入字段，允许用户输入搜索字符串。这些在功能上与文本输入类型对称，但样式可能不同。

例子：

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

输出：

17.png

10.<input 类型=“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>

输出：

18.png

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想