How can I make an entire HTML form “readonly”?

Question

Edit again:

Surely this is standard stuff? I can't be reinventing the wheel??!! User fills in a form and you show it to him (using PHP, but that should not matter). You show it to him as confirmation, so he should not be able to attempt to change it again ...

---

See related question, How to display a form list box as read-only or disabled with a selected index? The gist of it is that I want to perform what must be a very common task ...

There are two forms - a submission form in HTML and a processing & acknowledgement form in PHP.

The first form offers a choice in many controls, the second verifies the input and, if valid, displays the input form again with a confirmation message. On this second form all fields must be static.

From what I can see, some form controls can be readonly and all can be disabled, the difference being that you can still tab to a readonly field.

Rather than doing this field by field is there anyway to mark the whole form as readonly/disabled/static such that the user can't alter any of the controls?

---

Edit: thanks for all the JS solutions (which I have +1) but I am restricted to a server-side solution. Sorry, I ought to have said this originally.

---

[Update] This is still getting answers seven years later ;-) What I did, in the end, was to generate the form from PHP and, for each field write a readonly or disabled attribute (as appropriate to the type of control), set to true or false according to to a global variable.

Answer 1

Wrap the entire form's content in a <fieldset> tag and set it's disabled attribute.

<form>
    <fieldset disabled>
        <input/>
        <input/>
        <input/>
    </fieldset>
</form>

Answer 2

Not all form elements can be set to readonly, for example:

• checkboxes
• radio boxes
• file upload
• ...more..

Then the reasonable solution would be to set all form elements' disabled attributes to true, since the OP did not state that the specific "locked" form should be sent to the server (which the disabled attribute does not allow).

Another solution, which is presented in the demo below, is to place a layer on top of the form element which will prevent any interaction with all the elements inside the form element, since that layer is set with a greater z-index value:

DEMO:

var form = document.forms[0], // form element to be "readonly"
    btn1 = document.querySelectorAll('button')[0],
    btn2 = document.querySelectorAll('button')[1]

btn1.addEventListener('click', lockForm)
btn2.addEventListener('click', lockFormByCSS)

function lockForm(){
  btn1.classList.toggle('on');
  [].slice.call( form.elements ).forEach(function(item){
      item.disabled = !item.disabled;
  });
}

function lockFormByCSS(){
  btn2.classList.toggle('on');
  form.classList.toggle('lock');
}

form{ position:relative; } 
form.lock::before{
  content:'';
  position:absolute;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

button.on{ color:red; }

<button type='button'>Lock / Unlock Form</button>
<button type='button'>Lock / Unlock Form (with CSS)</button>
<br><br>
<form>
  <fieldset>
    <legend>Some Form</legend>
    <input placeholder='text input'>
    <br><br>
    <input type='file'>
    <br><br>
    <textarea placeholder='textarea'></textarea>
    <br><br>
    <label><input type='checkbox'>Checkbox</label>
    <br><br>
    <label><input type='radio' name='r'>option 1</label>
    <label><input type='radio' name='r' checked>option 2</label>
    <label><input type='radio' name='r'>option 3</label>
    <br><br>
    <select>
      <option>options 1</option>
      <option>options 2</option>
      <option selected>options 3</option>
    </select>
  </fieldset>
</form>

Answer 3

Have all the form id's numbered and run a for loop in JS.

 for(id = 0; id<NUM_ELEMENTS; id++)
   document.getElementById(id).disabled = false; 

Answer 4

This is an ideal solution for disabling all inputs, textareas, selects and buttons in a specified element.

For jQuery 1.6 and above:

// To fully disable elements
$('#myForm :input').prop('disabled', true); 

Or

// To make elements readonly
$('#myForm :input').prop('readonly', true); 

jQuery 1.5 and below:

$('#myForm :input').prop('disabled', 'disabled');

And

$('#myForm :input').prop('readonly', 'readonly');

Answer 5

You can use this function to disable the form:

function disableForm(formID){
  $('#' + formID).children(':input').attr('disabled', 'disabled');
}

See the working demo here

Note that it uses jQuery.

Answer 6

There is no built in way that I know of to do this so you will need to come up with a custom solution depending on how complicated your form is. You should read this post:

Convert HTML forms to read-only

EDIT: Based on your update, why are you so worried about having it read only? You can do it via client-side but if not you will have to add the required tag to each control or convert the data and display it as raw text with no controls. If you are trying to make it read only so that the next post will be unmodified then you have a problem because anyone can mess with the post to produce whatever they want so when you do in fact finally receive the data you better be checking it again to make sure it is valid.