HTML表单的method属性用于指定表单数据提交到服务器时使用的HTTP请求方法，最常用的两种取值是get和post，不同的取值对应不同的数据传输逻辑和适用场景。
method属性的基本用法
method是<form>标签的可选属性，默认取值为get，开发者可以根据需求手动设置为get或post，基本语法如下：
<!-- 使用get方式提交表单 -->
<form action="/submit" method="get">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="提交">
</form>
<!-- 使用post方式提交表单 -->
<form action="/submit" method="post">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="提交">
</form>
get与post的核心区别
1. 数据传输位置不同
get请求会将表单数据拼接在请求的URL后面，以查询字符串的形式传递，比如用户输入用户名为admin，密码为123456，提交后的URL会变成/submit?username=admin&password=123456。而post请求会将表单数据放在HTTP请求的消息体中，不会显示在URL里。
2. 数据长度限制不同
get请求受浏览器和服务器对URL长度的限制，通常只能传递少量数据，不同浏览器的限制略有差异，一般不超过2KB。post请求没有固定的长度限制，理论上可以传递大量数据，适合提交文件、长文本等场景。
3. 安全性差异
get请求的数据会暴露在URL中，浏览器会缓存请求记录，服务器日志也会记录完整的URL，因此不适合传递敏感信息，比如密码、身份证号等。post请求的数据在请求体中，相对更隐蔽，不过如果没有配合HTTPS加密，数据依然可能被抓包获取，所以敏感信息提交必须同时使用HTTPS。
4. 幂等性不同
get请求是幂等的，多次执行相同的get请求，对服务器资源的影响是一致的，不会产生额外副作用，适合查询类操作。post请求不是幂等的，多次提交相同的post请求，可能会导致服务器重复创建资源、重复修改数据等问题，比如多次提交订单会生成多个订单。
两种提交方式的适用场景
- 优先选择get的场景：表单用于查询数据、筛选数据，不需要传递敏感信息，且数据量较小的情况，比如搜索框、商品筛选表单等。
- 优先选择post的场景：表单用于提交数据、修改服务器资源，需要传递敏感信息，或者数据量较大的情况，比如登录表单、注册表单、文件上传表单、发布文章表单等。
实际开发注意事项
在使用method属性时，还需要注意以下几点：
- 如果表单中包含文件上传字段（<input type="file">），必须将method设置为post，同时设置
enctype="multipart/form-data"，否则文件无法正确提交。 - 对于需要防止重复提交的场景，即使使用post方式，也需要在后端增加重复提交的校验逻辑，比如使用令牌机制，避免用户多次点击提交按钮导致数据重复。
- 不要为了隐蔽数据而盲目使用post，对于普通的非敏感查询场景，使用get更符合HTTP协议的设计规范，也便于用户收藏带参数的页面。
简单示例对比
以下是通过JavaScript模拟两种请求方式的简单示例，帮助理解数据传输的差异：
// 模拟get请求提交表单数据
function submitByGet() {
const username = document.querySelector('input[name="username"]').value;
const password = document.querySelector('input[name="password"]').value;
// 数据拼接在URL后
const url = `/submit?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;
window.location.href = url;
}
// 模拟post请求提交表单数据
function submitByPost() {
const username = document.querySelector('input[name="username"]').value;
const password = document.querySelector('input[name="password"]').value;
const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 数据放在请求体中
const data = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;
xhr.send(data);
}