需求
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>day02/06-表单-登录页面.html</title> </head> <body> <!-- 介绍：表单用<form>标签表示，内部包含<input>、<select>、<textarea>等表单项标签。 作用：收集用户信息，提交用户数据。 form标签属性 action：指定表单提交的URL路径（服务器地址，将数据提交到哪个服务器上） method: 设置提交数据给服务器的方式（请求方式） 方式1：get，默认方式 特点1：路径后面明文传递数据 ，数据不安全，不适合传递敏感数据，例如：url?username=heima&pwd=123456 特点2：传递数据大小受浏览器限制，一般限制1~18KB不等 应用场景：传输数据量小，不敏感数据，速度快 方式2：post， 特点1：通过请求体传递，使用浏览器抓包工具查看，传递数据相对安全，适合传递敏感数据 使用浏览器抓包工具查看步骤：浏览器上鼠标右键->network->输入数据提交表单->network里面查看请求地址点击（ALL） ->PayLoad->可以看到请求数据 特点2：传递数据大小没有限制 应用场景：传输数据量大，敏感数据，速度慢 表单项：就是放在form里面的元素，具体表单项有输入框、按钮等 <input>系列：各种各样的输入框 <input type="text" name="给表单元素起名字"> 单行文本输入框 给表单元素起名字目的是给采集到的数据命名，服务器根据名字区分和接收不同的数据 <input type="password"> 密码框，输入的数据是不可见的 <input type="submit"> 提交按钮，点击提交触发让表单中所有采集的数据（表单项）提交给action指定的服务器地址 --> <form action="https://www.baidu.com" method="post"> <p>账号：<input type="text" name="username"></p> <p>密码：<input type="password" name="pwd"></p> <p><input type="submit" value="登录"></p> </form> </body> </html>
