оберните поля ввода и другие вещи в <fieldset> и .

Пример (http://jsfiddle.net/7qGHN/):

<form>
    <fieldset disabled="disabled">
        <input type="text" name="something" placeholder="enter some text" />
        <select>
            <option value="0" disabled="disabled" selected="selected">select somethihng</option>
            <option value="1">woot</option>
            <option value="2">is</option>
            <option value="3">this</option>
        </select>
    </fieldset>
</form>

вы можете использовать эту функцию, чтобы отключить виде:

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

смотрите рабочую демонстрацию здесь

обратите внимание, что он использует jQuery.

не все элементы формы могут быть установлены для readonly, например:

• чекбоксы
• переключатели
загрузить
• ...больше..

тогда разумным решением было бы установить все элементы формы'disabled атрибуты true, так как OP не указал, что конкретная "заблокированная" форма должна быть отправлена на сервер (который disabled атрибут не позволяет).

другое решение, который представлен в демо ниже, это разместить слой поверх form элемент, который предотвратит любое взаимодействие со всеми элементами внутри form элемент, так как этот слой расположен с большим z-index значение:

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>

на странице подтверждения не помещайте содержимое в редактируемые элементы управления, просто запишите их на страницу.

нет встроенного способа, который я знаю, чтобы сделать это, поэтому вам нужно будет придумать собственное решение в зависимости от того, насколько сложна ваша форма. Вы должны прочитать этот пост:

преобразование HTML-форм только для чтения

EDIT: основываясь на вашем обновлении, почему вы так беспокоитесь о том, чтобы он был только для чтения? Вы можете сделать это через клиентскую сторону, но если нет, вам придется добавить необходимый тег к каждому элементу управления или преобразовать данные и отобразить их как raw текст без элементов управления. Если вы пытаетесь сделать его только для чтения, так что следующий пост будет неизменен, то у вас есть проблема, потому что кто-то может возиться с сообщением, чтобы произвести все, что они хотят, поэтому, когда вы на самом деле, наконец, получите данные, вам лучше проверить его снова, чтобы убедиться, что он действителен.

нет полностью совместимого, официального HTML-способа сделать это, но немного javascript может пройти долгий путь. Еще одна проблема, с которой вы столкнетесь, заключается в том, что отключенные поля не отображаются в POST data

Я бы предпочел использовать jQuery:

$('#'+formID).find(':input').attr('disabled', 'disabled');

find () будет идти гораздо глубже до n-го вложенного ребенка, чем children (), который ищет только непосредственных детей.

пронумеруйте все идентификаторы формы и запустите цикл for в JS.

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

самый простой способ

$('#yourform *').prop('readonly', true);

Это идеальное решение для отключения всех входы, textareas,выбирает и кнопки в указанном элементе.

для jQuery 1.6 и выше:

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

или

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

в jQuery 1.5 и ниже:

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

и

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