尚硅谷前端 2023 · 教程站

主题

表格标签（Day3 4/4） ​

本页对应 Day03-HTML，共 5 段视频，约 31 分钟。

学习目标 ​

  • 能使用 textarea 创建可换行文本域，并通过 rows、cols 设置默认显示行数与列数，说明其对高度和宽度的影响。
  • 能使用 select 与 option 创建下拉选项，并使用 selected 指定默认选中项。
  • 能准确说明 name 属性的作用，并能正确为单选框、下拉选项设置 name，同时说明按钮不应设置 name 的原因。
  • 能针对文本输入框、密码输入框、单选框、复选框、按钮、option 等不同控件正确使用 value，并说明其显示值或提交值的差异。
  • 能使用 disabled 禁用表单控件，并能区分对 select 设置 disabled 与对单个 option 设置 disabled 的不同效果。

知识点 ​

文本域：能换行的多行输入 ​

为什么需要： 普通文本输入框只能输入单行文字，按回车并不能换行，甚至会触发表单提交。留言、发帖、写文章等场景需要大段文字，所以要用文本域 textarea。

怎么想： 文本域和文本输入框外观相近，但它是双标签，能容纳多行内容；默认显示几行、多宽，可以由属性控制。

怎么做：

html
<textarea rows="10" cols="60">请输入自我介绍</textarea>

调试时先只写 <textarea></textarea>，可以看到它比普通输入框高一些；按回车能换行，内容多了会出现滚动条。rows 表示默认显示的行数，实际影响高度；cols 表示默认显示的列数，实际影响宽度。转写稿里“rose”应纠正为 rows，“cos”应纠正为 cols。cols="30" 大致按英文字符宽度计算，汉字、字母、数字宽度不完全一样，所以不要把它理解成绝对精确的字数。

易错点： rows 不是“最多能写几行”，只是默认显示行数；内容超过后仍可继续写，并通过滚动条查看。文本域默认内容直接写在双标签中间，不需要用 value。

下拉选项：select 包 option ​

为什么需要： 选择省份、城市、地区等场景，选项较多，用下拉列表可以节省空间，并限制用户从既定选项中选择。

怎么想： 下拉选项不是单个标签完成的，而是“外层容器 + 多个选项”的结构，类似 ul 包 li。外层用 select，每个选项用 option。

怎么做：

html
<select name="city">
  <option>江苏省</option>
  <option>安徽省</option>
  <option selected>新疆维吾尔自治区</option>
  <option>内蒙古自治区</option>
</select>

默认选中第一个选项；想让某一项默认选中，就给对应 option 加 selected。转写稿中“select 跟 check 一个路数”指的是这类属性不需要写值，直接写上即可，但 selected 用于下拉选项，checked 用于单选框、复选框，不要混用。

易错点： 不要给每个 option 分别设置 name，因为整组下拉选项是一个整体，name 应设置在 select 上。若给某个 option 设置 disabled，只是该选项不可选；若给 select 设置 disabled，整个下拉选项都不可用。

name 属性：给表单控件做后端标识 ​

为什么需要： 表单数据要提交给后端处理，后端必须知道每个数据代表什么，因此表单控件需要 name 作为标识。转写稿中“内幕”应纠正为 name。

怎么想： name 的值不能随便取，要和后端程序员对应好；如果后端还没确定，可以先空着，它不影响控件显示效果。单选框要实现“多选一”，多个单选框必须使用相同的 name。

怎么做：

html
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

下拉选项的 name 设置在 select 上，而不是 option 上。

易错点： 提交按钮、重置按钮、普通按钮不要设置 name。按钮只是触发提交的机关，不是要提交给后端的数据；如果给按钮加了 name，按钮上的文字也可能被当作数据提交，没有意义。转写稿用“枪、子弹、扳机”比喻：数据是子弹，按钮是扳机，不能把扳机也交给后端。

value 属性：不同类型的含义不同 ​

为什么需要： value 用来表示控件的“值”，但不同类型表单控件含义不同，必须分类型理解。

怎么想： 文本输入框和密码输入框的 value 是默认显示内容；单选框、复选框的 value 才是真正提交给后端的数据；按钮的 value 是按钮文字；下拉选项的 value 是提交值。

怎么做：

html
<input type="text" value="高考乐">
<input type="password" value="123456">

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

<input type="checkbox" name="hobby" value="1"> 唱
<input type="checkbox" name="hobby" value="2"> 跳
<input type="checkbox" name="hobby" value="3"> rap

<input type="submit" value="提交">

<select name="city">
  <option value="1">江苏省</option>
  <option value="2">安徽省</option>
</select>

密码框设置 value="123456" 后显示为点，不会明文显示。单选框、复选框旁边“男”“女”“唱”“跳”等文字，浏览器并不会自动当成提交值；真正提交的是 value。下拉选项如果没有写 value，提交双标签中的文字；如果写了 value，提交 value。实际开发中常用数字编码，减少存储空间，具体对应关系要和后端约定。

易错点： textarea 不需要 value，默认内容写在标签中间；button 是双标签，按钮文字写在标签中间，也不需要 value。单选框、复选框的 value 不能乱写，要和后端数据库设计对应。

disabled 属性：让控件不可用 ​

为什么需要： 有些系统需要做权限控制：同一张表单，不同用户能操作的范围不同。某些控件只允许查看、不允许修改时，就可以用 disabled。

怎么想： disabled 表示“不可用”，任何表单控件都可以设置，而且它不需要值，直接写上即可。转写稿中“diable”应纠正为 disabled。

怎么做：

html
<input type="text" value="高考乐" disabled>
<input type="password" disabled>

<input type="radio" name="gender" value="male" disabled> 男

<select name="city" disabled>
  <option>江苏省</option>
</select>

<select name="city">
  <option>江苏省</option>
  <option disabled>内蒙古自治区</option>
</select>

调试时可以看到：文本框变暗且不能输入；单选框不能选择；按钮变暗且不能提交；select 加 disabled 后整个下拉选项不可用；option 加 disabled 后只是该选项不可选，鼠标经过会跳过。

易错点： 不要混淆 select 和 option 上的 disabled：前者禁用整个下拉框，后者只禁用某一项。disabled 不需要写值，不要写成 disabled="disabled" 才以为什么都没生效。

本节作业总览 ​

本次作业对应笔记里的三块内容：课堂案例、表格、表单。转写稿里“文本玉、文美玉”应写为“文本域”，“内幕”是 name，“Y6”是 value，“diable”是 disabled。作业不是背标签，而是把课堂案例重新做一遍，重点检查表单控件是否写对、属性能否解释清楚。

课堂案例：先复盘再动手 ​

为什么需要： 课堂案例是后面表格、表单作业的参照，先复盘能发现“会抄但不会讲”的问题。怎么想： 先看页面结构，再找表单区域，最后逐个核对控件。怎么做： 按案例顺序复现，给每个输入框、按钮、下拉框标注用途。易错点： 不要只改文字和颜色，忽略标签结构；表格和表单不要混在一起写。

表格作业：先结构后内容 ​

为什么需要： 表格练习的是行列对应关系，结构错一行，后面全错。怎么想： 先确定几行几列，再填内容。怎么做： 按课堂案例完成表格，检查表头和数据是否对齐。易错点： 不要先写样式再补结构；单元格数量要与列数一致。

表单作业：文本域 ​

为什么需要： 单行文本输入框不能换行，写留言、帖子、自我介绍时需要能换行的区域。怎么想： 文本域是双标签，默认内容写在标签中间；rows 控制默认显示行数，实际影响高度；cols 控制默认显示列数，实际影响宽度。怎么做：

html
<textarea name="intro" rows="10" cols="30">请输入自我介绍</textarea>

调试时先写一个空的 textarea，按回车发现可以换行；内容多了会出现滚动条；把 rows 调大高度变高，把 cols 调大宽度变宽。易错点： rows 不是“最多只能写几行”，只是默认显示高度；cols 受英文字母、汉字、数字宽度影响，不是精确字数；文本域不需要用 value 设置默认内容。

表单作业：下拉选项 ​

为什么需要： 选择省市、地区等场景需要从多个选项中选一个。怎么想： select 是外层包裹，option 是具体选项，结构类似 ul 包 li。默认选中第一个，用 selected 可以改默认项。怎么做：

html
<select name="city">
  <option>江苏省</option>
  <option selected>新疆维吾尔自治区</option>
  <option>安徽省</option>
</select>

调试时如果下拉框在页面底部，展开后看起来像“上拉”，把页面放中间或下面补内容再观察即可。易错点： selected 不需要值；name 要写在 select 上，不要写在一堆 option 上；下拉选项整体是一个控件。

表单作业：name 属性 ​

为什么需要： name 给表单控件设置标识，提交到后端时要与后端字段对应。怎么想： 先判断这个控件是否要提交数据；单选框要实现单选，多个单选框的 name 必须相同；下拉选项的 name 给 select；按钮是触发器，不要设置 name。怎么做：

html
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

易错点： name 不能乱取，要和后端商量；不写 name 不影响页面显示，但后端无法识别；按钮加 name 会把按钮文字也提交过去，没有意义。

表单作业：value 属性 ​

为什么需要： value 在不同控件里作用不同：文本输入框和密码框设置默认显示内容；单选框、复选框设置真正提交的数据；按钮设置按钮文字；option 可设置提交值。怎么想： 先看控件类型，再判断“显示给用户看的内容”和“提交给后端的数据”是不是一回事。怎么做：

html
<input type="text" value="高考乐">
<input type="password" value="123456">
<input type="radio" name="gender" value="male">男
<option value="2">安徽省</option>

单选框加了 value 页面显示没变化，但提交的是 value；textarea 和 button 是双标签，默认内容直接写标签中间，不需要 value；option 没写 value 时提交标签文字，写了就提交 value。易错点： 单选框可见文字不等于提交值；复选框也要写 value；value 不能乱写，要和后端对应。

表单作业：disabled 属性 ​

为什么需要： 权限控制时，有些控件只能看不能操作，就要用 disabled。怎么想： 任何表单控件加上 disabled 都会不可用；select 加 disabled 是整个下拉不可用，option 加 disabled 是该项不可选。怎么做：

html
<input type="text" disabled>
<select disabled>
  <option>江苏省</option>
</select>
<option disabled>内蒙古自治区</option>

易错点： disabled 不需要值；禁用按钮不能提交；不要把所有控件都禁用，要按权限场景使用。

提交前检查清单 ​

交作业前逐项看：课堂案例能否独立复现；表格行列是否对齐；文本域能否换行、rows/cols 是否解释得清；下拉默认项是否用 selected；单选框 name 是否相同；需要提交的控件是否写 value；按钮是否误加 name；需要禁用的控件是否加 disabled。能讲清“为什么这样写”，比只做出页面更重要。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

代码示例 ​

示例 1：文本域 textarea（rows / cols） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单控件-文本域</title>
  <style>
    textarea { display: block; margin-bottom: 10px; }
  </style>
</head>
<body>
  <form action="#" method="get">
    <!-- 文本域：双标签，默认内容直接写在标签之间，不需要 value -->
    <!-- rows：默认显示的行数，实际影响的是高度 -->
    <!-- cols：默认显示的列数，实际影响的是宽度 -->
    <textarea name="intro" rows="10" cols="60">请输入自我介绍吧</textarea>

    <!-- 对比：单行文本输入框，在框里按回车会直接提交表单，无法换行 -->
    <input type="text" name="nick" value="单行文本输入框，回车即提交">

    <button type="submit">提交</button>
  </form>
</body>
</html>

要点解释与易错点

  • textarea 是双标签，默认显示的内容写在开始标签和结束标签之间，不需要 value 属性（写了也没用）。
  • rows 是默认显示的行数（影响高度），cols 是默认显示的列数（影响宽度）；超出 rows 后会出现滚动条，可以继续写无数行。
  • cols 的宽度以英文字母为标准，汉字、数字、字母宽度不一样，所以“能显示 30 个字”只是大概感觉。
  • 易错点：在 input type="text" 里按回车会提交表单，而在 textarea 里按回车是换行——这正是文本域存在的意义（留言、发帖、写文章等大段文字场景）。

示例 2：下拉选项 select / option（selected） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单控件-下拉选项</title>
</head>
<body>
  <form action="#" method="get">
    <!-- select 是下拉选项的外层包裹元素，name 要设置在这里 -->
    <select name="city">
      <!-- option 就是选项，结构类似 ul > li -->
      <option value="1">江苏省</option>
      <option value="2">安徽省</option>
      <option value="3">河南省</option>
      <!-- selected 不需要值，谁写了它谁就是默认选项 -->
      <option value="4" selected>新疆维吾尔自治区</option>
      <option value="5">内蒙古自治区</option>
      <option value="6">广西壮族自治区</option>
    </select>
    <button type="submit">提交</button>
  </form>
</body>
</html>

要点解释与易错点

  • 实现下拉选项要用两种标签：select 是外层包裹元素，option 是具体选项，结构上和 ul > li 很像。
  • 不写 selected 时，默认选中的是第一个选项；selected 是无值属性，写法跟 checked 一个路数，但它们是两个不同的属性。
  • 易错点：name 要设置在 select 上，不能设置在 option 上——否则用户选了别的选项就没有标识了；不管选哪个选项，都属于这个 select 整体。
  • option 的 value 是真正提交给后端的数据（常用数字，方便后端精简存储），不写 value 时提交的是 option 双标签里的文字。
  • 页面已经到底部时，下拉会向上展开，这是正常现象，不是写错了。

示例 3：表单控件属性 name / value / disabled ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单控件属性：name / value / disabled</title>
</head>
<body>
  <form action="#" method="get">
    <!-- 文本输入框、密码输入框：value 设置默认显示的内容 -->
    <p>用户名：<input type="text" name="username" value="高考卷"></p>
    <p>密码：<input type="password" name="pwd" value="123456"></p>

    <!-- 单选框：name 相同才有单选效果；value 才是真正提交的数据 -->
    <p>
      性别：
      <input type="radio" name="gender" value="male" id="male">
      <label for="male">男</label>
      <input type="radio" name="gender" value="female" id="female" checked>
      <label for="female">女</label>
      <input type="radio" name="gender" value="secret" id="secret" disabled>
      <label for="secret">保密（不可选）</label>
    </p>

    <!-- 复选框：value 同样是提交的数据，不同选项的 value 不能一样 -->
    <p>
      爱好：
      <input type="checkbox" name="hobby" value="1">唱
      <input type="checkbox" name="hobby" value="2">跳
      <input type="checkbox" name="hobby" value="3" disabled>rap（不可选）
    </p>

    <!-- select 设置 disabled：整个下拉选项不可用；option 设置 disabled：只是该选项不可选 -->
    <p>
      城市：
      <select name="city">
        <option value="1">江苏省</option>
        <option value="2" disabled>内蒙古自治区（不可选）</option>
        <option value="3">河南省</option>
      </select>
    </p>

    <!-- 文本域是双标签，默认内容写在标签之间，不需要 value -->
    <p><textarea name="intro" rows="5" cols="40">请输入自我介绍吧</textarea></p>

    <!-- 按钮不要设置 name：按钮只是触发器，不是要提交的数据 -->
    <p>
      <button type="submit">提交</button>
      <button type="reset">重置</button>
      <input type="button" value="普通按钮">
    </p>
  </form>
</body>
</html>

要点解释与易错点

  • name：是全局属性，在表单控件里用来给控件设标识，且必须和后端对应，不能乱取；后端还没定的时候可以先空着，不影响控件的显示效果。
  • 单选框要实现单选效果，多个 input 必须设置相同的 name；下拉选项的 name 要设在 select 上。
  • 按钮（提交 / 重置 / 普通按钮）不要设置 name：按钮只是“扳机”，不是要提交的数据，加了 name 会把按钮上那两个字也提交过去，毫无意义。
  • value：文本 / 密码框里是默认显示内容；单选框、复选框里是真正提交的数据（外面那个字浏览器关联不上，不写 value 等于白选），不同选项的 value 不能一样，且要和后端商量好，常用数字表示；input 按钮的 value 是按钮上的文字；button、textarea 是双标签，内容写在里面，不需要 value。
  • disabled：无值属性，任何表单控件设置后都变为不可用（变灰、不能输入、不能选择、不能点击），常用于权限控制；单选框设置 disabled 后只能选其他的；select 设置 disabled 是整个下拉不可用，option 设置 disabled 只是该选项不可选，两者效果不同。

常见错误 ​

  1. 文本域默认文字写成 <textarea value="请输入...">，页面上却什么都没有 → 原因：textarea 是双标签，没有“默认值属性”这一说，value 对它无效 → 修法：把默认文字写在标签对中间 <textarea>请输入自我介绍</textarea>；同理 <button> 的文字也写在标签中间而不是 value 里。

  2. 三个单选框 name 各写各的，结果能同时选中好几个 → 原因：单选效果靠“相同的 name”把控件编成一组，name 不同就是三组独立的单选框 → 修法：同一组单选/复选框统一 name，并给每个选项写不同的 value（提交的是 value，不是旁边那行字）。

  3. 下拉框把 name 写在 <option> 上，后端收到的数据缺字段 → 原因：select 是一整个整体，用户选哪一项都属于这个控件；option 只是候选项 → 修法：name 只写在 <select> 上，option 上用 value 表示提交值，用 selected 指定默认项。

  4. 提交按钮加了 name，后端莫名其妙多收到一条“提交”数据 → 原因：带 name 的控件都会被当作数据提交，按钮只是触发器，不该进入数据 → 修法：提交/重置/普通按钮一律不写 name。

  5. 想“启用”某个控件，写了 disabled="false"，结果还是灰的 → 原因：disabled、selected、checked 这类布尔属性只看“有没有写”，不看值 → 修法：要禁用就写 disabled；要启用就把该属性整个删掉（或用 JS el.disabled = false）。

  6. 给 <select> 加 disabled 想只禁一项，结果整个下拉都不能选 → 原因：disabled 写在 select 上是禁用整个控件，写在 option 上才是禁用该选项 → 修法：按粒度选择挂载位置，两者效果不同。

  7. rows / cols 调了半天，宽度高度还是不满意 → 原因：这两个属性只给“默认显示行数/列数”，本质是初始高宽，且列宽以英文字符为基准，中英文数字宽度不一致 → 修法：只用于给个初始尺寸，精确布局交给 CSS 的 width/height。

练习 ​

  1. 留言板表单：包含姓名（文本框）、邮箱（文本框）、留言内容（文本域，默认显示 8 行、50 列，并预置一段提示文字）、提交与重置按钮。要求页面能正常提交，且按钮文字不被当作数据。

  2. 收货地址选择：用 select + option 做省/直辖市下拉，默认选中“新疆维吾尔自治区”，其中“内蒙古自治区”不可选。思考：name 写在哪、默认项靠什么属性、禁用靠什么属性。

  3. 注册表单数据约定：性别（男/女/保密）用单选框，爱好（唱/跳/rap/篮球）用复选框，value 全部用数字，并写一张“数字—含义”对照表放在代码注释里，模拟与后端约定。提交后检查浏览器地址栏/网络面板里真正发出的是什么。

  4. 改错题：给出如下片段，找出至少 4 处问题并修正。

    html
    &lt;form&gt;
  &lt;textarea value="请留言"&gt;&lt;/textarea&gt;
  &lt;input type="radio" name="sex1" value="男"&gt;男
  &lt;input type="radio" name="sex2" value="女"&gt;女
  &lt;select name="city"&gt;
    &lt;option name="bj"&gt;北京&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="submit" name="sub" value="提交"&gt;
&lt;/form&gt;

  5. 权限演示：做一个“管理员/访客”切换（复选框），勾选时表单全部可编辑，取消勾选时整张表单（含下拉与按钮）变为不可用。要求只用 disabled 属性思路实现，并说明为什么不能用 disabled="false"。

原视频对照 ​

#视频时长
1表单控件-文本域05:27
2表单控件-下拉选项04:33
3表单控件属性-name属性04:51
4表单控件属性-value属性10:42
5表单控件属性-disabled属性05:40

小结 ​

  1. 表单控件分两类：单标签靠属性给值（input），双标签靠标签间内容给值（textarea、button、option）——先分清类型，再决定写在哪里。
  2. 四个属性各管一摊：name 管“提交不提交、跟谁一组”，value 管“提交什么”，selected/checked 管“默认选中”，disabled 管“能不能用”。
  3. name 是与后端的契约，不影响页面显示，可以先空着，但对接前必须对齐；不需要提交的控件（按钮）坚决不写。
  4. 显示给用户看的文字和真正提交的数据可以分离（option 文字 vs value、单选旁的汉字 vs value），这正是后端喜欢用数字编码的原因。
  5. 布尔属性（disabled/selected/checked）只认“存在与否”，不认值，写了 ="false" 等于写了。
  6. disabled 的作用范围取决于挂载元素：挂 select 禁整体，挂 option 禁单项；这是权限控制场景的常用手段。
  7. 判断代码对不对，先问“浏览器怎么知道这个控件叫什么、值是多少、能不能用”，三问过一遍，大部分表单 bug 自己就暴露了。