How to make mandatory HTML form fields (required inputs)

In this article, we’ll learn how to make mandatory HTML form fields for users to fill in before submitting the form.

Hey you programmer, okay? Let’s learn more about programming!

Watch this content on YouTube:

We often need the users to fill in the data we are requesting through a form

By default, HTML does not force users to fill in all fields, that is, they can send the form with empty fields

As stated before, this can be a problem depending on the project.

But luckily, the guys who developed the HTML already thought about it and created a feature to solve this issue

The only thing we need to do is add the required attribute to the desired input, so the field will be mandatory. Let’s see it in practice?

Making Form Fields Required: Practice

I’m going to create a very simple HTML structure for this example, already with the required attribute in the input

Check it out:

<!DOCTYPE html>
<html>
 <head>
  <title>Como deixar campos do formulário obrigatórios</title>
 </head>
 <body>
  <h1>Insira as credenciais para fazer o login:</h1>
  <form method="POST" action="form.php">
   <input type="email" name="email" required>
   <input type="password" name="pass" required>
   <input type="submit" value="Login">
  </form>
 </body>
</html>

Note that we created a basic login form, and as with all authentication, the username and password are mandatory

So I added the required attribute to these two inputs.

In the browser the result is this:

Please note that the form cannot be submitted until it is correctly filled out.

So we’ve solved our problem, the user will be required to fill in this data every time he sends the form to the server. Cool, isn’t that so? 😀

HTML has a lot of attributes for its tags, you should learn them to progress your knowledge in this language

Conclusion

Solving this problem was pretty easy, we just applied the required attribute in the input command line that we want to make mandatory

Remember that we don’t necessarily need to make all of them mandatory, this is optional, only for those that the project really was projected for, the others can be without the attribute!

And that’s how we make mandatory HTML form fields; see you on the next post!

Want to learn more about HTML? Click here!