HTML表单介绍

HTML表单提供了一种简单而强大的方式，可以让用户与网站互动并提交数据。Web开发人员可以使用HTML表单来获取用户输入，并将输入数据发送到Web服务器。

HTML表单的基本结构

在HTML中，表单是使用<form>元素定义的。<form>元素包含用于收集用户输入的输入元素，例如文本框、单选按钮、复选框、下拉列表等。

以下是一个简单的HTML表单示例：

<form action="/submit-form" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>

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

  <label for="location">Location:</label>
  <select id="location" name="location">
    <option value="usa">USA</option>
    <option value="uk">UK</option>
    <option value="canada">Canada</option>
  </select><br>

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

在上面的示例中，<form>元素有两个主要属性：

• action：指定表单数据将被发送到的目标URL。
• method：指定要使用的HTTP方法。常见的方法是GET和POST。

表单中的每个输入元素都是使用相应的HTML元素定义的。在上面的示例中，我们使用了文本框、电子邮件输入框、单选按钮、下拉列表和提交按钮。

表单中的输入元素

以下是表单中最常用的输入元素：

• input：用于创建各种输入元素，例如文本框、单选按钮、复选框等。
• textarea：用于创建多行文本框。
• select和option：分别用于创建下拉列表和选项。
• button：用于创建自定义按钮。
• label：用于将文本绑定到表单元素。

表单中的服务器端处理

表单数据通常被发送到服务器进行处理。服务器端代码可以使用各种编程语言编写，例如PHP、Python、Ruby等。

在服务器端，可以通过读取表单数据来执行各种操作，例如：

• 存储表单数据到数据库中。
• 发送电子邮件或短信通知。
• 生成PDF或其他文档。
• 调用其他API或微服务。

结论

HTML表单是Web开发中最基本的组件之一。它们提供了一种简单而强大的方式使用户与网站互动并收集数据。学习HTML表单是网页开发的必备技能之一。