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

Pilothouse

Do you want the <input/> elements disabled with static HTML or dynamically disabled with javascript or something? I've explored dynamic forms to some extent in this question; even created a jQuery plugin for it. – Niobium

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.

Planck

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

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

Note that the OP explicitly said that he didn't want a jQuery solution, that's why I personally prefer https://mcmap.net/q/595346/-how-to-make-a-greyed-out-html-form – Prattle

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

Hydrothorax

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

Juxtaposition

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

404 on link provided – Cindiecindra

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

Sickler

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

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

Darindaring

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

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

Answer 6

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

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

jsfiddle

Sharecropper

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;
}

Horgan