HTML5 中的输入元素是什么
HTML 中的输入元素用于创建交互式控件，用于基于 Web 的表单接收用户数据。<input> 元素只有一个开始标签，并且只有将 <input> 元素添加到 <form> 标签之间才能正常工作。
输入元素被认为是最强大、最复杂的 HTML 元素之一，因为它拥有大量的属性和输入类型组合。<input> 元素可以使用多个属性，但根据需要一次只能使用一个属性。
电子邮件属性
顾名思义，当我们希望用户在字段内输入电子邮件地址时，会使用电子邮件属性。电子邮件属性遵循的格式是"%@%"，这意味着您的内容中应该有一个"at the rate"符号。
任何其他不符合格式的内容都会在表单提交时产生错误。我们可以在输入元素中使用 multiple 属性，允许在同一字段中输入多个电子邮件地址。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Email attribute</h1>
<form action="#">
<label for="email">Enter your email address:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
</body>
</html>
Search 属性
Search 属性用于在网页上创建一个搜索框，其中包含需要在网页上搜索的文本。
搜索框通常呈现圆角，并且会显示一个十字符号 (X) 来删除搜索框中的所有内容。但为了使搜索属性发挥作用，我们应该始终有一个与搜索框链接的提交按钮。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Search Attribute</h1>
<form action="#">
<label for="Text to be searched">Enter Text:</label>
<input type="search" id="search" name="search">
<input type="submit">
</form>
</body>
</html>
Tel 属性
Tel 属性代表 Telephone。顾名思义，此属性用于在网页上创建一个字段，供用户输入手机号码。当用户将鼠标悬停在电话号码字段上时，将生成一个数字键盘，用于在字段中输入电话号码。
由于世界各地的电话号码格式多种多样，我们没有针对此属性的任何特定格式，因此即使用户在字段中输入了文本，也不会在表单提交时收到任何错误。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Telephone attribute</h1>
<form action="#">
<label for="phone">Enter a phone number:</label><br>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}- [0-9]{2}-[0-9]{3}" required>
<input type="submit">
</form>
</body>
</html>
URL 属性
URL 属性用于在网页上创建一个字段，接受用户输入的 URL。URL 字段仅适用于 URL 地址，如果未输入协议(例如 http:)或用户输入的 URL 格式错误，则会生成错误。
URL 字段通常用于表单中，我们希望用户分享 Instagram、Linkedin 等社交媒体账号的链接，或用于分享某些项目链接。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Display a URL Input Field</h1>
<form action="#">
<label for="Instagram">Instagram Link:</label>
<input type="url" id="instagram" name="instagram">
<input type="submit"><br><br>
<label for="Linkedin">Linkedin Link:</label>
<input type="url" id="linkedin" name="linkedin">
<input type="submit"><br><br>
<label for="Twitter">Twitter Link:</label>
<input type="url" id="twitter" name="twitter">
<input type="submit">
</form>
</body>
</html>
Range 属性
Range 属性用于在网页上创建一个字段，供用户输入数字。但我们不使用手动输入数字，而是使用滑块，滑块具有上下限范围，用户可以通过移动滑块选择该范围内的任意数字。
但要使范围属性发挥作用，我们必须同时使用几个属性，例如 min(范围的起始值)、max(范围的终止值)、step(步进间隔)和 value(默认值)。
范围属性在电商网站中被广泛使用，它用于在筛选部分创建滑块，以便用户设置价格范围并筛选出产品。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Range attribute</h1>
<form action="#">
<label for="Price">Price(between 0 to 1000):</label>
<input type="range" id="price" name="price" min="0" max="1000" step="50" value="500">
<input type="submit">
</form>
</body>
</html>
除此之外，我们还有 number 属性，用于创建一个接受数字输入的字段。checkbox 属性用于创建一个字段，让用户从给定的复选框中选择一个选项。date 属性用于创建一个接受日期输入并遵循 dd-mm-yyyy 格式的字段，等等。
结论
总而言之，我们可以在 input 元素中同时使用所有这些属性来增强网页的功能。这些属性不仅增强了网页的功能，还提供了内置的错误验证功能，例如电子邮件中的错误验证;我们有一种特定的格式来检查电子邮件的有效性。
同样，在其他属性中，我们有不同的格式，只允许将有效数据发送到服务器。通过正确组合这些元素，网站可以变得更具互动性，更能吸引用户。因此，了解如何使用 input 元素是成为一名成功的 Web 开发人员的关键要素。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
