实现表单控件的只读和禁用设置。
先来看一个案例，在填写"流调信息表"时，当点击输入框控件，光标会在输入框里闪动，期待咱们输出内容。此时，称这个输入框取得了焦点。
刷新一下页面，再点击一下这个输入框控件左侧的题目文本，发现这个输入框也取得了焦点，用户填写表单的体验明显增强了。
应用 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)