h：outputLabel及其“for”属性的用途

Question

以下是the <h:outputLabel> tag documentation的摘录：

  

呈现HTML“label”元素。渲染的当前值   组件作为标签文本（如果已指定）。如果是“for”属性   指定，找到由“for”的值指定的组件   属性，并将其客户端ID呈现为“for”的值   属性。如果指定了“styleClass”属性，则将其值呈现为   “class”属性的值。

我对for属性感到困惑。它的目的是什么？

Answer 1

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

  

HTML标签：标签

     

表单元素的标签（input，textarea或select）。

     

可选属性

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

id可用于将标签与表单元素相关联。

     

实施例

     

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

因此for属性必须指向标签用于标签的输入组件的id。该标签具有以下SEO和可用性优势：

1. 它在文本中讲述了相关的输入元素。
2. 在聚焦/点击时，它会聚焦并激活相关的输入元素。

由于JSF在这个问题的上下文中只是一个HTML代码生成器，因此同样适用于生成该HTML的JSF组件。

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

Searchbots会找到标签并为相关的输入元素编制索引。视觉残疾人使用的屏幕阅读器将找到标签并通过声音告诉其内容。最终用户可以单击标签以查看关注的输入。单击标签时将选中复选框/单选按钮。单击标签时，文件输入将打开浏览对话框。等等。

---

值得注意的是，相对较多的低质量JSF教程滥用 <h:outputLabel>，其唯一目的是打印出一些Hello World文本，如下所示：

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

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

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

甚至只是EL in template text：

#{bean.message}

如果您遇到过以这种方式滥用<h:outputLabel>的教程，强烈建议您停止阅读并转向更加自我尊重的资源。这强烈表明该教程的作者对基本HTML一无所知，而在学习JSF之前，这又是一个非常重要的先决条件。对基本HTML几乎一无所知的人肯定不是一个优秀的JSF老师。你永远不知道这种低质量的学习资源是否会继续陷入教导不良行为的恶性循环中，因此最好去另一个。您可以在our JSF wiki page和jsf.zeef.com底部找到相关资源。