How To Make A Greyed-out Html Form?

I'd like to have a group of HTML text '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

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

<divstyle="background-color: grey;">

Does that cut the cake?

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

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

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