Better markup for login/forgot password forms
-
The login form elements should render with better, more semantic markup to allow integrators and developers to better stylize/manipulate the form. Consider the current markup for a vanilla AFO login form:
<ul class="login_wid"> <li>Username</li> <li><input type="text" name="user_username" required="required" autocomplete="off"></li> <li>Password</li> <li><input type="password" name="user_password" required="required" autocomplete="off"></li> <li><input name="login" type="submit" value="Login"></li> </ul>
The fact that I cannot differentiate between the different list items (and therefore their children elements) makes for a very limited amount of applicable styling/script. As an example, what if I wanted to hide labels and use placeholders instead? Or, what if I wanted to have actual labels that select their respective element on click?
Consider the example following markup (using https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form has a guide):
<div class="login_form"> <p class="login_form_username"> <label for="user_username">Username</label> <input type="text" name="user_username" id="user_username" required="required" autocomplete="off"> </p> <p class="login_form_password"> <label for="user_password">Password</label> <input type="password" name="user_password" id="user_password" required="required" autocomplete="off"> </p> <p class="login_form_submit"> <button>Login</button> <p> </div>
Ah, much better! I now have full styling control over every element, and labels are associated to their respective inputs. Plus, more modern themes have a better chance at instant, near-seamless integration.
I understand due to legacy purposes you may need to keep the list elements, so as to not screw over existing plugin owners that update. But please, start with adding classes to the top-level elements, and associate labels with inputs.
You can view my pull request here with proposed changes: https://github.com/wp-plugins/login-sidebar-widget/pull/1
- The topic ‘Better markup for login/forgot password forms’ is closed to new replies.