Use HTML5 and CSS3 forms to verify the function

Author：Eve Cole Update Time：2025-03-05 15:00:04

Client verification is one of the most commonly used functions of web client programs. We used a variety of JS libraries to verify the form. HTML5 has already provided us with the function of form verification. As for why it is not popular, it is estimated to be compatible, and the style is too ugly.

Below we will create a form verification of HTML5 and CSS3 step by step, using only HTML and CSS.

The following is as follows:

Step 1: Sort the verification field and type

First of all, we need the following fields:

Full name
Phone number (Phone Number)
Email Address
URL (website)

After the user enters some information, we need to check whether the user's information is correct to avoid error data and deceived data to the server.

In the new specifications of HTML5, the Input input box provides a variety of input types such as: TEL, Email, Number, Range, COLOR, etc. These types are generally not very reflected in the desktop client. It will be more obvious. For example, Number will automatically switch to pure numbers on the mobile keyboard, and the email keyboard will automatically switch with@keyboard.

Step 2: Determine the form style

We also need to determine the final style of the form. Generally, this job is to the designer. Here I found a form style on Dribble as the Demo style of this time.

Step 3: Template code

Use standard HTML5 statement code

 <! Doctype html> <html> <gead> <meta charset = UTF-8> <Title> HTML5 Form Validation </Title> </Head> <body> </body> </html>

Step 4: Create a form

Create a basic format element. Here we do not submit any data is just a demonstration, so Form will not submit it.

 <FORM ACTION = ONSUBMIT = Return False> </Form>

Step 5: Create the element

The table elements have the following element composition:

ul
li
label
input
span

UL and LI elements are used for typography layouts, which are used to divide table unit elements and layouts. Label is used for the field prompt text of the form. Input is used for user input data. SPAN is used to use Emoji to indicate whether the user field is filled in correctly.

 <ul> <li> <Label for = name> Full name </label> <input type = Text id = name name = name placeholder = Please enter the name/> <span class = icon-name> </span> </span> </span> li> </ul>

Form form HTML code complete code is as follows:

Step 6: Add style

Complete the writing of Form element, tightly improve its style, making it look more beautiful.

 Body {Display: Flex;} Form {padding: 0 10%; width: 100%; margin: Auto;} Ul {list-style-seype: none; padding: 0; margin: 0;} li {positive: related ;; Margin-BOTTOM: 20px;} label {color: #333; display: block; font-siZe: 12px;} input {width: 100%; Outline: None; Padding: 0.5EM 0; FON t-siZe: 14px; Color: Black; Position: Relative; Border-Bottom: 1px solid #D4D4D4;} input: -moz-Placeholder {color: #d4d4d4;} T-Placeholder {color: #d4d4d4;} li span {Display: Block; Position: AbSolute; Right: 0; TOP: 10px; FONT-SIZE: 28px;} button {Cursor: Pointer; 1px solid #999; : 4px; padding: 10px 20px; Margin -Top: 10px; background: #fff;}

CSS code completes the code as follows:

Step 7: Add emoji prompt

In each FORM form structure, we have added a span tag, such as we added a <span class = icon-name> </span> label in the name field. Now add the style to the state of the school test field.

 li span {display: block; posity: absolute; right: 0; top: 10px; font-size: 28px;}/*The default is a smiley expression*/li span :: beface {content: '