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

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

Solution 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

Solution 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

Solution 4

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

Solution 5

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 :)

View more solutions

Comments

[Tony R]

I like this idea for "greying" the area. How do I make a div float over another area? I've only done in-line divs before...

[Laimoncijus]

You can do it by using absolute/relative CSS positioning. It is possible to adjust these via JS directly or using some JS library like jQuery, which makes things easier...

[user1003221]

I tried disabling all of the inputs on submit. This appeared to cause issues with MVC3. It wouldn't post back the model correctly when i disabled everything in the form.

[Filip]

by default, disabled HTML elements do not propagate their values to the post request. Use readonly if this is not desired

[Thielicious]

He wants to make it greyed out. readonly doesn't do it, it only disables the keyboard control.

[Gwyneth Llewelyn]

The OP explicitly said that he didn't want a jQuery solution...

[Gwyneth Llewelyn]

Note that the OP explicitly said that he didn't want a jQuery solution, that's why I personally prefer stackoverflow.com/a/3789857/1035977