Detailed explanation of examples of CSS3 and HTML5 implementing form validation functions-CSS Tutorial-php.cn

Detailed explanation of examples of CSS3 and HTML5 implementing form validation functions

黄舟

Release： 2017-05-21 15:25:05

Original

1913 people have browsed it

This article mainly introduces the use of HTML5 and CSS3 form verification functions. Friends in need can refer to

Client-side verification is the most popular web client program One of the commonly used functions, we have previously used various js libraries to perform form verification. HTML5 actually already provides us with the form validation function. As for why it hasn’t become popular, it’s probably due to compatibility issues and also because the style is too ugly.

Below we will create an HTML5 and CSS3 form validation step by step, using only HTML and CSS.

The completed one is as follows:

Step 1: Organize the validation fields and types

First we need The following fields:

Name(full name)
Phone number(phone number)
Email address(email address)
Website

After the user enters some information, we It is necessary to verify whether the user's information is correct to avoid incorrect data and deceptive data from being transmitted to the server.

In the new specification of HTML5, the input input box provides a variety of input types such as: tel, email, number, range, color, etc. These types are generally reflected in desktop clients. It's not very obvious. It will be more obvious if it is reflected on the mobile keyboard. For example, number will automatically switch to pure numbers on the mobile keyboard, and the email keyboard will automatically switch to the keyboard with @.

Step 2: Determine the form style

We also need to determine the final style of the form. Generally, this work comes from the designer. Here I found a form style on Dribbble as the demo style this time.

Step 3: Template code

Use standard HTML5 declaration code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Form Validation</title>
</head>
<body>
</body>
</html>

Copy after login

Step 4: Create the form

Create a basic form element. Here we do not submit any data, it is just a demonstration, so the form will not be submitted.

<form action="" onsubmit="return false">
</form>

Copy after login

Step 5: Create the form element

The form element consists of the following elements:

ul
li
label
input
span

ul and li elements are used for typesetting and layout, and are used to separate form elements and layout. label is used for form field prompt text. input is used for users to enter data. span is used to use emoji to prompt the user whether the fields are filled in correctly.

<ul>
    <li>
      <label for="name">FULL NAME</label>
      <input type="text" id="name" name="
    name" placeholder="请输入姓名"/>
      <span class="icon-name"></span>
    </li>
</ul>

Copy after login

The form form html code completion code is as follows:

Step 6: Add style

Complete the form When writing elements, focus on improving its 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;
}

Copy after login

css code completion code is as follows:

Step 7: Add EMOJI prompt

in each In the form structure, we have added a span tag. For example, in the name field, we have added a tag. Now add a style to it to display the status of the validation field.

li span {
display: block;
position: absolute;
right: 0;
top: 10px;
font-size: 28px;
}
/*The default is a smiling emoticon*/
li span::before {
content: '

Copy after login

The above is the detailed content of Detailed explanation of examples of CSS3 and HTML5 implementing form validation functions. For more information, please follow other related articles on the PHP Chinese website!