表单元素 - form标签 - 表单的提交方式

前端 - HTML5 《表单元素 - form标签 - 表单的提交方式》

在前端开发中，表单是用户与网页进行交互的重要方式之一。而<form>标签则是用于创建 HTML 表单的核心元素，它允许用户输入数据，并且可以将这些数据提交到服务器进行处理。表单的提交方式主要有两种：GET和POST，下面我们将详细介绍这两种提交方式的特点、使用场景以及演示代码。

1. `<form>`标签基本结构

在介绍提交方式之前，我们先来了解一下<form>标签的基本结构：

<form action="提交的 URL" method="提交方式">
    <!-- 表单元素，如输入框、下拉框等 -->
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <input type="submit" value="提交">
</form>

action属性：指定表单数据提交的目标 URL，也就是服务器端处理表单数据的脚本地址。
method属性：指定表单数据的提交方式，主要有GET和POST两种。

2. GET 提交方式

特点

数据附加在 URL 后面：GET方式会将表单数据附加在action指定的 URL 后面，以键值对的形式出现，多个键值对之间用&符号连接。
数据可见：由于数据附加在 URL 上，所以在浏览器的地址栏中可以直接看到提交的数据，这意味着数据是可见的，不适合传输敏感信息，如密码。
有长度限制：不同的浏览器和服务器对 URL 的长度有一定的限制，因此GET方式提交的数据量也受到限制。
适合获取数据：GET方式通常用于从服务器获取数据，因为它比较简单、快速，并且可以方便地进行书签和分享。

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET 提交方式演示</title>
</head>
<body>
    <form action="example.php" method="GET">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" placeholder="请输入邮箱">
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

当用户点击“提交”按钮时，浏览器会将表单数据附加在 URL 后面，例如：http://example.com/example.php?username=test&email=test@example.com。

3. POST 提交方式

特点

数据放在请求体中：POST方式会将表单数据放在 HTTP 请求体中，而不是附加在 URL 后面，因此数据在浏览器地址栏中不可见。
数据不可见：由于数据放在请求体中，所以比较安全，适合传输敏感信息，如密码。
无长度限制：POST方式提交的数据量没有严格的限制，理论上可以传输大量的数据。
适合提交数据：POST方式通常用于向服务器提交数据，如注册、登录、上传文件等操作。

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POST 提交方式演示</title>
</head>
<body>
    <form action="example.php" method="POST">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

当用户点击“提交”按钮时，浏览器会将表单数据放在 HTTP 请求体中发送到服务器，在浏览器地址栏中不会显示表单数据。

4. GET 和 POST 提交方式对比总结

对比项	GET	POST
数据位置	附加在 URL 后面	放在请求体中
数据可见性	可见	不可见
长度限制	有	无
安全性	低，不适合传输敏感信息	高，适合传输敏感信息
使用场景	获取数据	提交数据

5. 总结

在实际开发中，我们需要根据具体的需求选择合适的表单提交方式。如果只是简单地获取数据，并且数据量较小，不包含敏感信息，那么可以选择GET方式；如果需要提交数据，尤其是包含敏感信息或数据量较大时，建议选择POST方式。通过合理使用<form>标签的method属性，我们可以更好地实现用户与服务器之间的数据交互。

希望本文对你理解 HTML5 表单的提交方式有所帮助！

表单元素 - form标签 - 表单的提交方式

前端 - HTML5 《表单元素 - form标签 - 表单的提交方式》

1. <form>标签基本结构

2. GET 提交方式

特点

演示代码

3. POST 提交方式

特点

演示代码

4. GET 和 POST 提交方式对比总结

5. 总结

1. `<form>`标签基本结构