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>
	<input type="radio" id="female" name="gender" value="female">
	<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 - 定义隐藏输入字段。

<input type="hidden" name="hiddenfield" value="somedata">

10.image - 定义图像形式的提交按钮。点击图像会提交表单。

<input type="image" src="submit.png" alt="Submit">

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="Chrome">
	<option value="Opera">
	<option value="Safari">
	</datalist>

在这个例子中，<input> 元素的 list 属性引用了 <datalist> 元素的 id，这样当用户在 <input> 中键入时，就会显示出 <datalist> 中定义的浏览器选项列表。

因此，严格来说，第23个并不是 <input> 的一个独立类型，而是与 <datalist> 结合使用的一种功能或模式。在 HTML5 的 <input> 元素规范中，并没有明确列出“第23个类型”，因为 <datalist> 不是 <input> 的一个类型属性，而是与之配合使用的另一个元素。