How to Create a Text Box that a User Can't Type Inside Of


HTML



To create a text box that a user is not allowed to type inside of, add the following code to the text box:

<input type="text" READONLY/>

OR, another alternative code is:

<input type="text" disabled="disabled"/>

We will go into the difference between the above code in this article. Though they both disallow users to your site to type into the text box, they both have slight differences.


Standard Text Box

The standard text box which a user can type into is shown below:

To create this text box, the HTML code to do is:

<input type="text"/>

This allows a user to click the text box and type in characters.


Text Box with READONLY attribute

A text box that has a READONLY attribute appened to it is shown below:

The full code to create this is shown below.

<input type="text" READONLY/>

This text box allows a user to click inside of it, but the user cannot enter any characters into it. The READONLY attribute means that a user to the site cannot enter anything inside of it.

However, this text box can still be programmed to show data inside of it, such as a calculation from a computation or anything else. It's just a user to your site can't input anything into it.


Text Box with disabled="disabled"

The text box which has the line disabled="disabled" is shown below:

The full code to create this is shown below.

<input type="text" disabled="disabled"/>

This text box, just like the one with the READONLY attribute, does not allow a user to type into this field. However, unlike the READONLY attribute, a user can't even click inside this field. It is totally disabled. A user cannot click this field or enter any characters. It is a minor difference, but one that a web designer may want. Notice that you cannot even click into the above text box, while the one above with the READONLY attribute, you can.


Examples

Below are examples of text boxes using the READONLY attribute and the line disabled="disabled.

There are many reasons why you would use a text box which a user can't type into. All the circumstances would be in a form field where you don't want the user to be able to alter data.

One very common text box where you don't want a user to alter data would be the answer of a calculation.

Look at the example below.

This calculator below takes 2 pieces of data from a user to calculate the voltage produced by a circuit: the current, I, and the Resistance, R.

From these 2 values, the voltage can be computed.


Voltage Calculator

Enter the Current, I:

Enter the Resistance, R:

Answer:


You can see for the answer computed, we do not want a user to be able to change this. So we add a READONLY attribute to the answer text box. Now a user cannot delete the answer and type in something else or add to the answer. This is the use of a READONLY attribute.

Below is the same text box only now it has the disabled="disabled" line added to it.


Voltage Calculator

Enter the Current, I:

Enter the Resistance, R:

Answer:


Now with this line added to the answer text box, a user can't even click inside of the text box.

Note that the disabled="disabled" line, by default, shows text in a faded type grayish color. With CSS, this can be changed to a regular black color or any color which a user would like.

These are the ways in which you can stop a user from altering the inside of a text box.