定义 :<form>
元素定义了一个表单,用户可以在表单中输入数据,这些数据可以被提交到服务器。
属性:
-
action
:指定表单提交时的目标URL(服务器端脚本的地址)。 -
method
:定义提交表单时使用的HTTP方法(通常是GET
或POST
)。-
GET 方法
-
数据传输:表单数据附加在URL后面,形成查询字符串(如
?name=value&age=30
)。由于URL长度限制,GET
请求不适合传输大量数据。 -
缓存:
GET
请求可以被缓存,这意味着浏览器可以存储请求的结果,加快后续请求的速度。 -
历史:
GET
请求保留在浏览器历史记录中,用户可以回退到之前的GET
请求。 -
安全性:由于数据暴露在URL中,
GET
不适用于传输敏感信息,如密码或个人信息。 -
数据大小:由于URL长度限制,
GET
请求的数据大小有限制。
POST 方法
-
数据传输:表单数据不会显示在URL中,而是在HTTP请求的主体中。
POST
可以传输大量数据,没有大小限制。 -
缓存:
POST
请求不会被缓存,每次提交都会向服务器发送新请求。 -
历史:
POST
请求不会保留在浏览器历史记录中。 -
安全性:由于数据不在URL中显示,
POST
比GET
更安全,适合传输敏感信息。 -
数据大小:
POST
请求可以传输大量数据,没有大小限制(尽管实际大小可能受到服务器配置的限制)。
-
-
-
name
:表单的名称,可用于在文档中引用表单。 -
enctype
:定义表单提交时使用的编码类型(如application/x-www-form-urlencoded
,multipart/form-data
等)。
输入字段 :<form>
元素内部可以包含多种类型的<input>
元素,以及其他表单控件,如<select>
, <textarea>
, <button>
等。
输入类型 :<input>
元素可以有多种类型,每种类型对应不同的输入控件,例如:
-
text
:单行文本框。 -
password
:密码输入框,输入内容会被隐藏。 -
submit
:提交按钮,用于发送表单数据到服务器。 -
radio
:单选按钮。 -
checkbox
:复选框。 -
file
:文件上传控件。 -
hidden
:隐藏输入字段,对用户不可见。 -
image
:图像作为提交按钮。 -
reset
:重置按钮,用于重置表单中的所有字段到默认值。
表单控件 :除了<input>
元素,表单还可以包含以下控件:
-
<select>
:下拉选择框。 -
<textarea>
:多行文本输入区域。 -
<fieldset>
:将表单中的相关元素分组。 -
<legend>
:为<fieldset>
元素提供标题。
表单验证 :HTML5引入了表单验证功能,通过属性如required
, pattern
, min
, max
等,可以在客户端进行输入验证。
提交表单:用户填写完表单后,可以通过点击提交按钮或使用快捷键(通常是Ctrl+Enter)来提交表单。
服务器处理:表单提交后,数据会被发送到服务器,服务器端脚本(如PHP, Python, Node.js等)可以处理这些数据。
响应:服务器处理完表单数据后,可以向客户端返回响应,这可能是一个确认消息、重定向到另一个页面,或者显示处理结果。
安全性:表单数据在传输过程中应确保安全,可以通过HTTPS协议来加密数据