HTML <label>歧义(主要在我自己的大脑中)......？有人可以澄清吗？

Question

我最近在使用表单元素做了很多工作,特别是尝试将更多的语义标记应用到我的表单布局中,这样我就可以提供很容易设计的表单,很少或没有多余的标记,如div,span等.从语义上讲,对形式提供了一些额外的含义.

在使用标签作为元素的输入和标题的外壳元素之后,我注意到它似乎存在一些模糊性(至少在我自己的脑海中 - 如果可能的话,请完全自由地澄清这一点)关于它在正常输入和无线电/校验阵列的术语.

如果我能用一个简短的例子来解释......

<label>Amount<input type='text' name='amount' value='1' /></label>

上面的代码很公平.label标签封装了表单元素和标签文本"Amount",赋予标题在输入标签的上下文中的含义.那似乎很好......是吗？

但请考虑以下收音机......

SET A:    
<label>Colour
<span><input type='radio' name='colour' value='red' />Red</span> 
<span><input type='radio' name='colour' value='white' />Blue</span>
<span><input type='radio' name='colour' value='blue' />White</span>
</label>


SET B:    
<span>Colour
<label><input type='radio' name='colour' value='red' />Red</label> 
<label><input type='radio' name='colour' value='white' />Blue</label>
<label><input type='radio' name='colour' value='blue' />White</label>
</span>

请注意,<span>在两种情况下使用封装元素纯粹是偶然的,并且可以是现实中的任何元素.

我自己也倾向于在S​​ET A的一边犯错,因为我会认为整个收音机/复选框数组/整体都是标记的一部分,它需要在上下文意义上的标签标签,但是有没有人有任何想法,他们可以投入到这个混合？

---

在查看微格式规范(未完成与网络的其余部分)之后,我正在寻找使用光伏配对提供颜色(或任何其他设置/数组)信息.为此,我原来的SET A大纲应该足以提供页面的渲染和蜘蛛视图以及所有必要的分层信息我想要正确分类这些信息片段我认为.

我现在可能正在考虑沿着这条路走下去.(请指出任何明显的愚蠢请)

SET A [revised]:    
<somecontainerparentelement class="hproduct">
<label "p-v"><em class="property">Colour</em>
<span><input type='radio' name='colour' value='red' /><em class="value">Red</em></span> 
<span><input type='radio' name='colour' value='white' /><em class="value">Blue</em></span>
<span><input type='radio' name='colour' value='blue' /><em class="value">White</em></span>
</label>
</somecontainerparentelement>

这种方法的问题在于,我不确定pv是否允许存在<em>Colour</em>具有多个值的单个参数(即,其中的class='value'元素<labels>).

虽然没有问题,但我不必失去任何睡眠,头发或牙齿试图在IE中设计一个传奇(我假设我的脸撞在我的桌子和键盘上失去了牙齿)......

Answer 1

我会做的是......

<fieldset>
    <legend>Colour</legend>
    <label><input type="radio" name="colour" value="red" />Red</label> 
    <label><input type="radio" name="colour" value="white" />Blue</label>
    <label><input type="radio" name="colour" value="blue" />White</label>
</fieldset>

此外,您可以将label元素分开,并将其for属性链接到id元素的属性.它通常使它们的样式更容易IMO.

<fieldset>
    <legend>Colour</legend>
    <input type="radio" name="colour" value="red" id="colour-red" />
    <label for="colour-red">Red</label> 
    <input type="radio" name="colour" value="white" id="colour-white" />
    <label for="colour-white">White</label>
    <input type="radio" name="colour" value="blue" id="colour-blue" />
    <label for="colour-blue">Blue</label>
</fieldset>

请注意,该legend元素很难跨浏览器设置样式.