HTML中表单标签的用法

39 阅读1分钟

一、核心容器: 标签

<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">

输入内容会被隐藏(显示为 * 或 ),适合收集密码。