CSS3+HTML5 instance: HTML5 and CSS3 Making login forms

Article Introduction: HTML5 provides a number of new elements that allow us to easily implement practical Web Forms without JS, CSS3 offers a number of new features that allow new design effects (such as animations, gradients, etc.) to be implemented.

HTML5 provides a number of new elements that allow us to easily implement practical Web Forms without JS, CSS3 offers a number of new features that allow new design effects (such as animations, gradients, etc.) to be implemented.

Here we have a login form based on HTML5 and CSS3. The instance code uses some of the new features of the form provided by HTML5, so you need to use browsers that support HTML5 and CSS3 to view it.

HTML5 Code:

<form id= "Login" >
<fieldset id= "Inputs" >
<input id= "username" type= "text" placeholder= "username" Autofocus required>
<input id= "password" type= "password" placeholder= "password" required>
</fieldset>
<fieldset id= "Actions" >
<input type= "Submit" id= "submit" value= "Login" >
<a href= "" > Forgot Password? </a><a href= "" > Registration </a>
</fieldset>
</form>

Here are some of the HTML5 attributes used here are explained in the latest specification:

• placeholder– provides a hint (hint) that describes the value expected by the input field. (Note: The placeholder property applies to the following types of <input> tags: text, search, URL, telephone, email, and password. hint (hint) appears when the input field is empty, and disappears when the input field receives focus:
• required– must fill in the input fields (cannot be empty) before submitting. (Note: The Required property applies to the following types of <input> tags: text, search, URL, telephone, email, password, date pickers, number, checkbox , radio and file. )
• autofocus– when the page loads, the field automatically gets the focus
• Type= "Password" – Defines the password field. The characters in the password field are masked (shown as asterisks or origin).
  

CSS3 Code:
This demo uses the CSS3 shadow gradient and other effects. For example, the following code is used to implement the Box-shadow effect of the entire block of a login form:

#login {
Box-shadow:
0 0 2px rgba (0, 0, 0, 0.2),
0 1px 1px rgba (0, 0, 0,. 2),
0 3px 0 #fff, 0 4px 0 rgba (0, 0, 0,. 2),
0 6px 0 #fff,
0 7px 0 rgba (0, 0, 0,. 2);
}