HTML Form表单提交

一、基本概念

HTML Form指的是一个包含表单元素的区域，用户可以在该区域内输入、选择、提交数据等操作。Form表单通常用于用户提交数据到Web服务器。

Form表单通过向服务器发送HTTP POST或GET请求来提交数据。POST和GET请求的区别在于HTTP请求方式不同，POST请求提交的数据会被包含在HTTP请求体中，而GET请求提交的数据则会被包含在HTTP请求URL中。

Form表单可以包含多种类型的表单元素，如文本输入框、密码框、单选按钮、复选框、下拉框、上传文件等。表单元素通过name属性与提交的数据关联。

二、表单元素

1、文本输入框

文本输入框用于接收用户的文本输入，以便进行后续的表单提交。文本输入框的标签为，type属性设置为”text”。以下是一个简单的文本输入框示例：

<form>
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

在上述示例中，label标签为文本输入框添加了一个描述，for属性与文本输入框的id属性关联，表示该标签描述的是哪个表单元素。

2、密码框

密码框用于接收用户的密码输入，输入内容会以星号或圆点等方式隐藏。密码框的标签为，type属性设置为”password”。以下是一个简单的密码框示例：

<form>
  <label for="password">密码</label>
  <input type="password" id="password" name="password">
</form>

3、单选按钮

单选按钮用于提供多个选项中的单个选项，用户只能选择其中一个选项。单选按钮的标签为，type属性设置为”radio”。单选按钮需要使用同一个name属性名称，但不同的value属性区分不同的选项。以下是一个简单的单选按钮示例：

<form>
  <label for="gender-male">男性</label>
  <input type="radio" id="gender-male" name="gender" value="male">
  <label for="gender-female">女性</label>
  <input type="radio" id="gender-female" name="gender" value="female">
</form>

4、复选框

复选框用于提供多个选项中的多个选项，用户可以选择其中多个选项，或者不选择任何选项。复选框的标签为，type属性设置为”checkbox”。复选框需要使用同一个name属性名称，但不同的value属性区分不同的选项。以下是一个简单的复选框示例：

<form>
  <label for="fruit-apple">苹果</label>
  <input type="checkbox" id="fruit-apple" name="fruit" value="apple">
  <label for="fruit-banana">香蕉</label>
  <input type="checkbox" id="fruit-banana" name="fruit" value="banana">
  <label for="fruit-orange">橙子</label>
  <input type="checkbox" id="fruit-orange" name="fruit" value="orange">
</form>

5、下拉框

下拉框用于提供一个下拉选项列表，其中只能选择其中一个选项。下拉框的标签为，需要与标签一起使用，option标签的value属性值与提交时的值相关联，同时option标签的文本内容会显示在下拉列表中。以下是一个简单的下拉框示例：

<form>
  <label for="city">城市</label>
  <select id="city" name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
    <option value="hangzhou">杭州</option>
  </select>
</form>

6、文件上传

文件上传用于从用户本地计算机向服务器上传文件。文件上传的标签为，type属性设置为”file”。服务器通常需要对上传的文件进行一些安全确认，所以需要在form标签上添加enctype属性，值为”multipart/form-data”。以下是一个简单的文件上传示例：

<form enctype="multipart/form-data">
  <input type="file" id="file" name="file">
  <input type="submit" value="上传">
</form>

三、Form提交方式

1、GET提交方式

GET提交方式将表单数据通过URL参数传递给服务器，数据会显示在URL地址栏中，相比POST提交方式来说更简单、更快捷。GET提交方式适用于提交数据量较小、不需要保密的场合。

<form method="get" action="submit.php">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

2、POST提交方式

POST提交方式将表单数据以HTTP请求体的方式传递给服务器，数据不会显示在URL地址栏中，相比GET提交方式来说更安全、更适合提交大量数据和需要保密的场合。

<form method="post" action="submit.php">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

四、表单验证

表单验证是指在提交表单数据之前对数据进行检查，以确保数据的正确性和合法性。

1、客户端表单验证

客户端表单验证是指在用户提交表单之前就对表单数据进行检查，可以避免不必要的网络请求，提高用户体验。客户端表单验证通常使用JavaScript编写。

<form onsubmit="return validate()">
  <input type="text" id="username" name="username">
  <input type="submit" value="提交">
</form>
<script>
function validate() {
  var username = document.getElementById("username").value;
  if (username === "") {
    alert("请输入用户名");
    return false;
  }
}
</script>

2、服务器端表单验证

服务器端表单验证是指在服务器接收到表单数据之后对数据进行检查，以确保数据的正确性和合法性。服务器端表单验证通过对数据源进行验证，从根本上避免了数据篡改。

if (!isset($_POST["username"]) || empty($_POST["username"])) {
  die("请输入用户名");
}

五、总结

HTML Form表单是Web开发中必不可少的组件之一，它可以通过提供多种元素收集用户输入，并将用户数据传到服务器上。在表单提交过程中，可以使用GET或POST方式提交数据，并进行客户端和服务端的验证以保证数据的正确性和安全性。