h:outputLabel及其"for"属性的用途

Question

下面是摘录的<h:outputLabel>标签文件:

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

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

Answer 1

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

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>与唯一的目的,以打印出一些世界您好文字,如下所示:

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

因此,这个特定的用例是错误的.相反,<h:outputText>应该使用:

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

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

#{bean.message}

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