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

问题描述

这是 标签文档:

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

呈现一个 HTML标签"元素.渲染当前值组件作为标签文本(如果已指定).如果for"属性是指定，查找由for"的值指定的组件属性，并将其客户端 ID 呈现为for"的值属性.如果指定了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 教程. 由 生成，解释为 此处.

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.

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.

电子邮件地址
<代码><输入类型=文本"名称=电子邮件"id="电子邮件"/>

因此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 教程滥用，其唯一目的是打印出一些 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}" />

这个特定的用例因此错误.相反，应该使用 :

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 页面 的底部和 jsf.zeef.com.

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 的用途及其“for"属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！