HTML5中的输入元素是什么？

HTML中的input元素用于创建基于web的表单的交互式控件，以接受用户的输入数据。<input>元素只有开始标签，并且只有在<form>标签之间添加<input>元素时，它才能正常工作。

由于属性和输入类型的组合数量巨大，input元素被认为是最强大和最复杂的HTML元素之一。我们有许多属性可以与<input>元素一起使用，但根据需要，一次只能使用一个属性。

电子邮件属性

顾名思义，当我们希望用户在字段中输入电子邮件地址时，可以使用电子邮件属性。电子邮件属性遵循的格式为“%@%”，这意味着你的内容中应该有一个“@”符号。

任何不遵循此格式的内容都会在表单提交期间产生错误。我们可以在input元素中使用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>

搜索属性

搜索属性用于在网页上创建一个搜索框，其中包含需要在网页上搜索的文本。

搜索框通常以圆角显示，并且还显示一个叉号 (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属性代表电话。顾名思义，此属性用于在网页上创建一个字段，用户可以在其中输入手机号码。当用户将鼠标悬停在电话字段上时，会生成一个数字键盘，用于在字段中输入电话号码。

由于世界各地电话号码格式多种多样，因此此属性没有任何特定格式，因此即使用户在字段中输入文本，也不会在表单提交期间产生任何错误。

示例

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

范围属性

范围属性用于在网页上创建一个字段，我们希望用户在其中输入数字。但是，无需手动键入数字，我们使用滑块，滑块具有上限和下限范围，用户可以通过移动滑块来选择该范围内的任何数字。

但是，要使范围属性生效，我们必须同时使用其他几个属性，例如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元素是成为成功网页开发者的重要组成部分。

更新于：2023年2月27日

浏览量：270

启动你的职业生涯

通过完成课程获得认证

开始学习
广告