Tutorial: upgrade your form to CSS3 and HTML5 client for verification

Today, let's take a look at how to create a practical and powerful form. forms are created using the most popular technologies HTML5 and css3, and can be verified on the client through HTML5.

View Preview

Step 1: plan the form function

First, we have to plan what functions and forms should be used for our forms. In this example, we create a simple message form. The required functions are as follows:

Name

Email

Website address

Submit button

We all hope that users can enter the correct information before submitting. To achieve this, we can use the HTML5 client verification new technology. So how to use this function? Here, we simply use server verification without further in-depth understanding.

Step 2: Planning form

In my heart, I look forward to a beautiful and simple form of submission. Although ugly, he is not a pheasant or a Phoenix.

　　

 

As shown in the following figure:

Table title (Required fields)

Table label

Table input (Placeholder text)

Form prompt

Submit button

Now that we have determined the form, we can start to create the HTML structure code.

Step 3: Create HTML Structure Code

Create the most basic HTML code according to the format determined above.

The page is still blank. This is just the most basic code for a Web page.

Step 4: HTML form

Create a form on the page.

Step 5: HTML form elements

To better understand and maintain the form, we will add the elements in the form step by step.

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

Contact us

* Required

Name:

　　

 

Form prompt

According to our planning diagram, we want to add a prompt to the form's "email" and "website", so we need to add the prompt area under the input, and then process them in a unified style.

Email: the correct format is: javin@example.com

　　

 

Other form input Elements

Add other form input elements.

Site: correct format: http://www.jiawin.com

Message:

Submit

　　

 

Step 6: Add placeholder attributes

As one of HTML5 improvements, you can set the placeholder attribute in a webpage form. The placeholder field is displayed when the input area is empty or not in focus. Previously, we can only use javascript to implement it. Adding placeholder fields can guide users to correct input information.

Tip: placeholder text style definition:

Here is a tip for everyone. If you want to change the default placeholder style, you can modify it using the following code (note the browser prefix ):

:-Moz-placeholder {color: blue; }::-webkit-input-placeholder {color: blue ;}

In modern browsers, placeholder is generally supported, except IE9. If you need to support it in all browsers, you can consider using javascript solutions.

Step 7: define basic CSS

Next, define the basic CSS style.

1. Format: focus Style

The Webkit kernel browser automatically adds some focus styles. We need to customize the styles, so we need to remove the default values.

*: Focus {outline: none ;}

　　

 

2. Font Layout

Add font 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 uses a list, we define a 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 border lines at the top and bottom, using the first-child and last-child delimiters. This increases the appearance of our forms, but the old browsers do not support these two choices, but this is not the point. We need to look forward, as long as the most popular modern browser supports it.

. Contact_form li: first-child,. contact_form li: last-child {border-bottom: 1px solid #777 ;}

　　

 

4. Header style

Now we can define our Header style. There are two parts: one is the title, and the other is the asterisk (*) of the notification, which indicates a required field.

. Contact_form h2 {margin: 0; display: inline;}. required_notification {color: # d45252; margin: 5px 0 0 0 0; display: inline; float: right ;}

　　

 

5. form input Style

The input element of a form is the core of a form and is used to collect 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 we can add some extra beautifying styles. CSS3 will be used, and the visual effect will be improved 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 0 #9fd574 inset; -ms-box-shadow: 0 1px 0 0 #9fd574 inset;-o-box-shadow: 0 1px 0 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 8: Add CSS3 Interaction

Let's add the interaction effect together. When the input box is clicked, the length of the input box is increased.

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

In the browser that supports transition, add the slow transition effect of CSS.

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

　　

 

Step 9: add the HTML5 required attribute

What we have been waiting for is the HTML5 form processing tool. After you add required to input/textarea in HTML5, the browser is notified that the form value must exist before submitting the form. Therefore, the form is not submitted if no field is entered. Now we add required in the input box to be verified.

Step 10: define the required field Style

Here we define the style after the input text in the input box. We place the star number (*) as the background image to each required item, so we need to fill the space on the right first, prevents text from overlapping to red asterisks.

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

Use the pseudo-class selector of css: required to add the red asterisk image.

Input: required, textarea: required {background: # fff url (images/red_asterisk.png) no-repeat 98% center ;}

　　

 

What will happen after the form is submitted?

After the current form is submitted, if the form is incorrectly filled in or blank, different display effects will appear, because different browsers, the visual effects of the pop-up boxes are different, and we hope to standardize all the items in the next day.

　　

 

You can check quirksmode to check whether your browser supports required.

TIPS:

In fact, you can modify the pop-up style of Some browsers:

:-Webkit-validation-bubble-message {padding: 1em ;}

Step 2: understand the new type attribute and client verification of HTML5

HTML5 verification works based on the type attribute in the form. In the past few years, HTML only supports a small part of the type attribute, such as: type = "text ", after HTML5 appears, several new types are added, including email and url, which will be used in our form.

By combining the input type attribute and the new required attribute, the browser can now verify the form data client. If the browser does not support the new type attribute, for example, type = "email", it will be changed to type = "text" by default, which is very exciting. In essence, this is a manifestation of backward compatibility, and all browsers on the earth can be compatible with it.

If the browser does not support the new type attribute, there is no obvious difference (unless css rules are defined) between browsers on mobile devices ), the type = "email" attribute will be the same as the type = "text" attribute, and only when the user interface is involved is different for mobile browsers.

Example: iPhone

Apple's iPhone provides contextual characters when detecting form types and dynamically changing the keyboard on the screen. For example, if all email addresses require the characters "@" and ".", the iPhone will automatically provide these characters when confirming that the input type is email.

　　

 

Step 2: Change the type attribute

In this example, all the form fields are set to "text" by default. Now we need to change "email" and "website": type = "email" type = "url ".

Step 2: HTML5 Verification

As mentioned above, HTML5 is verified by type by default. This verification function is activated by default. You can use the novalidate attribute to disable this function:

<-- Do not validate this form -->

Name field

Let's take a look at the first field, which is "name" and requires a name. First, define the style when the display is incorrect (invalid). When the mouse is in the focus, we add a red border and a Red Shadow. An "invalid" Exclamation point icon is also displayed.

. Contact_form input: focus: invalid ,. contact_form textarea: focus: invalid {/* when a field is considered invalid by the browser */background: # fff url (images/invalid.png) no-repeat 98% center; box-shadow: 0 0 5px # d45252; border-color: # b03535}

　　

 

If the information entered by the user is correct, we define the style as Green Border and green shadow, and display a small icon with a "correct" check, make sure that the mouse remains in the correct State regardless of whether it is in the focus.

. Contact_form input: required: valid ,. contact_form textarea: required: valid {/* when a field is considered valid by the browser */background: # fff url (images/valid.png) no-repeat 98% center; box-shadow: 0 0 5px #5cd053; border-color: # 28921f ;}

　　

 

Email and URL Fields

Because we have set the type and required attributes, our css style and verification rules have been applied to the browser and will be automatically verified according to the specific rules.

Step 2: Introduce the pattern attribute of HTML5

The type = "email" attribute is used as an example. The fields verified in most browsers are @ (any character + "@" symbol + any character ). This display is limited, and it cannot be perfectly solved by blocking users from entering spaces or information. Another type = "url" attribute, the validation field in most browsers is "any character plus a colon" at the minimum ". If you enter "H:" And then perform verification, this will pass the verification, but it is obvious that this is not a network address, so we hope we can verify the information entered by users in more detail. How can we solve the above problems in HTML5 by using server verification?

Pattern attributes

This pattern attribute can accept a Javascript regular expression. We can use a regular expression to verify the field. Finally, let's look at our HTML code:

Now our "website" field will only accept characters starting with http: // or https. This regular expression pattern is sometimes difficult to understand, but if you have time to learn it, you will broaden the world.

Step 2: form field prompt Style

Now let's define the form prompt. They will display the correct form verification rules when using the form according to the specific prompt, and finally guide the user to submit the form correctly.

. Form_hint {background: # d45252; border-radius: 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 two lines */display: none ;}

The prompt language does not appear in the default form, so we should set it to display: none first, and then display prompts of different styles based on whether the information filled in the form is correct or not.

Use: before Selector

Now, in order to beautify the prompt box, we need a small triangle to guide the user. Small triangles can be displayed in images, but here we use css to compile the display, because this triangle is not a very important function in the page, but a visual form. We can use unicode geometric images, combined with the: before selector to achieve the final effect.

　　

 

In general, we use unicode encoding in the webpage to display special images (as shown in ). Because we need to use the css: before selector, In the content: "" rule, we must use the unicode escape code corresponding to the triangle. Then, we locate and display it where we want to display it.

. Form_hint: before {content: "25C0";/* left point triangle in escaped unicode */color: # d45252; position: absolute; top: 1px; left:-6px ;}

Use adjacent delimiters

Finally, we use adjacent delimiters to display or hide the form prompts. The adjacent selector (x + y) selects the yelement following the x element. The prompt is displayed based on the result verified by the form field, and then displayed and hidden using adjacent Selection Characters.

. 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 css, we also set a prompt to display different styles with the judgment of whether a field is correct.

Step 2: Sit down and enjoy your beautiful HTML5 form

　　

 

View Preview

Conclusion

As you can see, HTML5 forms are simple and elegant, and have backward compatibility. If applied to your website, it will not damage anything. The HTML5 verification function is getting closer and closer to the client verification, which can effectively help users fill in the correct form. However, HTML5 verification still cannot be replaced by server-side verification. So far, this is the best solution. Thank you very much for reading this article.

Original article address: Jue Wei frontend