No HTML Classes/IDs Associated With get_the_password_form() Output

[philiparthurmoore]

Currently get_the_password_form() outputs a password form that offers no HTML classes or IDs for proper styling:

/**
 * Retrieve protected post password form content.
 *
 * @since 1.0.0
 * @uses apply_filters() Calls 'the_password_form' filter on output.
 *
 * @return string HTML content for password form for password protected post.
 */
function get_the_password_form() {
	global $post;
	$label = 'pwbox-'.(empty($post->ID) ? rand() : $post->ID);
	$output = '<form action="' . get_option('siteurl') . '/wp-pass.php" method="post">
	<p>' . __("This post is password protected. To view it please enter your password below:") . '</p>
	<p><label for="' . $label . '">' . __("Password:") . ' <input name="post_password" id="' . $label . '" type="password" size="20" /></label> <input type="submit" name="Submit" value="' . esc_attr__("Submit") . '" /></p>
	</form>
	';
	return apply_filters('the_password_form', $output);
}

It would be quite useful to add classes to the form and input elements in this output so that we can properly style the password form without having to filter the output in, for example, a theme's functions.php file.

[SergeyBiryukov]

If a theme uses post_class(), it should be possible to style the form using
.post-password-required form.

[westi]

Replying to SergeyBiryukov:

If a theme uses post_class(), it should be possible to style the form using
.post-password-required form.

True.

It would still be nice to add a class on the form anyway.

[philiparthurmoore]

Replying to SergeyBiryukov:

If a theme uses post_class(), it should be possible to style the form using
.post-password-required form.

Yes, but on index.php and archive.php-generated pages that have multiple password-protected posts it would be useful to have more fine-grained control over the forms. Also, there may be other forms/input on password protected pages/posts that may be adversely affected by using the body class to style those inputs. Cheers.

Edit. I obviously didn't read this correctly. Disregard my comments about body class. I think they may still apply to post class, though.

[westi]

@philiparthurmoore: some feedback on your patch:

• Thanks for updating the spacing as you went through :)
• I would name the classes: post-password-form, post-password-input, and post-password-submit - that way they are clearly semantic.

If you could update your patch to make those couple of changes that would be great :)

[philiparthurmoore]

Adjusted spacing in patch and added semantic classes to form

[philiparthurmoore]

Thanks very much for your feedback, @westi. I've added those changes to the patch and re-attached it. Cheers.

[azaozz]

Looking at get_the_password_form.patch we won't need 3 classes to style 3 elements. A post-password-form class on the <form> is enough. Also we don't need a randomized ID for both <label> and <input type="password" /> as the label surrounds the input field.

So it would look like this:

$output = '<form action="' . get_option('siteurl') . '/wp-pass.php" class="post-password-form" method="post"> 
<p>' . __("This post is password protected. To view it please enter your password below:") . '</p> 
<p><label>' . __("Password:") . ' <input name="post_password" type="password" size="20" /></label>
<input type="submit" name="Submit" value="' . esc_attr__("Submit") . '" /></p>';

All of the above HTML can be styled with .post-password-form p, .post-password-form label input and even .post-password-form input[type="submit"] if needed.

[philiparthurmoore]

Taking into account Andrew Ozz's suggestions

[philiparthurmoore]

Replying to azaozz:

Looking at get_the_password_form.patch we won't need 3 classes to style 3 elements. A post-password-form class on the <form> is enough. Also we don't need a randomized ID for both <label> and <input type="password" /> as the label surrounds the input field.

So it would look like this:

$output = '<form action="' . get_option('siteurl') . '/wp-pass.php" class="post-password-form" method="post"> 
<p>' . __("This post is password protected. To view it please enter your password below:") . '</p> 
<p><label>' . __("Password:") . ' <input name="post_password" type="password" size="20" /></label>
<input type="submit" name="Submit" value="' . esc_attr__("Submit") . '" /></p>';

All of the above HTML can be styled with .post-password-form p, .post-password-form label input and even .post-password-form input[type="submit"] if needed.

Thank you very much for your suggestions and input, @azaozz. Cheers.

[westi]

In 25010:

Make is much easier for a theme to style the Post Password form.

Fixes #18729 props philiparthurmoore for the original patches.

[nacin]

​http://blog.paciellogroup.com/2011/07/html5-accessibility-chops-form-control-labeling/

Even when a label wraps an input, the for/id attributes are needed for many accessibility tools (and I want to say IE6?).

[westi]

In 25011:

Restore the for/id attributes in the post password for as they are necessary for accessibility tools. Fixes #18729.