Tutorial: Get your form upgraded to CSS3 and HTML5 client authentication

Today, let's take a look at how to create a practical and powerful form that is created using today's hottest technology HTML5 and CSS3, and can be verified by the client through HTML5.

View Preview Download Attachments

The first step: Planning the form function

First of all, we have to plan for our form what the function, in what form to behave. In this example, we will make a simple message form. The following features are required:

• Name
• Email
• Website address
• Submit button

We all want users to be able to fill in the correct information before committing, to achieve this, we can use the HTML5 client to verify the new technology. So how do you use this feature? Here is a simple use of server authentication, do not do further in-depth understanding.

Step Two: Plan form

In my heart, longing for a beautiful and simple submission form. Although it is ugly now, he is not a pheasant but a phoenix.

As shown, contains the following sections:

• Table title (Required fields)
• Table Labels
• Table input (Placeholder text)
• Form hints
• Submit button

Now that we've identified the form, we're ready to create the HTML structure code.

Step three: Create HTML structure code

Create the most basic HTML code based on the form identified above.

<! DOCTYPE html>
Here the page is still blank. This is just the most basic code for a Web page.
Fourth Step: HTML form
Start creating the form in the page.
<form class= "Contact_form" action= "method=" post "name=" Contact_form "></form>
Fifth step: HTML form elements
To better understand and maintain forms, we will add the elements of the form step-by-step.
The first thing to start with is to create the form header and the first input box:
<ul>    <li>         
Form hints
According to our plan, we want to add a hint to the form's e-mail and website, so we'll input add the ToolTip area below and then treat them in a uniform style.
<li>    <label for= "email" > Email:</label>    <input type= "text" name= "email"/>    < Span class= "Form_hint" > Correct format: [Email protected]</span></li>
The rest of the form input elements
Continue adding additional form input elements.
<li>    <label for= "website" > website:</label>    <input type= "text" name= "website"/>    <span class= "Form_hint" > Correct format for:http://www.jiawin.com</span></li><li>    <label for= " Message "> Message:</label>    <textarea name=" message "cols=" 6 "rows=" ></textarea></li> <li>    <button class= "Submit" type= "submit" > Submit </button></li>
Sixth step: Add placeholder Properties
A Web form that is one of the improvements in HTML5 can set placeholder placeholder properties. Placeholder fields are displayed when the input area is empty or not in focus, and we can only use JavaScript before. Adding a placeholder field directs the user to the correct input information.
<input type= "text" name= "name" placeholder= "Javin"/><input type= "text" name= "email" placeholder= "[email Protected] "/><input type=" text "name=" website "placeholder=" http://www.jiawin.com/"/>
Tip tips: placeholder Text style definitions:
Here's a little tip, if you want to change the default style of the placeholder, you can modify it in the following code (note the prefix of the browser):
:-moz-placeholder {    Color:blue;}::-webkit-input-placeholder {    color:blue;}
Generally supported in modern browsers placeholder , except for IE9. If you need his support in all browsers, consider using JavaScript solutions.
Seventh step: Define the basic CSS
Next, define the underlying CSS style.
1. Formatting: The style of focus
WebkitThe kernel browser will automatically add some focus styles, we want to customize the style, so we need to get rid of the default values.
*:focus {outline:none;}
2. Font layout style
Add fonts and font size styles.
Body {font:14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Sans-serif;}. Contact_form H2,. Contact_form label {Font-family:georgia, Times, "Times New Roman", serif;}. Form_hint,. required_notification {font-size:11px;}
3. List Style
Because our form structure is used in lists, the definition list is beautified.
. contact_form ul {    width:750px;    List-style-type:none;    List-style-position:outside;    margin:0px;    padding:0px;}. Contact_form li{    padding:12px;    border-bottom:1px solid #eee;    Position:relative;}
In addition, we added the top and bottom border lines, using the :first-child and :last-child selector to implement. This adds to the beauty of our form, but the old browsers don't support these two selectors, but that's not the point, we have to look ahead as long as the most popular modern browsers support it.
. Contact_form li:first-child,. Contact_form li:last-child {    border-bottom:1px solid #777;}
4. Table header Style
Now to define our header style, there are two parts, one is the title title and the other is the asterisk (*) of the notification indicates a required field.
. contact_form H2 {    margin:0;    Display:inline;}. required_notification {    color: #d45252;    margin:5px 0 0 0;    Display:inline;    Float:right;}
5. Form Input Style
The input elements of the form are the core of the form and are used to gather information.
. Contact_form label {    width:150px;    margin-top:3px;    Display:inline-block;    Float:left;    padding:3px;}. Contact_form input {    height:20px;    width:220px;    padding:5px 8px;}. Contact_form textarea {padding:8px; width:300px;}. Contact_form button {margin-left:156px;}
Now add some additional landscaping styles, which will be used to CSS3, and the visual effect will be even more in modern browsers.
. contact_form input,. contact_form textarea {border:1px solid #aaa;    box-shadow:0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius:2px;}.    Contact_form Input:focus,. Contact_form textarea:focus {background: #fff;    border:1px solid #555; box-shadow:0 0 3px #aaa;}    /* Button Style */button.submit {background-color: #68b12f;    Background:-webkit-gradient (linear, left top, left bottom, from (#68b12f), to (#50911e));    Background:-webkit-linear-gradient (top, #68b12f, #50911e);    Background:-moz-linear-gradient (top, #68b12f, #50911e);    Background:-ms-linear-gradient (top, #68b12f, #50911e);    Background:-o-linear-gradient (top, #68b12f, #50911e);    Background:linear-gradient (Top, #68b12f, #50911e);    border:1px solid #509111;    border-bottom:1px solid #5b992b;    border-radius:3px;    -webkit-border-radius:3px;    -moz-border-radius:3px;    -ms-border-radius:3px;    -o-border-radius:3px;    Box-shadow:inset 0 1px 0 0 #9fd574; -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;    -moz-box-shadow:0 1px 0 0 #9fd574 inset;    -ms-box-shadow:0 1px 0 0 #9fd574 inset;    -o-box-shadow:0 1px 0 0 #9fd574 inset;    Color:white;    Font-weight:bold;    PADDING:6PX 20px;    Text-align:center; text-shadow:0 -1px 0 #396715;}    button.submit:hover {opacity:.85; Cursor:pointer;}    button.submit:active {border:1px solid #20911e;    box-shadow:0 0 10px 5px #356b0b inset; -webkit-box-shadow:0    0 10px 5px #356b0b inset;    -moz-box-shadow:0 0 10px 5px #356b0b inset;    -ms-box-shadow:0 0 10px 5px #356b0b inset; -o-box-shadow:0 0 10px 5px #356b0b inset;}
Eighth step: Add CSS3 interaction
Let's add the interactive effect and increase the length of the input box when you enter the box in the mouse point.
. Contact_form input:focus,. contact_form Textarea:focus {/* Add this to the already existing style */    Padding-right:7 0px;}
In a supported transition browser, add a slow CSS transition effect.
. contact_form input,. contact_form TEXTAREA {/* Add this to the already existing style */    -moz-transition:padding. 2 5s;    -webkit-transition:padding. 25s;    -o-transition:padding. 25s;    transition:padding. 25s;}
Nineth Step: Add HTML5 Required Property
What we have been looking forward to is finally coming, is the HTML5 form processing tool. When added required to Input/textarea in HTML5, it tells the browser that the form value must exist before the form is submitted, so that if no fields are filled in, the form will not be submitted. Now we add in the input box that needs validation required .
<input type= "text" name= "name" Required/><input type= "text" name= "email" required/><input type= "text" Name= "website" Required/><textarea name= "message" cols= "All" rows= "6" required ></textarea>
Tenth step: Define the required field style
This defines the style of the input box after the input text, we place the asterisk (*) as the background map to each required field, so we have to fill the space on the right to prevent the text from overlapping to the red asterisk image.
. contact_form input,. contact_form textarea {    padding-right:30px;}
Use the CSS pseudo-class selector :required to add a red asterisk image.
Input:required, textarea:required {    background: #fff URL (images/red_asterisk.png) no-repeat 98% Center;}
What happens when a form is submitted?
Now after the form is submitted, if the form is incorrect fill information or blank, then there will be different display effect, this is because different browsers, prompting the user's pop-up box visual effect is not the same, I hope that one day in the future can be really all standardized.
You can check the Quirksmode to see if your browser supports it required .
Tip tips:
You can actually change the style of some of the browser's pop-up boxes:
::-webkit-validation-bubble-message {    padding:1em;}
11th Step: Understanding the HTML5 new Type property and client validation
The validation of HTML5 is based on the type attribute in the form, and in the last few years HTML supports only a small subset of the type attribute, for example: type="text" HTML5 appears after adding a few type new attributes, which contain email and url , These will all be used in our form.
By combining the input type properties and the new required properties, the browser can now implement the client that validates the form data. If the browser does not support new type properties, such as: type="email" , then he will be type="text" the default, which is very exciting for us, in essence, this is a regressive compatibility performance, all the browsers on Earth can be compatible with it.
Then, if the browser does not support the new type properties, there is no obvious difference for the browser on the mobile device (unless a CSS rule is defined), the properties will be type="email" the same as they type="text" appear, and then there is a difference in the mobile browser when it comes to the user interface.
An example: IPhone
Apple's iphone detects form types and dynamically changes the keyboard on the screen to provide contextual associative characters. For example, all e-mail addresses require characters: "@" and ". , the iphone will automatically provide these characters when it confirms that the input type is e-mail.
12th Step: Change the Type property
In this case, we've set the form fields to the default type="text" , and now we need to change the "e-mail" and "website" to: type="email" type="url" .
<input type= "Email" name= "email" placeholder= "[email protected]" required/><input type= "url" name= "website" Placeholder= "http://www.jiawin.com/" required/>
13th Step: HTML5 Verification
As mentioned earlier, HTML5 is validated by default type . This verification function is the default activation state, if you want to turn off this feature can be novalidate implemented with attributes:
<form novalidate> <--do not validate this form--    <input type= "text"/></form>
Name field
First, take a look at the first field, is "name", required to fill in the name. First, when you define a style that is displayed as an error (invalid), we add a red border and a red shadow when the mouse is over the focus. A small exclamation point icon with an "invalid" is also displayed.
. Contact_form input:focus:invalid,. contact_form textarea:focus:invalid {/* When a field was considered invalid by the Bro Wser *    /background: #fff URL (images/invalid.png) no-repeat 98% Center;    box-shadow:0 0 5px #d45252;    Border-color: #b03535}
If the user fills in the correct information, then we define the style as green border and green shadow and display a "correct" tick of the small icon, this time, regardless of whether the mouse is in the focus, should maintain the correct state.
. Contact_form input:required:valid,. contact_form textarea:required:valid {/* When a field was considered valid by the Bro Wser *    /background: #fff URL (images/valid.png) no-repeat 98% Center;    box-shadow:0 0 5px #5cd053;    Border-color: #28921f;}
Email fields and URL fields
Because we set the type properties of the and required , so our CSS style and validation rules have been applied to the browser, automatically according to the unique rules of self-validation.
14th Step: Introduce the Pattern property of HTML5
Use type="email" attributes to illustrate the fields that are validated in most browsers @ (any character + "@" symbol + any character). This display is limited, and relying on it to prevent users from entering spaces or information is not a perfect solution. Another type="url" property, in most browsers, is that the minimum validation field is "Any word multibyte a colon". If you enter "H:" and then validate it, it will be verified, but obviously it is not a URL, so we want to be able to verify the information entered by the user in more detail, then how should we solve the problem by using server Authentication in HTML5?
Pattern Property
This pattern property can accept a JavaScript regular expression, we can validate the field with a regular expression, and finally look at our HTML code:
<input type= "url" name= "website" placeholder= "http://johndoe.com" Required pattern= "(HTTP|HTTPS)://.+"/>
Now our "Site" field will only accept http:// or https:// start characters. This regular expression pattern is sometimes difficult to fathom, but if you have time to learn it, you will open up another world.
15th step: Style of the cue for the form field
Now let's define the following form prompt, which will be displayed to the user according to the correctness of the form validation rules when they use the form, ultimately directing the user to submit the form correctly.
. form_hint {    background: #d45252;    border-radius:3px 3px 3px 3px;    Color:white;    margin-left:8px;    padding:1px 6px;    z-index:999; /* Hints stay above all other elements */    position:absolute;/* Allows proper formatting if hint is both lines *    / Display:none;}
Because in the default form, the prompt will not appear, so we first set to display:none , and then according to the form to fill in the information is correct or not to display different style of the prompt.
Use:: Before selector
Now, in order to beautify the cue box, we need a small triangle to guide the user. Small triangles can be displayed with pictures, but here we use CSS to write the display, because this triangle is not a very important function in the page, just a visual form. We can use Unicode geometric images and combine ::before selectors to achieve the final effect.
In general, we use Unicode format encoding in our Web pages to display special graphics, as shown in. Because we're going to use CSS ::before selectors, in the content:"" rules we have to use the Unicode escape code corresponding to the triangle. Then we position it and show it where we want it to appear.
. form_hint::before {    content: "\25C0";/* Left point triangle in escaped Unicode *    /color: #d45252;    Position:absolute;    top:1px;    left:-6px;}
Using adjacent selectors
Finally, we use the adjacent selector to show or hide the form's cue words. The adjacent selector (x + y) selects the Y element that adheres to the X element. Displays the prompt based on the results of the form field validation, and then displays and hides using the adjacent selector.
. contact_form Input:focus +. form_hint {display:inline;}.  Contact_form Input:required:valid +. Form_hint {background: #28921f;}/* Change form hint color when valid */.contact_form Input:required:valid +. Form_hint::before {color: #28921f;}/* Change form hint arrow color when valid */
As you can see from the CSS, we've also set up a hint that shows the different style styles as you judge whether a field is correct.
The 16th step: Sit down and admire your beautiful HTML5 form
View Preview Download Attachments
Conclusion
As you can see, the HTML5 form is characterized by its simplicity and its backward compatibility, which, if applied to your website, does not destroy anything. The verification function of HTML5 is also getting closer to the verification of the client, which can help the user fill in the correct form effectively. However, the validation of HTML5 still does not replace server-side validation. So far, this is the best way to deal with, thank you very much for your reading.
Translation: webdesigntuts+
This article from: http://www.jiawin.com/forms-css3-html5-validation/
Tutorial: Get your form upgraded to CSS3 and HTML5 client authentication