正心全栈编程

表单基础 ​

管理后台不仅要展示学员数据，还要接收查询条件和登记信息。HTML 表单负责描述“填写哪些字段、把数据提交到哪里”，后端怎样接收和处理不属于本节范围。

先观察一个手机登录表单：页面中有文字说明、输入框和按钮，这些内容可以放在同一个 form 中。这里展示页面结构，按钮尚未连接登录服务。

手机登录
短信获取 6 位验证码

本节先完成一个最小表单，再逐步补上提交方式、字段关联和文本输入规则，最后完成学员快速登记案例。

搭建最小表单 ​

先做一个只收集学员姓名的表单：

html
<form action="#" method="get">
    <label for="name">姓名</label>
    <input id="name" name="name" type="text">
    <button type="submit">提交</button>
</form>

这段代码包含四个基础元素：

元素作用
form包裹需要一起提交的字段和按钮
label说明输入项的含义
input接收用户输入
button触发表单提交

form 的 action 指定提交地址，method 指定提交方法。这里使用 action="#" 作为占位地址，因此不需要启动后端服务。

设置提交方式 ​

表单提交时，浏览器会根据 action 和 method 组织请求。本节只观察浏览器端行为，不讨论服务端实现。

使用 GET 查询数据 ​

html
<form action="/students" method="get">
    <label for="keyword">关键词</label>
    <input id="keyword" name="keyword" type="search">
    <button type="submit">查询</button>
</form>

输入“张三”并提交后，浏览器会访问类似下面的地址：

text
/students?keyword=张三

GET 参数通常出现在地址栏，适合查询、筛选和分页。不要用 GET 提交密码等敏感信息。

使用 POST 提交数据 ​

html
<form action="/students" method="post">
    <label for="student-name">姓名</label>
    <input id="student-name" name="name" type="text">
    <button type="submit">新增学员</button>
</form>

POST 常用于新增、登录等操作。POST 参数不直接显示在地址栏，但这不等于数据自动安全；实际项目仍需使用 HTTPS，并由后端完成权限检查和数据验证。

直接打开本节附件时，/students 并不存在，提交后出现找不到页面或请求失败属于正常现象。这里要观察的是地址和提交方式。

关联说明与提交字段 ​

一个字段通常同时用到 label、id 和 name：

html
<label for="mobile">手机号</label>
<input id="mobile" name="mobile" type="tel">

预览效果如下。点击“手机号”可以让输入框获得焦点：

三个属性的职责不同：

内容作用
for="mobile"指向 id="mobile" 的控件
id="mobile"作为页面内唯一标识，供 label 等内容引用
name="mobile"作为提交给服务器的字段名

点击“手机号”文字，输入框会获得焦点，这就是 for 与 id 建立关联后的效果。id 应在当前页面中保持唯一；没有 name 的控件通常不会进入表单提交数据。

控件也可以直接放入 label：

html
<label>
    姓名
    <input name="name" type="text">
</label>

两种写法都有效。课程案例优先使用显式的 for 和 id，字段较多时更容易检查对应关系。

完善文本字段 ​

区分普通文本与密码 ​

type="text" 用于普通单行文本，type="password" 会在界面中隐藏输入字符：

html
<label for="name">姓名</label>
<input id="name" name="name" type="text">

<label for="password">密码</label>
<input id="password" name="password" type="password">

预览效果如下：

密码框只改变页面显示方式，不能替代 HTTPS 和服务端安全处理。

设置初始值与填写提示 ​

html
<label for="city">所在城市</label>
<input
    id="city"
    name="city"
    type="text"
    value="长沙"
    placeholder="例如：长沙"
>

预览效果如下。清空“长沙”后才会看到填写提示：

  • value：控件的初始值，也是未修改时的提交值。
  • placeholder：输入为空时显示的短提示，不能替代 label。

添加浏览器原生约束 ​

html
<label for="username">账号</label>
<input
    id="username"
    name="username"
    type="text"
    required
    minlength="2"
    maxlength="20"
    autocomplete="username"
>
属性作用
required要求填写后才能提交
minlength限制最少字符数
maxlength限制最多字符数
autocomplete告诉浏览器字段用途，帮助浏览器正确自动填充

浏览器约束可以改善填写体验，但请求可以绕过浏览器，因此后端仍需再次验证数据。

区分只读与禁用 ​

html
<label for="student-id">学员编号</label>
<input id="student-id" name="student_id" value="S1001" readonly>

<label for="source">数据来源</label>
<input id="source" name="source" value="系统导入" disabled>

预览效果如下：

属性能否修改是否通常随表单提交
readonly否是
disabled否否

需要展示并提交固定值时使用 readonly；字段暂时不可用且不应提交时使用 disabled。

为后续 JavaScript 保留字段契约 ​

表单字段不仅决定页面显示什么，也决定浏览器提交什么数据。后续 JavaScript 会根据这些字段整理对象和数组，因此字段名和值要稳定、清楚：

HTML 内容后续数据处理中的意义
name="mobile"提交数据中的字段名，也可以作为对象属性名
id="mobile"当前页面中的唯一标识，供 label 或后续 DOM 查询使用
value="online"程序使用的稳定值，不等同于页面显示文字
多个相同 name 的复选框一个字段对应多个值，后续可以整理成数组

显示文字可以写成“线上学习”，程序值则使用 online。不要把页面上的说明文字当成数据键。p01 只负责定义字段，不在这里讲对象创建、数组转换和数据更新；这些内容放到 p03。

完成学员快速登记 ​

现在把本节内容合并成一张快速登记表。表单只使用文本类字段，不加入下一节才讲的单选、多选、下拉和文件控件。

html
<form action="/students" method="post">
    <p>
        <label for="name">姓名</label>
        <input
            id="name"
            name="name"
            type="text"
            minlength="2"
            maxlength="20"
            autocomplete="name"
            required
        >
    </p>

    <p>
        <label for="mobile">手机号</label>
        <input
            id="mobile"
            name="mobile"
            type="tel"
            autocomplete="tel"
            required
        >
    </p>

    <p>
        <label for="password">初始密码</label>
        <input
            id="password"
            name="password"
            type="password"
            minlength="8"
            autocomplete="new-password"
            required
        >
    </p>

    <button type="submit">提交登记</button>
</form>

下方仅预览外观，按钮不会提交数据：

检查这张表单时，按下面的顺序核对：

  1. 每个 label 的 for 是否能找到对应的 id。
  2. 每个需要提交的控件是否有 name。
  3. action 和 method 是否符合当前操作。
  4. 必填、长度和自动填充属性是否放在正确字段上。

小结 ​

  1. form 使用 action 和 method 描述提交目标与方式。
  2. GET 适合查询，POST 常用于新增或修改数据。
  3. label 说明字段，id 建立页面关联，name 决定提交字段名。
  4. text、password、value 和 placeholder 负责不同的文本输入需求。
  5. 浏览器原生约束用于改善填写体验，不能代替后端验证。
  6. readonly 字段通常会提交，disabled 字段通常不会提交。