零基础教你学前端——33，label标签和只读禁用属性（html html标签）

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

使用 HTML 如何实现这一功能呢?实现这一功能，只需要在表单中添加 label 标签就可以了label 是表单标签的意思，基本语法为：尖角号 label，尖角号/labellabel 标签对屏幕阅读器用户很有用，因为当用户关注输入元素时，屏幕阅读器会大声读出标签。

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 标签以及表单控件的只读禁用设置就讲完了，大家自己动手实现一下吧！文章配套视频「链接」