HTML常见标签——表单form标签

<form> 标签用于为用户输入创建HTML表单。表单能够包含input元素，比如文本字段、复选框、单选按钮、提交按钮等，还可以包含menus、textarea等元素。

以下是一些使用 <form> 标签的示例：

1. 创建一个简单的登录表单：

<form action="/submit-form" 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>
  <input type="submit" value="Submit">
</form>

在这个例子中，表单包含两个文本输入字段和一个提交按钮。当用户填写信息并点击提交按钮后，表单数据会被发送到服务器上的 "/submit-form" 路径，使用POST方法。

2. 创建一个带有单选按钮和下拉菜单的表单：

<form action="/submit-form" method="get">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="country">Country:</label><br>
  <select id="country" name="country">
    <option value="canada">Canada</option>
    <option value="usa">USA</option>
    <option value="uk">UK</option>
  </select><br><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br><br>
  <input type="submit" value="Submit">
</form>

在这个例子中，表单包含一个文本输入字段、一个下拉选择框、两个单选按钮和一个提交按钮。当用户选择其选项后并点击提交按钮，表单数据会通过GET方法发送到服务器。

3. 创建一个带有隐藏域的表单：

<form action="/submit-form" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <input type="hidden" id="session_id" name="session_id" value="123456789">
  <input type="submit" value="Submit">
</form>

在这个例子中，表单包含一个文本输入字段和一个隐藏域。隐藏域通常用于存储不需要用户直接编辑的数据，如会话ID。当用户点击提交按钮，表单数据会通过POST方法发送到服务器。

以上就是 <form> 标签的一些基本用法。在实际开发中，还可以使用 <form> 标签的其他属性，如 novalidate（禁用表单的验证功能），autocomplete（设置表单的自动完成功能）等。