HTML 的 <input> 元素支持多种类型，这些类型决定了用户如何与表单控件进行交互。以下是 HTML5 中 <input> 元素的 23 种类型，以及每种类型的代码示例和效果图的描述（请注意，由于文本的限制，我无法直接在这里提供效果图，但您可以根据代码在您的浏览器中查看效果）。
1.text - 默认的输入类型，用于单行文本输入。
<input type="text" name="username" placeholder="Enter your username"> |
2.password - 隐藏输入的文本。
<input type="password" name="pwd" placeholder="Enter your password"> |
3.submit - 定义提交按钮。点击按钮会提交表单。
<input type="submit" value="Submit"> |
4.reset - 定义重置按钮。点击按钮会重置表单中的所有输入字段。
<input type="reset" value="Reset"> |
5.button - 定义一个可点击的按钮。
<input type="button" value="Click me"> |
6.radio - 定义单选按钮。
<input type="radio" id="male" name="gender" value="male"> |
|
<label for="male">Male</label><br> |
|
|
<label for="female">Female</label> |
7.checkbox - 定义复选框。
<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> |
8.file - 用于文件上传。
<input type="file" id="myFile" name="filename"> |
9.hidden - 定义隐藏输入字段。
|
10.image - 定义图像形式的提交按钮。点击图像会提交表单。
|
11.color - 用于选择颜色。
<input type="color" name="favcolor"> |
12.date - 用于选择日期。
<input type="date" name="bday"> |
13.month - 用于选择月份和年份。
<input type="month" name="bmonth"> |
14.week - 用于选择周和年份。
<input type="week" name="bweek"> |
15.time - 用于选择时间（小时、分钟、秒钟、AM/PM）。
<input type="time" name="usr_time"> |
16.datetime-local - 用于选择日期和时间（年、月、日、小时、分钟、秒钟）。
<input type="datetime-local" name="bdt"> |
17.number - 用于输入数字。
<input type="number" name="quantity" min="1" max="5"> |
18.range - 用于在一定范围内输入数字。
<input type="range" name="points" min="1" max="10"> |
19.email - 用于电子邮件地址的输入。
<input type="email" name="useremail" placeholder="Enter your email"> |
20.search - 用于搜索字段。在某些浏览器中，它可能显示为圆角。
<input type="search" name="q" placeholder="Search..."> |
21.tel - 用于电话号码的输入。它不会进行任何验证，只是提供一种语义上的提示。
<input type="tel" name="usrtel" placeholder="Enter your phone number"> |
22.url - 用于 URL 的输入。
<input type="url" name="website" placeholder="Enter your website"> |
23.datalist - 与 <input> 元素配合使用的预定义
这里有一个简单的例子来说明 <input> 与 <datalist> 的结合使用：
<input list="browsers" name="browser"> |
|
<datalist id="browsers"> |
|
<option value="Internet Explorer"> |
|
<option value="Firefox"> |
|
|
<option value="Opera"> |
|
<option value="Safari"> |
|
</datalist> |
在这个例子中，<input> 元素的 list 属性引用了 <datalist> 元素的 id，这样当用户在 <input> 中键入时，就会显示出 <datalist> 中定义的浏览器选项列表。
因此，严格来说，第23个并不是 <input> 的一个独立类型，而是与 <datalist> 结合使用的一种功能或模式。在 HTML5 的 <input> 元素规范中，并没有明确列出“第23个类型”，因为 <datalist> 不是 <input> 的一个类型属性，而是与之配合使用的另一个元素。
