Disable HTML Input Field And Make It Un-clickable

Here in this post, I am going to tell you how to disable a form field in an HTML form easily.

It is very easy and simple task to disable any input field of an HTML form. There is an HTML input disable attribute available which will do this task for you.

Learn CSS Animation Effect – CSS3 Animations On Website

below is the example code of an HTML form with a disabled input field:

<form action="process.php">
  Test form field with disabled attribute: <input type="text" name="disable_field" disabled><br>
  Test form field without disabled attribute: <input type="text" name="lname" ><br>
  <input type="submit" value="Submit">
</form>

If you test the above HTML code on and open it with your browser, it will show you the result that is shown below:

Test form field with the disabled attribute:
Test form field without disabled attribute:

You can see that the first one field can not be fill up by a user as it is using the disable HTML form attribute to disabled it from the user. But the second one field can be fill up by the user as it is not using the disabled attribute.

Simple Color Picker Input Field In HTML Form

How to get HTML form data in PHP variable?

An input element that is using disabled attribute is unusable and un-clickable. If you test it, you will see that nothing happening when you click on it.

In lots of real life purpose, this disabled attribute can be helpful. For example, you can set to keep a user from using the <input> element until some other conditions meet (For example, selecting a checkbox, radio button etc.). Then you can call a JavaScript which will be removed the disabled attribute from the input field.

Learn CSS Animation Effect – CSS3 Animations On Website

So you can see that the process is so simple and easy. You can easily make any field of your HTML form un-clickable. I hope you have got your answer if you are searching for something that disables users from filling input field.