Implement form validation function code with CSS3+HTML5

This article mainly describes the use of HTML5 and CSS3 form verification features, the need for friends can refer to the following

Client-side validation is one of the most common features of web client programs, and we used a variety of JS libraries to validate forms. HTML5 has already provided us with the ability to form validation. As for why it is not popular to estimate compatibility and the problem is that the style is too ugly.

Next we'll create one step at a HTML5 and CSS3 form validation, using only HTML and CSS.

After the completion of the following:

First step: Organize validation fields and types

First we need the following fields:

• Name (full name)

• Phone number

• Email (email address)

• Website (website)

After the user has entered some information, we need to verify that the user's information is correct, to avoid erroneous data and deceptive data delivery to the server.

In the new specification for HTML5, input input boxes provide a variety of input types such as tel, email, number, range, color, and so on, which are generally not apparent in desktop clients, and are more noticeable if they are shown on the mobile keyboard. For example, number on the mobile keyboard will automatically switch to pure numbers, the e-mail keyboard will automatically switch the keyboard with @.

Step two: Determine the form style

We also need to determine the form's final styling style, which generally works as a designer. Here I found a form on the dribbble style as the demo style.

Step Three: Template code

Use the standard HTML5 declaration code

<! DOCTYPE html>
Fourth step: Create a form

Creating a basic form element, where we do not submit any data is just a demo, so the form does not commit.

<form action= "" onsubmit= "return false" ></form>
Fifth step: Create form elements

Table cells are composed of the following elements:


 

 
  
 
   
Ul
 
   
Li
 
   
Label
 
   
Input
 
   
Span
 
  

 
The UL and Li elements are used for layout layouts to split form elements and layouts. Label the field hint text used for the form. Input is used to enter data for the user. span is used to prompt the user field with emoji for correct completion.

<ul>    <li>      <label for= "name" >full name</label>      <input type= "text" id= "name" Name= "    name" placeholder= "Please enter name"/>      <span class= "Icon-name" ></span>    </li></ul >
The form form HTML code completion code is as follows:


Sixth step: Add Style

Finish writing the form element and Jinzhao the style to make it look more beautiful.

body {  Display:flex;} form {  padding:0 10%;  width:100%;  Margin:auto;} UL {  list-style-type:none;  padding:0;  margin:0;} Li {  position:relative;  margin-bottom:20px;} Label {  color: #333;  Display:block;  font-size:12px;} input {  width:100%;  Outline:none;  Border:none;  Padding:0.5em 0;  font-size:14px;  Color:black;  position:relative;  border-bottom:1px solid #d4d4d4;} Input:-moz-placeholder {  color: #d4d4d4;} Input::-webkit-input-placeholder {  color: #d4d4d4;} Li span {  display:block;  Position:absolute;  right:0;  top:10px;  font-size:28px;} button {  cursor:pointer;  border:1px solid #999;  border-radius:4px;  padding:10px 20px;  margin-top:10px;  Background: #fff;}
The CSS code completion code is as follows:


Seventh step: Add emoji Tips

In each form structure, we have added a span tag, such as the name field we have added a <span class= "Icon-name" ></span> tag. Now give him the style. Displays the status of the Check field.

Li span {  display:block;  Position:absolute;  right:0;  top:10px;  font-size:28px;} /* The default is a smiley face */li span::before {  content: '
"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial