How to block inputs using HTML (disabled/readonly)

Sometimes project requirements ask us to set input unedited, so let’s see how to block inputs using HTML!

Hey you programmer, Are you okay? Let’s learn one more new thing!

Well, sometimes the form has fields that cannot be changed

A good example would be: the customer’s email in a registration, we don’t want to give him the possibility to change the email, so we should block it

Or an address auto-fill, it also doesn’t make sense to change the city, for example, if the address has already been found by the zip code, right?

So for these and other reasons, let’s see how to block an input in practice using HTML

For this result we have two options, both are HTML attributes:

readonly;
disabled;

The difference is very subtle, but it can be a big problem! I’ve already screwed myself once because of that… 😀

The point is that the “disabled” value does not pass the data via form, that is, the field goes blank to the backend

“Readonly” value does it, so the field goes with the value currently filled in

That is, 99.9% of the time you will choose the values “readonly” and not “disabled”

Both are the same, almost the same visual appearance and do not allow editing of fields

Let’s see in practice?

Block inputs using HTML: practice

Let’s create a small HTML framework to test our examples:

<!DOCTYPE html>
<html>
 <head>
  <title>Como bloquear inputs com HTML</title>
 </head>
 <body>
  <h1>Formulário Teste</h1>
  <form method="POST" action="form.php">
   <input type="email" name="email" value="[email protected]" readonly>
   <input type="text" name="teste" value="Teste" disabled="">
   <input type="submit" value="Enviar">
  </form>
 </body>
</html>

This is what you get in the web browser:

Note that only attributes were added to inputs, one is running on “readonly” and the other is “disabled”

And if you do the test, you’ll see that both inputs are really locked for editing

But we must remember about sending, the “disabled” will not send the information

This way we solve our problem, how to block HTML inputs. Cool, isn’t it?

Conclusion

In this article we learned how to block HTML inputs, in an easy way using just one attribute

I suggested using “readonly”, as it sends the info to the back end, and this can save you from some problems, depending on your handling of this information

The “disabled” value requires further attention, but it also solves the problem!

And that’s it for today, see you the next post! 🙂

Want to get better in HTML? Click here!