Home > Article > Web Front-end > Detailed explanation of examples of CSS3 and HTML5 implementing form validation functions

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

黄舟Original: 2017-05-21 15:25:051832browse

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>

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>

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>

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;
}

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 9484ee83623ef7679189a41061a2733254bdf357c58b8a65c66d7c19c8e4d114 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: '

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Code example sharing of CSS3 pseudo-element to realize gradually glowing square borderNext article：Code example sharing of CSS3 pseudo-element to realize gradually glowing square border

See more

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

Related articles