表单元素

• 表单元素
  • • 基本结构
    • 常见的表单元素
    • 示例

form 表单元素在 HTML 中用于收集用户输入的数据，以便将数据发送到服务器进行处理。表单可以包含多种类型的输入元素，如文本字段、密码字段、单选按钮、复选框、下拉选择菜单、提交按钮等。用户填写表单后，通常通过点击提交按钮将表单数据发送到指定的服务器地址。

基本结构

form 元素通过 action 属性指定表单数据提交到的 URL，通过 method 属性指定数据提交的方式（通常是 GET 或 POST）。

<form action="submit_form.php" method="post">
  <!-- 表单元素 -->
  <input type="text" name="username" />
  <input type="submit" value="Submit" />
</form>

在这个例子中，当用户填写完文本字段并点击提交按钮时，表单数据（在这个例子中是 username 字段的值）将通过 POST 方法发送到 submit_form.php 页面。

常见的表单元素

• <input>：用于创建单行文本字段、密码字段、单选按钮、复选框、提交按钮等。
• <textarea>：用于创建多行文本字段，用户可以输入任何字符。
• <button>：用于创建可点击的按钮，它不仅可以用于提交表单，还可以用于执行 JavaScript 代码等。
• <select>：用于创建下拉选择菜单，用户可以从中选择一个选项。
• <label>：用于定义 <input> 元素的标签，改善无障碍性，并允许用户点击标签来选择或激活对应的输入字段。

示例

下面是一个包含多种表单元素的示例：

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="gender">Gender:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br><br>
  <label for="hobbies">Hobbies:</label><br>
  <input type="checkbox" id="reading" name="hobbies" value="Reading">
  <label for="reading">Reading</label>
  <input type="checkbox" id="gaming" name="hobbies" value="Gaming">
  <label for="gaming">Gaming</label><br><br>
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
  </select><br><br>
  <textarea name="message" rows="10" cols="30">
    Enter your message here...
  </textarea><br><br>
  <input type="submit" value="Submit">
</form>

在这个例子中，表单包含了文本字段、电子邮件字段、单选按钮、复选框、下拉选择菜单和多行文本字段，以及一个提交按钮。用户填写完表单后，点击提交按钮会将表单数据发送到指定的 URL 进行处理。