Make WordPress Core

Opened 2 years ago

Last modified 6 months ago

#55193 new enhancement

login-form: Use the same id and class value between wp_login_form() and wp-login.php

Reported by: syshut's profile syshut Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Login and Registration Keywords: 2nd-opinion
Focuses: ui Cc:

Description (last modified by sabernhardt)

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?

Change History (3)

#1 @syshut
2 years ago

And please add "button-large" class to the submit button of wp_login_form() code?

I mean, make the two with the same css ids/class, and the same/similar html structure.

#2 @sabernhardt
2 years ago

  • Component changed from General to Login and Registration
  • Description modified (diff)

#3 @rajinsharwar
6 months ago

  • Keywords 2nd-opinion added
  • Version 6.0 deleted

Adding the "2nd Opinion" keyword to check what others think about this change being really necessary.

Note: See TracTickets for help on using tickets.