In this article, we are going to learn how to create a form with validation using HTML and CSS. Last time, we learned how to create a Simple Login Form with the help of HTML, and CSS.
What is meant by form validation?
The form validation means we set the validation at some inputs in the form and users can not proceed without filling that input field properly. It is necessary to fill that input field.
What is form?
We collect the data of the users through form because it helps us to manage the data properly.
How to create a form validation?
We are going to create a validation method in our program with the help of HTML and CSS. It is in the form of first name last name, phone no, email, and Password. Let’s see how we can achieve it.
Create a file with the name form.html
Then create a file with the name form.css
You have to save both files with the extension of .html, and .css. It helps the browser identify the type of file and it executes the file properly.
After creating these files in your browser you can copy the code from here.
You might like it:
Source code of Html file for form validation
You can download the code from here
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <!-- code by fantacydesigns ( https://fantacydesigns.com ) --> <html> <head> <title>HTML CSS Form Validation | webdevtrick.com</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Registration Form</h1> <form action="#0"> <div> <input type="text" name="firstname" id="firstname" placeholder=" " required> <label for="firstname">First name</label> </div> <div> <input type="text" name="lastname" id="lastname" placeholder=" " required> <label for="lastname">Last name</label> </div> <div> <input type="tel" name="tel" id="tel" placeholder=" " pattern="^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?$" required> <label for="tel">Phone No.</label> <div class="requirements"> Must be a valid Phone Number!</div> </div> <div> <input type="email" name="email" id="email" placeholder=" " required> <label for="email">Email</label> <div class="requirements"> Must be a valid email addres!</div> </div> <div> <input type="password" name="password" id="password" placeholder=" " pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" required> <label for="password">Password</label> <div class="requirements"> Must be a valid password!</div> </div> <input type="submit" value="Sign up"/> </form> </body> </html> |
Download the code of the CSS file
You can download the code from here
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<!-- wp:enlighter/codeblock {"language":"css","theme":"dracula"} --> <pre class="EnlighterJSRAW" data-enlighter-language="css" data-enlighter-theme="dracula" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/* code by fantacydesigns ( https://fantacydesigns.com ) */ body { margin-top: 5%; background: #262626; font-family: Arial; padding: 20px; background-image: url('c.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } h1{ font-size: 40px; margin-bottom: 50px; font-family: arial; font-weight: bold; text-align: center; color:#fff; } *{ box-sizing: border-box; } form{ max-width: 450px; margin: 0 auto; } form > div{ margin-top: 0px; position: relative; background: white; border-bottom: 1px solid #ccc; } form > div > label{ opacity: 0.3; font-weight: bold; position: absolute; top: 20px; left:20px; } form > div > input[type="text"], form > div > input[type="email"], form > div > input[type="password"], form > div > input[type="tel"]{ width: 100%; border: 0; padding: 20px 20px 20px 60px; background: #F0ECEC; } form > div > input[type="text"]:focus, form > div > input[type="email"]:focus, form > div > input[type="password"]:focus, form > div > input[type="tel"]:focus{ outline: 0; background: white; font-size: 18px; text-indent: 0px; } form > div > input[type="text"]:focus + label, form > div > input[type="email"]:focus + label, form > div > input[type="password"]:focus + label, form > div > input[type="tel"]:focus + label{ opacity: 0; } form > div > input[type="text"]:valid, form > div > input[type="email"]:valid, form > div > input[type="password"]:valid, form > div > input[type="tel"]:valid{ background: url('https://webdevtrick.com/wp-content/uploads/check-icon.svg'); background-size: 20px; background-repeat: no-repeat; background-position: 415px 18px; font-size: 18px; } form > div > input[type="text"]:valid + label, form > div > input[type="email"]:valid + label, form > div > input[type="password"]:valid + label, form > div > input[type="tel"]:valid + label{ opacity: 0; font-size: 218px; } form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown), form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown), form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown), form > div > input[type="tel"]:invalid:not(:focus):not(:placeholder-shown){ background: url('https://webdevtrick.com/wp-content/uploads/xicon.svg'); background-size: 20px; background-repeat: no-repeat; background-position: 415px 18px; } form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label, form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown) + label, form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label, form > div > input[type="tel"]:invalid:not(:focus):not(:placeholder-shown) + label{ opacity: 0; } form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) ~ .requirements, form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown) ~ .requirements, form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) ~ .requirements, form > div > input[type="tel"]:invalid:not(:focus):not(:placeholder-shown) ~ .requirements{ margin-top: 5px; max-height: 200px; padding: 5px 30px 5px 50px; border-top: 1px dashed #aaa; background-color: whitesmoke; } form > div .requirements { padding: 0 30px 0 50px; color: #C73030; max-height: 0; transition: 0.28s; overflow: hidden; font-style: italic; font-size: 0.8em; } form input[type="submit"]{ display: block; width: 100%; margin: 20px 0; cursor: pointer; background: linear-gradient(to bottom, #FEAF0A 0%, #FC523B 100%); color: white; border: 0; padding: 20px; font-size: 1.2rem; } </pre> <!-- /wp:enlighter/codeblock --> |
You can copy the code from the above files and then paste it into your created files.
In this way, you can create a form with validations. It can be a contact form, login form, or registration form. The form can be of different types and you can use validation in any form so that users can’t proceed without filling in these input fields properly.
If you found this article helpful then must like it and follow us. Also share it and comment below if you have any type of queries or you have suggestions.
Thanks for reading this article.
