许多网站和应用需要直接收集用户数据，并且它们通过使用表单页面来进行。登录或登录页面就是这样的示例。输入字段是形式的基石，从文本到复选框等等。最终，了解各种类型的输入标签及其用法对于开发人员和设计师来说是一项方便的必需品。到本文结尾，您应该熟悉可用的HTML输入类型及其功能的数量。
什么是输入元素？
输入元素是一个HTML元素，可为数据插入提供字段。这是一个自封标签，具有与之关联的许多属性。当前，有23种具有不同功能的输入类型。通常，它总是用标签元素来识别，因为它们与形式页面交手。
另外，就像没有直接文本内容的每个元素一样，输入元素默认为预设类型：text。
输入类型
如前所述，当前有22种输入类型，每种类型具有不同的功能和用例。它们没有特别的顺序：
文本
从上方重申，这是输入元素的默认属性值。它定义了一个单线文本字段，即无线断裂。因此，除非建立最大值，否则文本将继续以一行至任何长度。以下是注册页面的组件之一的典型示例。
提交
提交类型是不言自明的，因为它只是显示一个专门用于提交的按钮。通常在用户填充其他输入类型的相关数据后启用它。此外，按钮上显示的文本以提供表单目的的上下文，可以使用“值”属性进行自定义，例如：
<input type="submit" value="Sign Up">
其默认值是“提交”。
密码
密码输入类型创建一个密码字段，可以安全地输入敏感信息（例如密码）。输入此字段的字符将被星号或点掩盖，隐藏用户输入的实际密码。因此，它有助于防止撬动眼睛看到密码，提供附加的安全层。
电子邮件
电子邮件输入类型专门为输入电子邮件地址创建一个字段。此输入类型通常经过验证，以确保输入的电子邮件的格式正确。没有添加的属性，它可以轻松传递文本类型输入。
数字
数字输入类型定义了一个字段，特别是用于输入数值。向上和向下箭头以增加或减少数据字段之后的值。它以“年龄”标签显示在下面。
复选框
复选框输入类型将显示一个可切换的ON/OFF控件，以显示单个选项的形式。有时，它代表用户可以选择一个或多个选项的多个选项。其用例的一个示例是表格的“条款和条件”接受部分，例如：
电话
使用此输入类型，用户可以输入电话号码。选择后，它显示一个数字键盘，以易于输入。它类似于文本输入类型，如W3C所述，“与URL和电子邮件类型不同，电话类型不强制执行特定的语法。这是有意的；在实践中，电话号码字段往往是自由形式的字段，因为有多种有效的电话号码。”
收音机
无线电输入类型定义了一组形式中的一组互斥选项的可切换开/关控。一次只能选择组中的一个选项，但默认情况下不能选择一个选项。虽然，要使收音机充当组，它们都必须包含一个名称属性并共享相同的值。喜欢：
日期
日期输入类型定义了选择日期（年，月和日）的字段。根据用户的设备和浏览器，将显示一个日期选择器日历，从而使用户更容易选择日期。此外，返回的日期的格式可使用“ min”和“ max”属性控制。
搜索
搜索输入类型建立了搜索字段。一目了然，它的功能与“文本”输入类型相同，用户可以输入搜索查询。搜索字段的外观可能取决于用户的设备和浏览器，但通常包括样式以表明它是一个搜索字段，例如放大玻璃图标。
时间
此输入类型提供了仅接受时间值的字段。它为用户提供了一个时间选择器接口，以使选择时间更轻松。可以使用“步骤”属性来控制返回的时间的格式。
URL
URL输入类型指定用于输入URL的字段。像搜索属性一样，它类似于最小检查的文本输入类型。一些设备和浏览器可能包括其他验证，以确保输入值是有效的URL。
图像
图像输入类型将图像创建为提交按钮。当用户单击图像时，与之关联的表格将提交。使用“ SRC”属性指定图像的来源。
约会时间
DateTime输入类型创建一个字段，以选择日期和时间值。它为用户提供了日期和时间选择器接口，以使选择两个值更容易。返回的日期和时间的格式基于UTC（通用时间协调）时区。
Datetime-Local
类似于DateTime输入，DateTime-Local定义了用于选择日期和时间值的字段，但时间值是特定于用户本地时区的字段。它为用户提供了日期和时间选择器接口，以使选择两个值更容易。返回的日期和时间的格式可以使用“ min”和“ max”属性控制。
月
月输入类型用于选择一个月和年价值。它为用户提供一个月的选择器接口，以使选择更容易。
星期
您可能已经猜到的是，本周输入类型定义了选择一周和年价值的字段。它提供了一个星期的选择器接口。
按钮
按钮类型在表单上创建一个可单击的按钮。在自动表单提交情况下，它与提交类型不同，但是它可以与JavaScript并肩作用以创建动态行为。可以使用“值”属性自定义按钮上显示的文本。
颜色
颜色类型在表单上创建颜色拾取器控件，从而允许用户选择颜色。这种类型在现代浏览器中支持，并提供了用于颜色选择的图形接口。默认值为＃000000，颜色黑色的十六进制代码。
文件
文件类型在表单上创建文件输入控件，使用户可以选择一个用于上传的文件。表单执行特定的操作，即将文件发送到服务器，并使用选定的文件信息。该文件类型还允许通过设置“多个”属性一次选择多个文件。
隐
隐藏的类型创建了一个表单字段，该字段对用户不可见，但由表单识别。这种类型对于存储需要通过表单处理但不需要可见性的信息很有用。
范围
范围类型在表单上创建一个滑动控件，使用户可以在定义的值范围内选择一个值。 “ min”和“ max”属性定义它，您可以使用“ value”属性设置其默认值。
重置
重置类型创建一个按钮，该按钮在单击时将所有表单字段重置为其默认值。可以使用“值”属性自定义按钮上显示的文本。
结论
HTML中的输入类型提供了一种向用户创建和呈现不同类型表单字段的方法。每种输入类型都有特定的目的，并提供独特的用户体验。通过在您的表格中利用这些输入类型，您可以确保用户可以输入正确的数据类型，从而导致更准确，更有效的数据收集。