表单的使用

在网页中，表单的作用很重要，主要负责收集浏览者的相关数据。例如注册、登录、调查表、留言表、新闻发布等都会用到表单。凡是用户要输入数据然后点击按钮发到服务器的地方都可能用到表单。

比如QQ注册页面：https://ssl.zc.qq.com/v3/index-chs.html?type=0

表单使用 <form></form> 标记：

<form action="url" method="get|post" enctype="mime">
</form>

action：表示表单提交给哪个URL地址，该地址会获得提交的数据（具体由后端动态语言处理）
method：提交的方法，有 get 或 post 两类
- get 提交：浏览器的URL地址栏会显示提交的数据，且有长度限制
- post 提交：不会在URL地址栏显示数据，无长度限制
enctype：提交给服务器时的互联网媒体形式（如文件上传需设为 multipart/form-data）

搜索示例（get提交）：

<!DOCTYPE html>
<html>
<head>
    <title>标题栏</title>
</head>
<body>
    <form action="http://www.google.com/s" method="POST">
        <input type="text" name="wd"/>
        <p>这个不是表单元素</p>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

登录示例（post提交）：

<!DOCTYPE html>
<html>
<head>
    <title>标题栏</title>
</head>
<body>
    <form action="http://www.google.com/login" method="POST">
        <input type="text" name="name"/><br/>
        <input type="password" name="password"/><br/>
        <input type="submit" value="登录"/>
    </form>
</body>
</html>

如果用 post 方式提交，虽然在地址栏看不到数据，但通过浏览器调试工具（F12）的抓包功能，仍可以看到 post 提交的数据。如果换成 get 方式，密码会出现在地址栏，很不安全：

纯文本纯文本http://www.google.com/login?name=ddddd&password=11111111

补充说明

表单内部可包含 <input>、<textarea>、<select> 等表单控件
<input type="password"> 输入内容会被掩码显示为圆点
get 提交适合非敏感数据（如搜索），post 提交适合敏感数据（如登录、注册）
post 数据不在URL中，但仍可通过开发者工具查看，敏感信息仍需配合 HTTPS 加密传输
enctype 默认值为 application/x-www-form-urlencoded，文件上传时需改为 multipart/form-data

Previous: 合并单元格

Next: 表单的基本元素-文本框

表单的使用

补充说明

发表回复 取消回复

发表回复取消回复