HTML required attribute

In this article, I’m going to discuss how you can control the submission with the html required attribute .

Step-by-Step Guide to Control submission

<form name="Dataentry" action="processor.html" method="post">
<h1>Data Entry Form</h1>
<p>User Name: </p>
<input type="text" name="txtUserName" id="txtUserName" value="">
<p>Password: </p>
<input type="Password" name="txtpass" id="txtpass" value="">
<input type="submit" value="submit">
</form>

1. In the above code, we have <form> tag “method” attribute set to “post”. We know that in the post method, we can’t see the query string.
2. Just think that the user has not given few information, he has not entered the username, and if he clicks on a submit button. That form is submitted to the processing page and as we are in the post method, we can’t see the query string.
3. To see the query string, You should change the value of the method attribute to “get”. Now, you can be able to see the query string. We know the query string is a list of key-value pairs separated by an ampersand.
4. And the submit button should be given only after filling out the user form completely, so we should use the required attribute for it. So, this above code is wrong to get user input and the correct code is below here:

<form name="Dataentry" action="processor.html" method="get">
<h1>Data Entry Form</h1>
<p>User Name: </p>
<input type="text" name="txtUserName" id="txtUserName" value="" required>
<p>Password: </p>
<input type="Password" name="txtpass" id="txtpass" value="" required>
<input type="submit" value="submit">
</form>

Here, we change the value post to get in the “method” attribute. And we use the required attribute in the input tag.
So, If the user submits the form without filling it out completely, the user will get an error like the image below: