一、核心容器: 标签
<form> 是所有表单元素的父容器,主要作用是指定数据提交的目标地址和方式,自身不显示任何样式。
1. 关键属性
-
action:必填属性,指定表单数据提交到的服务器地址(如后端接口 URL)。
-
method:指定数据提交方式,常用值有两个。
get:数据会拼在 URL 后(如?username=xxx),适合简单查询,数据长度有限。post:数据在请求体中传输,更安全,适合提交密码、表单等敏感或大量数据。
-
enctype:仅在
method="post"时使用,指定数据编码格式,上传文件时需设为multipart/form-data。
<!-- 提交到后端接口的表单 -->
<form action="https://xxx.com/submit" method="post">
<!-- 各类表单元素放在这里 -->
</form>
二、常用表单元素(输入控件)
表单元素需嵌套在 <form> 内,通过 name 属性标识字段(后端需通过 name 获取对应值),常用元素如下:
1. 单行文本输入:<input type="text">
用于收集用户名、手机号等单行文本,可通过 placeholder 显示提示文字
2. 密码输入:<input type="password">
输入内容会被隐藏(显示为 * 或 •),适合收集密码。