All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

HTML Required Field Validation

Last Updated : Mar 11, 2024

HTML Required Field Validation

In this tutorial we will show you the solution of HTML required field validation, in HTML we all know that sometimes we have to create forms in html and after forms we create a submit button.

Form is made to receive information or feedback form users. But what if someone leave tabs blank and submit form.

Then developers receive blank data from users, that not appropriate way and which we do not want.

So, we have to apply a validation on inputs with help of html. Thus, if someone leave it blanks so forms did not gets submitted. Let us understand it with html codes.

Step By Step Guide On HTML Required Field Validation :-

Now, here below we are going to create a webpage in html. In which we create a form and under form we create some inputs to enter data from users. After this we are going to create a submit button.

But in case of important inputs, so that they did not left blank, we are going to use here required attribute.

Below, we give the code with required attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home page</title>
</head>
<body>
   <div class="main">
        <div class="inner">
            <h1 class="welcome">
                Use of Required into form
            </h1>
            <div class="registration_options">
                <form action="" method="post">
                    <div>
                        <label for="">
                            <span style="color: red;">
                                *
                            </span>
                            Enter your name here
                            <span style="color: red;">
                                *
                            </span>
                        </label>
                        <input type="text" name="username" id="" required>
                        <br>
                        <br>
                        <label for="">
                            <span style="color: red;">
                                *
                            </span>
                            Enter your email here
                            <span style="color: red;">
                                *
                            </span>
                        </label>
                        <input type="email" name="email" id="" required>
                        <br>
                        <br>
                        <label for="">
                            <span style="color: red;">
                                *
                            </span>
                            Enter your password here
                            <span style="color: red;">
                                *
                            </span>
                        </label>
                        <input type="password" name="password" id="" required>
                        <br>
                        <br>
                        <label for="">
                            Enter your age here
                        </label>
                        <input type="number" name="age" id="">
                        <br><br>
                        <label for="">
                            <span style="color: red;">
                                *
                            </span>
                            Enter your father here
                            <span style="color: red;">
                                *
                            </span>
                        </label>
                        <input type="text" name="fname" id="" required>
                        <br><br>
                        <label for="">
                            Enter your mother here
                        </label>
                        <input type="text" name="mname" id="">
                        <br><br>
                        <input type="submit" value="Save" id="save" name="button">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Here, in body which is a paired tag and all the content which we write here is going to display on browser screen, here we create a form with a heading as you see above.
  6. In form, we create label tag for text to display and input tag to create input fields. Here we use required attribute in some inputs.
  7. And for user visualization we mark red stars after and before text. If user left any stared input blank, then he is not able to submit form.
  8. But if he left some unmarked input blanks then form gets submitted. So, here we get that input tag with required attribute is mandatory to fill.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with the help of this article we are able to create a form with validation that is with help of required field. I hope this tutorial on HTML required field validation helps you.