textarea只读

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

我们先看一个案例，填& # 34；流量信息表& # 34；点击输入框控件时，光标会在输入框内闪烁，等待我们输入内容。此时，输入框被称为具有焦点。刷新页面，再点击这个输入框控件左侧的标题文字，发现这个输入框也获得了焦点，用户填写表单的体验明显增强。

如何用HTML实现这个功能？

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

标签的意思是形式标签，基本语法是:锐角标签，锐角/标签。标签标签对屏幕阅读器用户很有用，因为当用户注意输入元素时，屏幕阅读器会大声读出标签。

标签也可以帮助我们点击很小很难点击的区域，比如单选按钮或者复选框。当用户单击label元素中的文本时，它可以切换单选按钮或复选框。

我们来演示一下。

打开编辑器，新建一个label.html文件，自动完成基本代码，在body标签里面写一个form标签，在form标签里面添加文本，请输入用户名:(读冒号)，然后添加一个输入标签，type属性的值为文本。用标签来标注& # 34；请输入用户名& # 34；包起来留着。

在浏览器中打开页面，单击文本，光标不会出现在输入框控件中。怎么了?

事实证明，单纯用标签标注是不够的。需要在标签label中添加一个for属性，用来定义与标签关联的表单控件，其值为表单控件的id属性值。

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

回到编辑器中，我们为输入框定义id属性，并将值设置为username，然后为标签添加for属性，其值应该设置为输入框的id属性的值:username。保存页面。

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

继续返回& # 34；流量信息表& # 34；情况下，在手机号码输入框中，手机号码已经默认填写。现在我们试图改变它，却发现它无法修改。该控件是只读的。

只读输入框控件的内容虽然不能输入和修改，但是可以复制控件中的原文(这里有一个操作，录制的时候可以慢一点)。

当提交表单时，可以收集只读控件的值并发送到后端，我们将在以后介绍这一点。此外，textarea多行输入框控件也可以设置为只读。

如何达到这种效果？

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

回到编辑器，我们更改了文件名并添加了单词readonly。

继续在原始文档中编写代码。在输入框后面添加一个br标签来编写文本& # 34；您的手机号码:& # 34；，并在文本后添加一个输入标记，type的值设置为text。

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

最后，定义一个只读属性。

返回浏览器并刷新。此时尝试修改手机号无法修改。

回到& # 34；流量信息表& # 34；在选择性别的情况下，性别隐私单选按钮是灰色的，不能用鼠标点击来选择。

这种效果是如何实现的？

为了达到这个效果，我们需要在表单控件中添加一个disabled属性。禁用意味着禁用。禁用的表单控件不可用且可点击。

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

回到编辑器，让我们再次更改文件名，并添加单词disabled。

继续在原始文档中编写代码。添加另一个br标签并写入文本& # 34；选择性别& # 34；，使用emmet语法输入，括号，type=radio，空 grid，name=gender，乘以3，按tab键完成代码，(输入[type=radio name=gender]*3)分别输入后添加男、女、密。为最后一个控件定义另一个禁用的属性。保存。

回到浏览器，刷新，一组单选框就做好了。男女皆可点击，安全控制被禁用，显示为灰色，点击无法选择。

这是标签的结尾，也是表单控件的只读禁用设置。自己动手吧！

文章的视频“链接”