How to make a greyed-out HTML form?

Question

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...

1. Everything is local. I'm not using PHP or ASP or anything like that... just HTML, JavaScript, and CSS. Also no jquery!
2. I want to enable/disable the "area" dynamically with JavaScript
3. It's NOT a <form>, just a bunch of <input>'s

Answer 1

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.

Answer 2

for(i=0; i<document.FormName.elements.length; i++) {
    document.FormName.elements[i].disabled=true;
}
document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC";

loops through the elements of the form with the name FormName and disable each element.. then change the background color of the surrounding element

Answer 3

Please notice: if you do disabled

The input-element won't be transmitted if the user submits the form.

What you want to do instead is:

<input type="text" name="surname" value="Korpela" readonly>

If your form is inside a

<div style="background-color: grey;">

Does that cut the cake?

https://www.cs.tut.fi/~jkorpela/forms/readonly.html

Answer 4

You can simply use jQuery to disable all forms elements in that area, like:

  //assuming that area is a div element with id lets say disabled-area
  $(document).ready(function(){
    $("#disabled-area input").attr("disabled", "disabled");
  });

I didn't check it, so I hope this will work :)

Answer 5

If you say you don't want to play with "disabled" property - then you could also position some transparent DIV over HTML form, which (styled properly) could make look form as disabled - users will be able to see the form, but not click/enter any information into it... Then, based on some event, you simply can remove/hide this DIV with JS and make the form "enabled".

Answer 6

People here have answers with loops - no need. Use .children().

$('form').children().prop('disabled',true)

jsfiddle

Answer 7

You can step through all of the form elements and disable them. Untested, but try something like this:

for (x=0; x<document.YOURFORM.elements.length; x++) {
     document.YOURFORM.elements[x].disabled=true;
}