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

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Today we'll take a look at how to create a practical and powerful form that uses today's hottest technology HTML5 and CSS3 to create and can be validated by HTML5.

View Preview

The first step: Planning the form function

First of all, we have to plan for our form what function, in what form. In this example, we make a simpler message form. The required features are as follows:

Name

E-mail

Website address

Submit button

We all want users to be able to fill in the right information before submitting, and to do this, we can use the HTML5 client to validate the new technology. So how do you use this function? Here is a simple use of server authentication, do not do further in-depth understanding.

Step two: Plan form form

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

　　

As shown in the figure above, contains the following sections:

Table title (Required fields)

Table Labels

Form input (placeholder text)

Form hints

Submit button

Now that we have identified the form, we begin to create the HTML structure code.

Step three: Create HTML structure code

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

Here the page is still blank. This is just a Web page's most basic code.

Fourth Step: HTML form

Start creating the form in the page.

Fifth step: HTML form elements

To better understand and maintain form forms, we will add the elements of the form step-by-step.

The first thing to start is to create the form header and the first input box:

Contact Us

* Indicates required fields

Name:

　　

Form hints

According to our plan, we want to add a prompt to the form's "e-mail" and "website", so we need to add the prompt area below the input and then treat them as a unified style.

E-mail: correct format: javin@example.com

　　

Remaining form input elements

Continue adding additional form input elements.

Web site: Correct format: http://www.jiawin.com

Message:

Submitted

　　

Step Sixth: Add placeholder properties

Web Forms that are one of the improvements to HTML5 can set placeholder placeholder properties. Placeholder fields are displayed when the input area is empty or not in focus, which we used to do only with JavaScript. Adding placeholder fields can guide the user in the correct input information.

Tip tip: Placeholder text style definition:

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 browser prefix):

:-moz-placeholder {Color:blue}::-webkit-input-placeholder {color:blue;}

In modern browsers generally support placeholder, in addition to IE9. If you need his support in all browsers, consider using JavaScript solutions.

Seventh step: Define basic CSS

Next, define the basic CSS style.

1. Format: Focus Style

WebKit Kernel Browser will automatically add some focus style, we want to customize the style, so we need to remove the default value.

*:focus {Outline:none}

　　

2. Font layout style

Add fonts and font size styles.

Body {font:14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", 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 a list, we define the list to beautify it.

. 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: First-child and: Last-child selector to achieve. 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 need to look forward, as long as the most popular modern browser support is on the line.

. 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 notification asterisk (*) that 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 will be more visually effective 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 NRC , 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; }

　　

Step Eighth: Add CSS3 interaction

Let's add an interactive effect and increase the length of the input box when you enter a box in the mouse point.

. Contact_form input:focus,. contact_form Textarea:focus {/* Add this to the already existing style * * * * padding-right:70px; }

In browsers that support transitions, increase the CSS slow transition effect.

. contact_form input,. contact_form TEXTAREA {/* Add this to the already existing style/-moz-transition:padding. 25s; -webkit-transition:padding 25s; -o-transition:padding 25s; Transition:padding 25s; }

　　

Step nineth: Add HTML5 Required Properties

What we have been looking forward to, finally, is the HTML5 form processing tool. After adding required to Input/textarea in HTML5, it tells the browser that the form value must exist before submitting the form, so the form will not be committed if the field is not filled in. Now we add required to the input box that needs to be validated.

Step Tenth: Define the required field style

This defines the style of the input box after the text is entered, and we place the asterisk (*) as the background image into each required item, so we have to populate the right side of the space to prevent the text from overlapping to the red asterisk image.

. contact_form input,. contact_form textarea {padding-right:30px;}

Use the Pseudo class selector for CSS: required to add a red asterisk image.

Input:required, textarea:required {background: #fff URL (images/red_asterisk.png) no-repeat cent Center;

　　

What happens when a form is submitted?

Now the form is submitted, if the form is not correctly fill in information or blank, then there will be a different display effect, because different browsers, prompts the user's pop-up box visual effect is not the same, hope that one day in the future can be truly all standardized.

　　

You can check Quirksmode to see if your browser supports required.

Tips Tips:

You can actually modify the style of some browser pop-up boxes:

::-webkit-validation-bubble-message {padding:1em}

11th Step: Understanding HTML5 New Type property and client validation

HTML5 validation is based on the type attribute within the form, and in the past few years, HTML supports only a small subset of the type attributes, such as: type= "text", and HTML5 adds several new type attributes, including email and URL, These will be used in our form.

By combining the type attribute with the new required property, the browser can now implement the client that validates the form data. If the browser does not support the new type attribute, for example: type= "Email", then he will be the default type= "text", which is very exciting, in essence, this is a backward compatibility performance, all browsers on earth can be compatible with.

Then, if the browser does not support the new type attribute, there is no obvious difference to the browser on the mobile device (unless CSS rules are defined), the type= "email" attribute will look the same as the type= "text", and then only when the user interface is involved, There is a difference between mobile browsers.

An example: the IPhone

Apple's iphone offers contextual characters when it detects form types and dynamically alters the on-screen keyboard. For example, all email addresses require characters: "@" and ". The iphone will automatically provide these characters when confirming that the input type is an e-mail message.

　　

Step 12th: Change the Type property

In this example, we have so far set the form fields by default to Type= "text", and now we need to change the "e-mail" and "Web" two: type= "email" type= "url".

13th Step: HTML5 Verification

As mentioned earlier, HTML5 is validated by type by default. This validation function is the default activation state, and if you want to turn off this feature, you can use the Novalidate attribute:

<--don't validate this form-->

Name field

First of all, take a look at a field, is "name", the request is to fill in the name. First, define the style that appears as error (invalid), and when the mouse is focused, we add a red border and a red shadow. Finally, an "invalid" exclamation point icon is displayed.

. Contact_form input:focus:invalid,. contact_form textarea:focus:invalid {/* When a field is considered invalid by the Bro Wser * * background: #fff URL (images/invalid.png) no-repeat cent Center; box-shadow:0 0 5px #d45252; Border-color: #b03535}

　　

If the user fills in the correct information, we define a green border and a green shadow, and a small icon that displays a "correct" tick, so that the correct state is maintained regardless of whether the mouse is in focus.

. Contact_form input:required:valid,. contact_form textarea:required:valid {/* When a field is considered valid by the Bro Wser * * background: #fff URL (images/valid.png) no-repeat cent Center; box-shadow:0 0 5px #5cd053; Border-color: #28921f; }

　　

Email fields and URL fields

Because we set the properties of type and required, our CSS styles and validation rules have been applied to the browser and automatically validated against specific rules.

14th Step: Introduce the pattern attribute of HTML5

Use the type= "email" attribute to illustrate that the field that is validated in most browsers is @ (any character + "@" symbol + any character). This display is limited and relies on it to prevent users from entering spaces or information that cannot be solved perfectly. Another type= "url" attribute, in most browsers, the minimum of the validation field is "arbitrary word hyphen a colon." If you enter "H:", and then verify that this will pass validation, but obviously this is not a URL, so we want to be able to more detailed verification of the user input information, then we should be in the HTML5 how to solve the use of server authentication to achieve the above mentioned problem?

Pattern Properties

This pattern attribute can accept a JavaScript regular expression, we can validate the field with a regular expression, and finally look at our HTML code:

Now our site field will only accept characters that begin with http://or https://. This regular expression pattern can sometimes be elusive, but if you have the time to learn it, you will open up another world.

15th step: The style of the prompt for a form field

Now we're going to define the form prompt that will be displayed when the user uses the form based on the correctness of the form's validation rules, and ultimately directs 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 adjective all other elements * * POSITION:ABSOLUTE; /* Allows proper formatting if hint is nonblank lines/display:none; }

Because the prompt is not present under the default form, we first set it to Display:none and then display the different styles of the prompts based on the correct information in the form.

Using:: Unreported Selector

Now, to beautify the prompt box, we need a small triangle to guide the user. Small triangles can be shown 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 the Unicode geometry image, and then combine:: Unreported selector to achieve the final effect.

　　

In general, we use Unicode format encoding in a Web page to display special graphics (as shown in the previous illustration). Because we want to use the Css::before selector, in the content: "Rule, we have to use the Unicode escape code corresponding to the triangle." Then we go through the positioning 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; }

Use adjacent selectors

Finally, we use adjacent selectors to display or hide the form's prompt. The adjacent selector (x + y) selects the y element that clings to the X element. Displays the prompt based on the results of the form field validation, and then displays and hides using adjacent selectors.

. contact_form Input:focus +. form_hint {display:inline; Contact_form Input:required:valid +. Form_hint {background: #2 8921f;} /* 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 CSS, we also set up a prompt that shows different style styles as you determine whether a field is correct.

16th step: Sit down and slowly appreciate your beautiful HTML5 form

　　

View Preview

Conclusion

As you can see, the HTML5 form is simple, beautiful, and backwards compatible, and if applied to your site, it will not destroy anything. HTML5 's verification capabilities are also getting closer to client authentication, and can be very effective in helping users fill out the correct form. However, HTML5 verification still does not replace server-side validation. So far, this is the best way to deal with it, thank you very much for reading.

Original address: Feel only the front end