标签应该包含我的输入还是相反？ [复制]答案

【问题标题】：Should the label wrap my input or the other way around? [duplicate]标签应该包含我的输入还是相反？ [复制]
【发布时间】：2018-12-27 06:54:18
【问题描述】：

我有这个标记：

<form name="access-form" method="post" id="grant-access-page-form">
    <label for="randomized-user-radio">
        <input id="randomized-user-radio" type="radio" name="access-account-type" value="random">
            <div class="access-form--randomized-user access-form-radio-content">
                <img class="access-form-radio-content--image" src="">
                <h3 class="access-form-radio-content--title"><?php esc_html_e( 'Randomized User', 'sprout' ); ?></h3>
                <p class="access-form-radio-content--info"><?php esc_html_e( 'Create a random username that the developers can only use once per session.', 'sprout' ); ?></p>
                <ul class="access-form-radio-content--features">
                    <li class="individual-feature">
                        <p><?php esc_html_e( 'Need to re-create the account.', 'sprout' ); ?></p>
                    </li>
                    <li class="individual-feature">
                        <p><?php esc_html_e( 'Best security, but slower responses.', 'sprout' ); ?></p>
                    </li>
                    <li class="individual-feature">
                        <p><?php esc_html_e( 'Automatically deletes the account, strong security.', 'sprout' ); ?></p>
                    </li>
                </ul>
            </div>
        </input>
    </label>
    <input type="submit" value="<?php esc_html_e( 'Create Developer Account', 'sprout' ); ?>"></input>
</form>

并且想知道让label 包裹我的input 是否正确，或者应该反过来。在我看来，input 里面应该有一个label，但是使用 W3 验证器，这不会显示任何错误。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/HTML/Element/label 很好地解释了使用标签的不同样式。希望对你也有帮助:)
@Rustyjim 我是一个文档...，但我向上帝发誓，有时我会忽略一些小事。
@Eddi 正确。对不起。我会将其标记为已回答。

标签： html markup

【解决方案1】：

我通常设置表单的方式是使用定义列表

<dl>
    <dt><label for="name">Name</label></dt>
    <dd><input type="text" name="name" id="name" placeholder="John Doe" /></dd>
</dl>

标签和输入使用 for & id 属性进行分组。

PS：尝试使用 htmlentities();

【讨论】：