[wp-trac] [WordPress Trac] #55193: login-form: Use the same id and class value between wp_login_form() and wp-login.php

[WordPress Trac]

#55193: login-form: Use the same id and class value between wp_login_form() and wp-
login.php
------------------------------------+------------------------------
 Reporter:  syshut                  |       Owner:  (none)
     Type:  enhancement             |      Status:  new
 Priority:  normal                  |   Milestone:  Awaiting Review
Component:  Login and Registration  |     Version:  trunk
 Severity:  normal                  |  Resolution:
 Keywords:                          |     Focuses:  ui
------------------------------------+------------------------------
Changes (by sabernhardt):

 * component:  General => Login and Registration


Old description:

> Hi, below are the codes of login forms html output of wp_login_form()
> function, and wp-login.php page
>

> {{{
> <!--   The html output of login-form in wp-login.php page  -->
>
> <form name="loginform" id="loginform" action="https://xxxxxxxxxx/wp-
> login.php" method="post">
>         <p>
>                 <label for="user_login">Username or Email Address</label>
>                 <input type="text" name="log" id="user_login"
> class="input" value="" size="20" autocapitalize="none">
>         </p>
>         <div class="user-pass-wrap">
>                 <label for="user_pass">Password</label>
>                 <div class="wp-pwd">
>                         <input type="password" name="pwd" id="user_pass"
> class="input password-input" value="" size="20">
>                         <button type="button" class="button button-
> secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="Show
> password">
>                                 <span class="dashicons dashicons-
> visibility" aria-hidden="true"></span>
>                         </button>
>                 </div>
>         </div>
>         <p class="forgetmenot">
>                 <input name="rememberme" type="checkbox" id="rememberme"
> value="forever">
>                 <label for="rememberme">Remember Me</label>
>         </p>
>         <p class="submit">
>                 <input type="submit" name="wp-submit" id="wp-submit"
> class="button button-primary button-large" value="Log In">
>                 <input type="hidden" name="redirect_to"
> value="https://xxxxxxxxxx/">
>                 <input type="hidden" name="testcookie" value="1">
>         </p>
> </form>
> }}}
>

> {{{
> <!--   The html output of login-form with wp_login_form() function  -->
>
> <form name="loginform" id="loginform" action="https://xxxxxxxxxx/wp-
> login.php" method="post">
>         <p class="login-username">
>                 <label for="user_login">Username or Email Address</label>
>                 <input type="text" name="log" id="user_login"
> class="input" value="" size="20" tabindex="0">
>         </p>
>         <p class="login-password">
>                 <label for="user_pass">Password</label>
>                 <input type="password" name="pwd" id="user_pass"
> class="input" value="" size="20" tabindex="0">
>         </p>
>         <p class="login-remember">
>                 <label>
>                         <input name="rememberme" type="checkbox"
> id="rememberme" value="forever" tabindex="0">
>                         Remember Me
>                 </label>
>         </p>
>         <p class="login-submit">
>                 <input type="submit" name="wp-submit" id="wp-submit"
> value="Log In" tabindex="0" class="button button-primary">
>                 <input type="hidden" name="redirect_to"
> value="https://xxxxxxxxxx/">
>         </p>
> </form>
> }}}
>
> Look into same field between the two html outputs, you can see most of
> the p, label, and input tag has different values of the css ids and
> classes.
>
> for example:
>
> wp_login_form():
> <input name="rememberme" type="checkbox" id="rememberme" value="forever">
> wp-login.php:
> <input name="rememberme" type="checkbox" id="rememberme" value="forever"
> tabindex="0">
>
> the ids are the same, but
>
> wp_login_form():
> <p class="forgetmenot">
> wp-login.php:
> <p class="login-remember">
>
> the classes are different
>
> Can you make the ids and classes same, so it will be easier for me to
> make the two login forms ( wp_login_form() and  wp-login.php ) with
> consistent style?

New description:

 Hi, below are the codes of login forms html output of `wp_login_form()`
 function, and wp-login.php page


 {{{
 <!--   The html output of login-form in wp-login.php page  -->

 <form name="loginform" id="loginform" action="https://xxxxxxxxxx/wp-
 login.php" method="post">
         <p>
                 <label for="user_login">Username or Email Address</label>
                 <input type="text" name="log" id="user_login"
 class="input" value="" size="20" autocapitalize="none">
         </p>
         <div class="user-pass-wrap">
                 <label for="user_pass">Password</label>
                 <div class="wp-pwd">
                         <input type="password" name="pwd" id="user_pass"
 class="input password-input" value="" size="20">
                         <button type="button" class="button button-
 secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="Show
 password">
                                 <span class="dashicons dashicons-
 visibility" aria-hidden="true"></span>
                         </button>
                 </div>
         </div>
         <p class="forgetmenot">
                 <input name="rememberme" type="checkbox" id="rememberme"
 value="forever">
                 <label for="rememberme">Remember Me</label>
         </p>
         <p class="submit">
                 <input type="submit" name="wp-submit" id="wp-submit"
 class="button button-primary button-large" value="Log In">
                 <input type="hidden" name="redirect_to"
 value="https://xxxxxxxxxx/">
                 <input type="hidden" name="testcookie" value="1">
         </p>
 </form>
 }}}


 {{{
 <!--   The html output of login-form with wp_login_form() function  -->

 <form name="loginform" id="loginform" action="https://xxxxxxxxxx/wp-
 login.php" method="post">
         <p class="login-username">
                 <label for="user_login">Username or Email Address</label>
                 <input type="text" name="log" id="user_login"
 class="input" value="" size="20" tabindex="0">
         </p>
         <p class="login-password">
                 <label for="user_pass">Password</label>
                 <input type="password" name="pwd" id="user_pass"
 class="input" value="" size="20" tabindex="0">
         </p>
         <p class="login-remember">
                 <label>
                         <input name="rememberme" type="checkbox"
 id="rememberme" value="forever" tabindex="0">
                         Remember Me
                 </label>
         </p>
         <p class="login-submit">
                 <input type="submit" name="wp-submit" id="wp-submit"
 value="Log In" tabindex="0" class="button button-primary">
                 <input type="hidden" name="redirect_to"
 value="https://xxxxxxxxxx/">
         </p>
 </form>
 }}}

 Look into same field between the two html outputs, you can see most of the
 p, label, and input tag has different values of the css ids and classes.

 for example:

 wp_login_form():
 {{{<input name="rememberme" type="checkbox" id="rememberme"
 value="forever">}}}
 wp-login.php:
 {{{<input name="rememberme" type="checkbox" id="rememberme"
 value="forever" tabindex="0">}}}

 the ids are the same, but

 wp_login_form():
 {{{<p class="forgetmenot">}}}
 wp-login.php:
 {{{<p class="login-remember">}}}

 the classes are different

 Can you make the ids and classes same, so it will be easier for me to make
 the two login forms ( `wp_login_form()` and  wp-login.php ) with
 consistent style?

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/55193#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform