实现表单控件的只读和禁用设置。

先来看一个案例，在填写"流调信息表"时，当点击输入框控件，光标会在输入框里闪烁，等待我们输入内容。此时，称这个输入框获得了焦点。刷新一下页面，再点击一下这个输入框控件左侧的标题文本，发现这个输入框也获得了焦点，用户填写表单的体验明显增强了。

使用 HTML 如何实现这一功能呢?

实现这一功能，只需要在表单中添加 label 标签就可以了。

label 是表单标签的意思，基本语法为：尖角号 label，尖角号/label。label 标签对屏幕阅读器用户很有用，因为当用户关注输入元素时，屏幕阅读器会大声读出标签。

label 还可以帮助我们点选难以点击的 非常小的区域，比如单选按钮或复选框，当用户点击 label 元素内的文本时，它可以切换单选按钮或复选框。

我们来演示一下。

打开编辑器，新建一个 label.html 文件，自动补全基础代码，在body标签内部编写一个 form 表单标签，在 form 标签里面添加文本请输入用户名： (冒号读出来) ，紧接着添加一个 input 标签，type 属性的值为 text。用 lable 标签把 "请输入用户名" 包裹起来，保存。

在浏览器中打开页面，点击文本，输入框控件并没有出现光标，哪里出现了问题？

原来，单纯的使用 label 标签还不够，需要为 label 标签添加 for 属性，作用就是用来定义与 label 关联的表单控件，它的值为表单控件的 id 属性值。

这里需要注意，id 属性值具有唯一性，一个页面中不能出现两个相同的 id 属性值。

返回编辑器中，我们给 input 输入框定义 id 属性，值设置为 username，再为 label 添加 for 属性，它的值要设置为输入框 id 属性的值： username。保存页面。

返回浏览器，刷新，再次点击文本，输入框获得了焦点，效果实现了。

继续回到"流调信息表"案例，在手机号输入框中，默认已经填入了手机号码，现在我们试图更改它，却发现无法修改，这个控件是只读的。

只读输入框控件虽然内容不能被输入和修改，却可以复制控件里面原有的文本 (这里有操作，录音时可以慢点)。

在提交表单时，只读控件的值可以被收集并发送给后端，这个特点我们将来再介绍。另外，textarea 多行输入框控件也可以设置成只读的。

如何实现这个效果呢？

其实很简单，给控件定义一个 readonly 只读属性就可以实现了。

回到编辑器，我们改一下文件名，添加单词 readonly。

继续在原文档里编写代码。在输入框后面添加一个 br 标签，书写文本 "您的手机号:" ，并在文本后面添加 input 标签，type 的取值设置 为text。

为了在浏览器中默认显示一个手机号码，需要为它定义一个 value 属性，value 的含义是值的意思，作用是给输入框一个默认值，可以在浏览器中显示给用户。

最后再定义一个 readonly 属性。

回到浏览器，刷新。此时试图修改手机号，是修改不了的。

再次回到"流调信息表"案例，在性别选择时，性别保密单选控件是灰色的，使用鼠标点击不能选中它。

这种效果是如何实现的呢?

实现这个效果，我们需要给表单控件添加一个 disabled 属性。disabled 是禁用的意思。一个禁用的表单控件是不可用和不可点击的。

当提交表单时，禁用的表单控件值是不会被收集和发送给后端的。disabled 属性可以添加给任何的表单控件。

回到编辑器，我们再改一下文件名，添加单词 disabled。

继续在原文档里编写代码。再添加一个 br 标签，书写文本"选择性别"，使用 emmet 语法 input，中括号，type 等于 radio，空格，name 等于 gender，乘以3，按下 tab 键补全代码，(input[type=radio name=gender]*3) 在 input 后面分别添加男、女、保密。给最后一个控件再定义一个 disabled 属性。保存。

回到浏览器，刷新，一组单选框就做好了。性别的男、女可以点选，保密控件被禁用了，灰色显示，点击也不能被选中。

lable 标签以及表单控件的只读禁用设置就讲完了，大家自己动手实现一下吧！

文章配套视频「链接」