HTML 表单提交|极客教程

HTML 表单提交

1. 简介

HTML 表单是一种用于收集用户输入数据的标准化工具。通过表单，用户可以输入文本、选择选项、上传文件等。而表单提交是指将用户输入的数据发送给服务器进行处理。本文将详细介绍如何使用 HTML 创建表单，并通过示例演示表单提交的过程。

2. HTML 表单结构

在 HTML 中，表单使用 <form> 标签来定义。以下是一个简单的表单结构示例：

<form action="submit.php" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>

  <input type="submit" value="提交">
</form>

在上述示例中，<form> 标签指定了表单的提交目标 URL（action 属性）和提交方式（method 属性）。<label> 标签用于定义表单字段的标签，并通过 for 属性指定与之关联的输入字段。<input> 标签定义了表单字段，可以使用不同的 type 属性来指定不同类型的表单字段。

需要注意的是，表单结构允许嵌套，你可以在表单中嵌套其他 HTML 元素，如 <fieldset>、<legend>、<select>、<textarea> 等。

3. 表单字段

HTML 提供了多种表单字段供用户输入数据。下面介绍一些常见的表单字段类型及其使用方法。

3.1 文本字段

<input type="text"> 用于接收用户输入的文本，可以指定 value 属性来设置初始值，placeholder 属性来显示输入提示文字。例如：

<label for="username">用户名:</label>
<input type="text" id="username" name="username" value="admin" placeholder="请输入用户名">

3.2 密码字段

<input type="password"> 用于接收用户输入的密码，输入的内容将会被隐藏显示为星号或圆点。例如：

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

3.3 单选框

<input type="radio"> 用于选择单个选项，不同的选项需要使用不同的 name 属性。例如：

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

3.4 复选框

<input type="checkbox"> 用于选择多个选项，每个选项都是独立的。例如：

<label for="hobby-music">音乐:</label>
<input type="checkbox" id="hobby-music" name="hobby" value="music">

<label for="hobby-movie">电影:</label>
<input type="checkbox" id="hobby-movie" name="hobby" value="movie">

3.5 下拉列表

<select> 用于创建下拉列表，<option> 用于定义选项。例如：

<label for="city">城市:</label>
<select id="city" name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

3.6 文件上传字段

<input type="file"> 用于选择并上传文件。例如：

<label for="avatar">头像:</label>
<input type="file" id="avatar" name="avatar">

4. 表单提交

表单提交是指将用户输入的数据发送给服务器进行处理。在 <form> 标签中设置了 action 属性，就可以指定提交目标 URL。同时，通过 method 属性可以指定提交方式，常用的有 GET 和 POST。

4.1 GET 提交

GET 提交是将表单数据附加在 URL 的查询参数中，直接显示在浏览器地址栏上。示例如下：

<form action="submit.php" method="get">
  <!-- 表单字段 -->
  <input type="submit" value="提交">
</form>

4.2 POST 提交

POST 提交是将表单数据放在请求的消息体中，相对于 GET 提交更加安全，且传输的数据量没有上限。示例如下：

<form action="submit.php" method="post">
  <!-- 表单字段 -->
  <input type="submit" value="提交">
</form>

需要注意的是，GET 提交会将数据显示在 URL 上，对于敏感数据（如密码）应使用 POST 提交。

5. 接收表单数据

在服务器端接收表单数据时，可以使用不同的编程语言和框架进行处理。此处以 PHP 为例，演示如何接收表单数据。

<?php
   $name =$ _POST['name'];
   $email =$ _POST['email'];

  // 处理数据...
?>

在上述示例中，$_POST 是 PHP 内置的全局变量，用于存储通过 POST 提交的表单数据。其中 'name' 和 'email' 分别是表单字段的 name 属性。

6. 表单数据验证

为了保证接收到的表单数据的有效性和安全性，通常需要在服务器端对数据进行验证处理。以下是一个简单的表单数据验证示例：

<?php
   $name =$ _POST['name'];
   $email =$ _POST['email'];

  if (empty( $name) || empty($ email)) {
    echo "姓名和邮箱不能为空";
    exit;
  }

  if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo "邮箱格式不正确";
    exit;
  }

  // 处理数据...
?>

在上述示例中，通过使用 PHP 内置的 empty() 函数判断 $name 和 $email 是否为空。同时，使用 filter_var() 函数结合 FILTER_VALIDATE_EMAIL 过滤器验证邮箱的格式。

7. 表单数据存储

在接收和验证表单数据后，通常需要将数据存储到数据库、写入文件或进行其他处理。这里以将表单数据存储到数据库为例进行演示。

<?php
   $name =$ _POST['name'];
   $email =$ _POST['email'];

  // 连接数据库...
   $conn = mysqli_connect("localhost", "root", "password", "database"); // 插入数据...$ sql = "INSERT INTO users (name, email) VALUES (' $name', '$ email')";
  mysqli_query( $conn,$ sql);

  // 关闭数据库连接...
  mysqli_close($conn);
?>

在上述示例中，首先通过 mysqli_connect() 函数连接数据库，然后使用 INSERT INTO 语句将接收到的表单数据插入到名为 users 的数据库表中。最后，使用 mysqli_close() 函数关闭数据库连接。

需要注意的是，上述示例中的数据库连接、表名、字段名等都是简化的示例，实际应用中需要根据自己的情况进行修改。

8. 表单数据处理

除了存储数据，还可以对表单数据进行其他一些处理操作。例如，可以将表单数据发送到指定的邮箱，或者根据表单数据生成一张报告等。

<?php
   $name =$ _POST['name'];
   $email =$ _POST['email'];

  // 邮件配置...
   $to = "admin@example.com";$ subject = "新用户注册";
   $message = "姓名: " .$ name . "\n邮箱: " .  $email;$ headers = "From: webmaster@example.com";

  // 发送邮件...
  mail( $to,$ subject,  $message,$ headers);

  // 生成报告...
   $report = "姓名: " .$ name . "\n邮箱: " .  $email . "\n报告生成时间: " . date("Y-m-d H:i:s"); file_put_contents("report.txt",$ report, FILE_APPEND);
?>

在上述示例中，首先通过将表单数据组装成邮件内容，并配置邮件的收件人、主题、发件人等信息，然后使用 mail() 函数发送邮件。

同时，通过将表单数据组装成报告内容，并使用 file_put_contents() 函数将报告内容追加写入到名为 report.txt 的文件中。