HTML Disabled or ReadOnly?

This is one of those things in HTML that once you know about it, you won't forget it, but before that you unknowingly use the wrong tag, and then can't figure out why your not getting information back from the form page to the server.

Here's an example scenario, where it pops up, You have a year drop down selection box in a form for the user to submit the year for a series of forms that are linked together under the same year. It looks like this:

The user submits the form and some other forms all linked to the same year. Everything is good.

Then we provide the user the ability to edit part of his information in another window. We want the user to "see" the year, but because it is linked with other information, we don't want to allow the user to edit the year in this window.

How do we do this? The common thought is to disable the drop down menu so the user can't change the year. Well, yes, but there's a choice.

Let's look at disabling the input box first. Here's what it looks like in HTML.

When you use disabled, it prevents the user from using the drop down, or form element. You can see the year, but it is grayed out. Your mouse can't select or change it, and you can't tab to it with the keyboard. Disabled is used a lot with checkboxes. Sounds like just what we want, but you unknowingly might have caused yourself a small development problem.

The problem is "disabled" does just that. Disabled means that in your $_POST or $_GET that element will not show up in your controller. If you want to use the year in your controller, you won't be able to recover it from that form. All you can do it look at the value on the web page.

What if we want to read the year, prevent the user from changing the year, and recover the year in the form data sent back to the controller. The solution for this is to use "readonly." Readonly looks like this:

"Readonly" stops the user from changing the value, but you can still interact with content. You can select the value, highlight it, and copy it with your mouse, and tab to it from the keyboard. And most important, you can access that value in the form data sent back to the controller. You just can't change the value.

If you just want to show the data from the database in the form, not change it, and not get the data back from the form element, then use "disabled."

If you want to see data in the form, and get the data back from the form, without having to go back to the database for it, use "readonly." For me, I tend to use "readonly" more than I use "disabled."


HTML Disabled or ReadOnly? — 3 Comments

  1. Stephen, your comment is excellent, and interesting. Yes, ‘readonly” is not an option listed for the select tag in the spec.

    However, the above select readonly example is taken from an application that is working. I thought maybe this changed for HTML5, so I created an example script and ran it. The “readonly attribute works as described above. I ran it in FIrefox, so I thought it might be browser specific, so I ran it in Chrome, IE8, Safari, and Opera. All the browsers brought the “readonly” value back to the controller. .It appears the “readonly” attribute in the select statement is an undocumented attribute you can use.

    There are alternatives. You can do this in javascript or jquery, and you can find examples in the forums. The simplest way, if you don’t want to use “readonly,” is to use a hidden tag and bring the year back that way. Thank you so much for your comment.

    • Yes, readonly doesn’t actually makes it readonly for a drop down.
      It didn’t work for me.
      At last I found a better solution than making a hidden property. Although, it might seem equivalent.
      I made a duplicate replica of my dropdown, with another name and id and shown it as disabled. And actual dropdown is made hidden using style

  2. It is worth pointing out that according to the HTML 4 specification and HTML 5 draft, the readonly attribute can only be used on input and textarea elements, not select elements.