HTML 表单入门：表单容器、文本框与密码框属性详解

1. 引言

在网页开发中，表单（Form）是与用户交互的核心组件。无论是登录、注册、搜索还是提交反馈，都离不开表单。本文将带你从零开始，掌握 HTML 表单的基础知识，重点讲解表单容器 、文本框（text） 和密码框（password） 的常用属性，并通过可运行的示例帮助你快速上手。

2. 表单容器：<form> 标签

表单容器使用 <form> 标签定义，它本身不负责显示内容，而是作为所有表单控件的「外壳」，负责把用户输入的数据提交给服务器。

2.1 基本结构

<form action="/login" method="post">
  <!-- 这里放置各种表单控件 -->
</form>

2.2 常用属性

属性	说明	示例
action	指定表单数据提交到的服务器地址（URL）	action="/login"
method	指定提交方式，常用 get 或 post	method="post"
name	给表单命名，便于脚本访问	name="loginForm"
target	指定提交后响应在何处打开（如 _blank 新窗口）	target="_blank"
autocomplete	是否启用浏览器自动填充，值为 on / off	autocomplete="on"

提示 ：method="get" 会把数据拼在 URL 上，适合搜索等场景；method="post" 会把数据放在请求体中，适合登录、注册等敏感操作。

3. 文本框：<input type="text">

文本框是最常用的单行输入控件，用于接收用户输入的文本内容。

3.1 基本用法

<input type="text" name="username" placeholder="请输入用户名">

3.2 常用属性

属性	说明	示例
name	控件的名称，提交数据时的键名，必填	name="username"
value	文本框的默认值（预填内容）	value="张三"
placeholder	占位提示文字，输入时消失	placeholder="请输入用户名"
maxlength	允许输入的最大字符数	maxlength="20"
minlength	允许输入的最小字符数	minlength="3"
required	必填项，提交时校验	required
readonly	只读，不可修改但可提交	readonly
disabled	禁用，不可修改且不提交	disabled
size	文本框的显示宽度（字符数）	size="30"

3.3 示例：带校验的文本框

<input 
  type="text" 
  name="username" 
  placeholder="请输入用户名" 
  maxlength="20" 
  minlength="3" 
  required
>

4. 密码框：<input type="password">

密码框与文本框结构类似，区别在于输入的内容会以圆点（•）遮盖显示，防止旁人偷看。

4.1 基本用法

<input type="password" name="password" placeholder="请输入密码">

4.2 常用属性

密码框支持文本框的大部分属性，同时有几个特别常用的：

属性	说明	示例
name	控件名称，提交时的键名，必填	name="password"
placeholder	占位提示文字	placeholder="请输入密码"
maxlength	密码最大长度	maxlength="16"
minlength	密码最小长度	minlength="6"
required	必填项	required
autocomplete	是否允许浏览器记住密码，建议设为 off	autocomplete="off"

注意 ：value 属性虽然可以给密码框预填默认值，但出于安全考虑，实际项目中很少使用。

4.3 示例：带校验的密码框

<input 
  type="password" 
  name="password" 
  placeholder="请输入密码（至少6位）" 
  minlength="6" 
  maxlength="16" 
  required
>

5. 完整示例：登录表单

把前面学到的内容组合起来，写一个完整的登录表单：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>登录表单</title>
</head>
<body>

  <h2>用户登录</h2>

  <form action="/login" method="post" autocomplete="off">
    <p>
      <label for="username">用户名：</label>
      <input 
        type="text" 
        id="username" 
        name="username" 
        placeholder="请输入用户名" 
        maxlength="20" 
        required
      >
    </p>

    <p>
      <label for="password">密码：</label>
      <input 
        type="password" 
        id="password" 
        name="password" 
        placeholder="请输入密码" 
        minlength="6" 
        maxlength="16" 
        required
      >
    </p>

    <p>
      <button type="submit">登录</button>
    </p>
  </form>

</body>
</html>

代码说明

• <label for="..."> 与输入框的 id 关联，点击文字即可聚焦对应输入框，提升用户体验。
• required 让浏览器在提交前自动校验是否为空。
• autocomplete="off" 关闭浏览器自动填充，适合登录场景。

6. 小结

元素	作用	关键属性
<form>	表单容器，负责提交数据	action、method
<input type="text">	单行文本框	name、placeholder、maxlength、required
<input type="password">	密码框，输入内容遮盖显示	name、minlength、maxlength、required

掌握这三个核心元素，你就已经能搭建出可用的登录、注册等基础表单了。下一步可以继续学习单选按钮、复选框、下拉列表等更多表单控件，以及用 CSS 美化表单样式。