Question

如何设置此控制器组的FOR属性以优化可访问性？

输入是互斥的，无论您有金额还是惯例。 doctype是HTML5。

<div class="inputRow">
    <input type="radio" name="amount" value="50" class="preset_amount" checked="checked" />
    <label>50</label>            
    <input type="radio" name="amount" value="100" class="preset_amount" />
    <label>100</label>
    <input type="radio" name="amount" value="150" class="preset_amount" />
    <label>150</label>
</div>

<div class="inputRow">      
    <input id="customamount" name="customamount" type="text" placeholder="<?php echo _('custom amount') ?>" <?php getValue("customamount") ?> />
    <label for="customamount"><?php echo _("or choose a custom amount") ?></label>
</div>

Answer 1

<div class="inputRow">
    <input type="radio" id="present_amount_50" name="amount" value="50" class="preset_amount" checked="checked" />
    <label for="present_amount_50">50</label>            
    <input type="radio" id="present_amount_100" name="amount" value="100" class="preset_amount" />
    <label for="present_amount_100">100</label>
    <input type="radio" id="present_amount_150" name="amount" value="150" class="preset_amount" />
    <label for="present_amount_150">150</label>
</div>

<div class="inputRow">      
    <input id="customamount" name="customamount" type="text" placeholder="<?php echo _('custom amount') ?>" <?php getValue("customamount") ?> />
    <label for="customamount"><?php echo _("or choose a custom amount") ?></label>
</div>

Answer 2

为每个控件设置id - 属性，然后像这样使用<label for="{controlId}">..</label>：

<div class="inputRow">
    <input id="rb1" type="radio" name="amount" value="50" class="preset_amount" checked="checked" />
    <label for="rb1">50</label>            
    ...
</div>

我应该如何为此控制器组设置FOR属性以优化可访问性？

2 个答案: