How to make a greyed-out HTML form?

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.

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

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

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