h:outputLabel的目的及其“用于".属性 [英] Purpose of the h:outputLabel and its "for" attribute

问题描述

以下摘录自 <h:outputLabel>标记文档:

Here's an extract from the <h:outputLabel> tag documentation:

呈现HTML标签"元素.渲染当前值 组件作为标签文本(如果已指定).如果"for"属性为 指定，找到由"for"的值指定的组件 属性，并将其客户ID呈现为用于"的值 属性.如果指定了"styleClass"属性，则将其值呈现为 "class"属性的值.

Renders an HTML "label" element. Render the current value of the component as label text if it is specified. If a "for" attribute is specified, find the component specified by the value of the "for" attribute, and render its client id as the value of the "for" attribute. If "styleClass" attribute is specified, render its value as the value of the "class" attribute.

我对for属性感到困惑.它的目的是什么?

I'm confused about the for attribute. What is its purpose?

推荐答案

如果您首先学习基本的HTML，就更容易理解.在这个问题的上下文中，JSF仅仅是一个HTML代码生成器. htmldog.com 上有一个很棒的HTML教程.由<h:outputLabel>生成的<label>，在此处中进行解释.. >

It's easier to understand if you learn basic HTML first. JSF is in the context of this question namely merely a HTML code generator. There's an excellent HTML tutorial at htmldog.com. The <label>, as generated by <h:outputLabel>, is explained here.

HTML标记:标签

表单元素(input，textarea或select)的标签.

可选属性

当for的值与元素的id属性的值匹配时，

for可用于将标签与表单元素相关联.

HTML Tag: label

Label for a form element (input, textarea or select).

Optional Attributes

for can be used to associate the label to a form element when the value of for matches the value of an element's id attribute.

<label for="email">Email address</label>
<input type="text" name="email" id="email" />

因此，for属性必须指向标签旨在用于 label 的输入组件的id.该标签具有以下SEO和可用性优势:

So the for attribute must point to the id of the input component the label is intented to label. The label has the following SEO and usability advantages:

1. 它以文字形式讲述了相关的输入元素.
2. 当它本身被聚焦/单击时，它会聚焦并激活关联的输入元素.

JSF在此问题中仅是一个HTML代码生成器，因此，同样的情况也适用于生成该HTML的JSF组件.

As JSF is in the context of this question merely a HTML code generator, exactly the same applies to JSF components generating that HTML as well.

<h:outputLabel for="email">Email address</h:outputLabel>
<h:inputText id="email" />

Searchbots会找到标签并为关联的输入元素建立索引.视障人士使用的屏幕阅读器会找到该标签，并通过声音告知其内容.最终用户可以单击标签以查看相关输入的焦点.单击标签时，将选中复选框/单选按钮.单击标签时，文件输入将打开浏览对话框.等等.

Searchbots will find the label and index the associated input element as such. Screenreaders as used by visually disabled people will find the label and tell its contents by sound. Endusers can click the label to see the associated input getting focused. Checkboxes/radiobuttons will be selected when clicking the label. File inputs will open the browse dialog when clicking the label. Etcetera.

应注意的是，相对许多劣质JSF教程滥用 <h:outputLabel>的唯一目的是打印一些Hello World文本，如下所示:

Noted should be that relatively a lot of low-quality JSF tutorials are abusing the <h:outputLabel> with the sole purpose to print out some Hello World text like so:

<h:outputLabel value="#{bean.message}" />

此特定用例因此错误.相反，应该使用<h:outputText>:

This particular use case is thus wrong. Instead, a <h:outputText> should have been used:

<h:outputText value="#{bean.message}" />

或者甚至模板文本中的EL :

#{bean.message}

如果您遇到这样的教程以这种方式滥用<h:outputLabel>，则强烈建议您停止阅读它，而转向更自重的资源.这有力地表明，该教程的作者对基本HTML一无所知，而这反过来又是学习JSF之前相当重要的先决条件.几乎不了解基本HTML的人肯定不是一个好的JSF老师.您永远都不会知道，如此低质量的学习资源是否继续陷入教学不良做法的螺旋式下降之中，因此最好还是选择另一种方法.您可以在我们的JSF Wiki页面和

If you ever encounter such a tutorial who's abusing the <h:outputLabel> this way, it's strongly recommended to stop reading it and head to a more self-respected resource. This is a strong indication that the tutorial's author know nothing about basic HTML while that's in turn a pretty important prerequisite before learning JSF. One who barely know anything about basic HTML surely isn't a good JSF teacher. You never know if such a low-quality learning resource continues into a downward spiral of teaching bad practices and it's therefore better to head to a different one. You can find sane resources linked at bottom of our JSF wiki page and at jsf.zeef.com.

这篇关于h:outputLabel的目的及其“用于".属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！