Should the label wrap my input or the other way around?

Question

I have this markup:

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

And was wondering if it's correct to have the label wrap my input or it should be the other way around. Way I see it, the input should have a label inside of this, but using the W3 validator, this shows no errors whatsoever.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label is a great explanation of different styles to use label. Hopefully helps you also :) — UnpassableWizard, Jul 19 '18 at 08:12
@Rustyjim I'm a documentation who..., but I swear to God, sometimes small stuff escapes me. — coolpasta, Jul 19 '18 at 08:14

score 0 · Answer 1 · answered Jul 19 '18 at 08:10

The way I normally set up my forms is using a definition list

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

Labels and inputs are grouped using the for & id attributes.

PS: try and make use of htmlentities();

Should the label wrap my input or the other way around?

1 Answers1