HTML表单标签

这篇文章距离上次修改已过221天，其中的内容可能已经有所变动。

HTML表单是用于收集用户输入的，下面是一些常用的表单标签：

<form>：定义整个表单区域。
<input>：用于收集用户输入信息，可以通过type属性定义不同的输入类型。
<label>：定义 <input> 元素的标签，可以增强可用性。
<button>：定义一个可点击的按钮。
<select>：创建下拉列表。
<option>：定义下拉列表的一个选项。
<textarea>：定义多行文本输入控件。

以下是一个简单的HTML表单示例，包含文本输入、密码输入、复选框、单选按钮、下拉列表和文本区域：

<!DOCTYPE html>
<html>
<body>

<h2>HTML Form Example</h2>

<form action="/submit_page" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>

  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>

  <label for="password">Password:</label><br>
  <input type="password" id="password" name="pwd"><br><br>

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

  <label for="gender">Gender:</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br><br>

  <label for="cars">Choose a car:</label><br>
  <select id="cars" name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <label for="subject">Subject:</label><br>
  <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea><br>

  <input type="submit" value="Submit">
</form>

</body>
</html>

这个表单包含了各种输入类型，并且每个输入字段都有对应的标签，以提高可用性。当用户填写完表单并点击提交按钮时，表单数据会被发送到服务器上的指定页面（在这个例子中是 "/submit\_page"）。这个过程需要 action 和 method 属性来指定行为。method 属性通常是 "get" 或 "post"。

评论已关闭

推荐阅读