Add HTML5 "required" attributes to the login form

[aznadesign]

Hi evety one,
Today i try to login to WordPress dashboard and i knowed if i don`t write any thing in the input of username or password and then show message login error, I think if we add html5 tag "required" to the inputs of forms to validate the input labels not empty it is better for server and WordPress.
An also add feature to allow users and admins login by emails and add "type="email" required for login form.
And add feature to allow users to change admin dashboard design, like virtual menu, insert of customized code e.g #cd2122 by users
At end add stat menu to admin panel and show how many times WordPress up-time proudly, how many users, comments, plugins, alexa rank and etc
An also add Better WordPress menu that has 2 sub menu, one for security of WordPress like plugins and 2nd Performance and speed of site e.g minifity css and js and etc
Also add menu to seo features of core WordPress like add social icons to bottom of posts to allow visitor to share posts or add ​https://developers.google.com/structured-data/testing-tool/ codes to seo WordPress Sites.
This feature available by the plugins but if in core WordPress is better and faster and structure of WordPress is better.
Best regards,
Milad Shahi

[swissspidy]

The first two points are the ones relevant here:

• Add required attributes to required input fields, like in the login form
• Use input type email for the username login field (although emails aren't allowed by default)

[sanchothefat]

Adds required attributes to the login / register / forgot pass form fields as well as autofocus on first form field in each case

[afercia]

The required attribute is a boolean attribute, doesn't need a value.
​http://www.w3.org/TR/html5/forms.html#the-required-attribute

Autofocus too is a boolean attribute
​http://www.w3.org/TR/html5/forms.html#autofocusing-a-form-control:-the-autofocus-attribute
but it should be used carefully, and generally avoided. If really, really, necessary then it should be disabled for mobile devices.

See for example the discussion on autofocus on #29102.

[afercia]

Adding required to the input fields has some value, it would at least avoid to submit the form with empty fields. Something worth considering. The username field now accepts also emails so not sure what can be done here about the type attribute.

As per the other points, please do feel free to open separate tickets if still relevant. Mixing together several issues in one single ticket makes things pretty unmanageable.

[swissspidy]

The username field now accepts also emails so not sure what can be done here about the type attribute.

I think now it makes even more sense because it will change the keyboard on mobile devices accordingly.

[alexstine]

My patch adds required attribute to all fields. I suggest not adding type="email" right now as that would force HTML to validate the field for email address only and a username could not be used. The only way around this would be to add novalidate to the <form> tag which defeats the purpose of HTML5 validation.

[alexstine]

Adds required attribute to all form fields in wp-login.php.

[nant82]

Added attibute required to all mandatory inputs. Including register form, login form and password recovery form.

[sabernhardt]

refresh for spacing and attribute values

[sabernhardt]

32510.1.diff​ has a few coding standards fixes.

According to ​HTML coding Standards, attributes do need the value. (The standards document could be updated, but these inputs are self-closing for valid XHTML anyway.)

[afercia]

Related: #47595 and #47505 and the Slack conversations linked on those tickets. Specifically, the HTML5 Constraint validation API seems to be still inconsistent across browsers. Also, a good first step to take would be some research to see what the current support from assistive technologies is.

[sabernhardt]

@ryokuhi shared some old ​research into the required attribute in Slack.

Trac ticket: https://core.trac.wordpress.org/ticket/32510

[sabernhardt]

Thanks for refreshing the patch!

Additional research to consider:

• ​https://adrianroselli.com/2019/02/avoid-default-field-validation.html
• ​https://www.tpgi.com/required-attribute-requirements/

​Firefox still announces "invalid entry" before having the chance to type anything in the field, even when adding aria-invalid="false" (Firefox 112, Windows 10, NVDA 2023.1).