共计 1702 个字符，预计需要花费 5 分钟才能阅读完成。
实现表单控件的只读和禁用设置。
先来看一个案例，在填写 ” 流调信息表 ” 时，当点击输入框控件，光标会在输入框里闪动，期待咱们输出内容。此时，称这个输入框取得了焦点。
刷新一下页面，再点击一下这个输入框控件左侧的题目文本，发现这个输入框也取得了焦点，用户填写表单的体验明显增强了。
应用 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 标签以及表单控件的只读禁用设置就讲完了，大家本人入手实现一下吧！
[文章配套视频链接](https://www.bilibili.com/video/BV1oU4y1278g?p=34)