h:outputLabel的目的和它的“for”属性

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

呈现HTML“标签”元素。 如果指定,则将组件的当前值呈现为标签文本。 如果指定了“for”属性,则查找由“for”属性值指定的组件,并将其客户端ID作为“for”属性值。 如果指定了“styleClass”属性,则将其值作为“class”属性的值。

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

如果您先学习基本的HTML,则会更容易理解。 JSF是在这个问题的背景下,即仅仅是一个HTML代码生成器。 在htmldog.com有一个很好的HTML教程。 这里解释了由<h:outputLabel>生成的<label>

HTML标签:标签

表单元素的标签( inputtextareaselect )。

可选属性

for值可以用于在for的值与元素的id属性的值匹配时将标签关联到表单元素。

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

所以for属性必须指向标签所要标注的input组件的id 。 该标签具有以下SEO和可用性优势:

  1. 它在文本中告诉关联的input元素。
  2. 当它自己被聚焦/点击时,它关注和激活关联的input元素。

由于JSF在这个问题的背景下仅仅是一个HTML代码生成器,所以也适用于生成该HTML的JSF组件。

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

Searchbots会find标签,并将相关的input元素编入索引。 被视觉残疾人使用的屏幕阅读器将会find标签并通过声音告诉其内容。 最终用户可以点击标签来查看关联的input。 单击标签时将选中checkbox/单选button。 点击标签时,文件input将打开浏览对话框。 等等。


值得注意的是,相当多的低质量的JSF教程正在滥用 <h:outputLabel> ,目的是打印出如下所示的Hello World文本:

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

这个特殊用例是错误的 。 相反,应该使用<h:outputText>

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

甚至在模板文本中只是EL :

 #{bean.message} 

如果您遇到过这样滥用<h:outputLabel>的教程,强烈build议您停止阅读它,并转向更自我推崇的资源。 这是一个强烈的迹象表明,教程的作者对基本的HTML一无所知,而这又是学习JSF之前的一个非常重要的先决条件。 一个对基本的HTML一无所知的人肯定不是一个好的JSF老师。 你永远不知道这样一个低质量的学习资源是否继续恶化教学的螺旋式下降,因此更好地去换一种方法。 您可以在我们的JSF wiki页面底部和jsf.zeef.com上find相关的资源。

带有'for'和inputText的OutpulLabel是正确的语法,但'for'没有被所有jsf实现正确支持。 只有非常老的Sun Rave JSF才能正确使用'for'来显示标签,id和错误样式。