HTML5 输入元素

HTML中的输入元素用于为基于网络的表单创建交互式控件，以接受来自用户的数据。 <input>元素只有开口标签，只有当我们将其添加到<form>标签之间时，<input>元素才能发挥作用。

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

电子邮件属性

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

任何其他不符合格式的内容都会在表单提交时产生错误。我们可以在输入元素中使用多个属性来允许在同一个字段中输入多个电子邮件地址。

例子

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

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>

除了这些，我们还有数字属性，它可以创建一个接受数字输入的字段；复选框属性，当我们想创建一个用户必须从给定的复选框中选择一个选项的字段时，就会用到它；日期属性，可以创建一个接受日期输入并遵循dd-mm-yyy格式的字段，等等。