У меня есть две страницы с формами HTML. Первая страница имеет форму отправки, а вторая страница имеет форму подтверждения. Первая форма предлагает выбор из множества элементов управления, а на второй странице снова отображаются данные из формы отправки с подтверждением. На этой второй форме все поля должны быть статическими.

Из того, что я вижу, могут быть некоторые элементы управления формой, readonlyи все они могут быть disabled, с той разницей, что вы все еще можете вкладывать в поле только для чтения.

Вместо того, чтобы делать это поле за полем, есть ли способ пометить всю форму как readonly / disabled / static так, чтобы пользователь не мог изменить ни один из элементов управления?

Оберните поля ввода и другие данные в a <fieldset>и присвойте ему disabled="disabled"атрибут.

Пример ( 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>

Не все элементы формы могут быть установлены 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>

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

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

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

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

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

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

Конвертировать HTML-формы только для чтения ( Обновление : неработающая ссылка, заархивированная ссылка )

РЕДАКТИРОВАТЬ: Основываясь на вашем обновлении, почему вы так беспокоитесь о том, что он только для чтения? Вы можете сделать это через клиентскую часть, но если это не так, вам придется добавить требуемый тег в каждый элемент управления или преобразовать данные и отобразить их в виде необработанного текста без элементов управления. Если вы пытаетесь сделать его доступным только для чтения, чтобы следующий пост не был изменен, то у вас есть проблема, потому что любой может связываться с постом, чтобы произвести то, что он хочет, поэтому, когда вы на самом деле наконец-то получите данные, вам лучше их проверить. еще раз, чтобы убедиться, что это действительно.

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

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

Для 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');

Еще один простой способ, который поддерживается всеми браузерами:

HTML:

<form class="disabled">
  <input type="text" name="name" />
  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">
  <input type="checkbox" name="vegetarian">
</form>

CSS:

.disabled {
  pointer-events: none;
  opacity: .4;
}

Но имейте в виду, что табуляция все еще работает с этим подходом, и элементы с фокусом все еще могут манипулироваться пользователем.

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

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

Я бы лучше использовал jQuery:

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

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

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

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

Вы добавляете html невидимый слой поверх формы. Например

<div class="coverContainer">
<form></form>
</div>

и стиль:

.coverContainer{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0,0,0,0);
    position: absolute;
}

Конечно, пользователь может скрыть этот слой в веб-браузере.