How to validate a form with only HTML and CSS? without JavaScript. See this Pure HTML CSS Form Validation program.Â
Every form which are on websites, they use validation to avoid spamming. If you want users proper information then you must have to put validation in all forms on the website. Valdition also helps users by telling there is something wrong.
Suppose, you have put a form on your website for collecting user name and phone number. but some users put text or invalid number in your phone number section in the form. There you put a condition that the field required numbers only not text and & special character, & number must be 10 digits. That’s called validation.
Mostly all validations are built-in JavaScript or any JS library. But today I will show you that, how to create a validation in pure HTML & CSS. Today you will learn how to create a validation form without JavaScript. This is a pretty good concept for improving your HTML & CSS skills. Beginners who don’t know JS, They can use and understand this program.
This is a very simple program but it looks not bad. You can improve this program’s looks using more CSS and putting icons. Let’s take a look at this program.
Preview Of Validate Form Without JavaScript
See this video preview of getting an idea about how this program looks like.
Now you can see this program visually. If you like this program, then get the source code of it.
You May Also Like:
HTML CSS Form Validation Source Code
Before sharing source code, let me explain how this program works. I had created simply a form with some inputs. I had put the HTML pattern ( info )attribute in the input section. There I put some condition and place required attribute. And I used CSS for showing validation on screen.
For creating this program you have to create only 2 files. One fore HTML, and One for CSS. Follow the steps for creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
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 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <title>HTML CSS Form Validation | webdevtrick.com</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <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> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
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 |
/* code by webdevtrick ( https://webdevtrick.com ) */ body { margin-top: 15%; background: #333; font-family: Arial; padding: 20px; } *{ box-sizing: border-box; } form{ max-width: 450px; margin: 0 auto; } form > div{ margin-top: 5px; position: relative; background: white; border-bottom: 1px solid #ccc; } form > div > label{ opacity: 0.3; font-weight: bold; position: absolute; top: 20px; left: 60px; } 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; } 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; } 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; } 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; background: #41D873; color: white; border: 0; padding: 20px; font-size: 1.2rem; } |
That’s It. Now you have successfully created the Pure HTML CSS Form Validation program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
The required and Best Soccer Wagering Agent, One of the best soccer gambling sites operating in the Asian region,
including Indonesia, will be Sbobet. Known as typically the site that won a
couple of awards since the best owner, Sbobet has been serving their customers for 7 years and
counting and proceeds to survive because the most well-known and largest gambling online site in Asia.
This is amazing!! Thank you so much for sharing.
I’ve been working on the textarea field trying to apply this css to it. But it seems since textarea isn’t technically an input field it won’t apply properly. Do you have any ideas?
Thanks!