How to make a greyed-out HTML form?
I'd like to have a group of HTML text <input>'s that can be all greyed-out (disabled) at the same time. I also want the entire area they are in to somehow be greyed-out or at least visibly disabled. I've seen things like this done in desktop applications.
Any ideas on an easy/elegant way to do it? I'm trying to avoid manually setting each to disabled="disabled", and also have an area surrounding the <input>'s that indicates that entire portion of the form is non-editable.
EDIT: Sorry, I should mention a few more things...
- Everything is local. I'm not using PHP or ASP or anything like that... just HTML, JavaScript, and CSS. Also no jquery!
- I want to enable/disable the "area" dynamically with JavaScript
- It's NOT a
<form>, just a bunch of<input>'s
Answer
The disabled="disabled" parameter is the standard way to do this, and you could use something like jQuery to dynamically disable all of the form elements contained in a fieldset (Which is the standard way of grouping related form elements) on the fly.
Alternatively you could place a partially transparent div on top of the fieldset. This will also provide some blocking of the form elements from mouse clicks, but will not protect against tabbing to them. You should still disable the form elements themselves.