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

发布于 2024-12-10 15:20:08 字数 841 浏览 0 评论 0原文

输入是互斥的，要么您有一个金额，要么是一个自定义金额。文档类型是 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>

原文

How should i set the FOR attributes for this controller group to optimize accessabilty?

The inputs are mutually exclusive, either you have an amount or a customamount.
The doctype is 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

双马尾 2024-12-17 15:20:08

<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>

<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>

回复收藏 0 原文

放我走吧 2024-12-17 15:20:08

为每个控件设置 id-Attribute，然后使用 ..，如下所示：

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

Set the id-Attribute for every control, then use <label for="{controlId}">..</label> like this:

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

回复收藏 0 原文

~没有更多了~