Eu tenho duas páginas com formulários HTML. A primeira página possui um formulário de envio e a segunda página possui um formulário de confirmação. O primeiro formulário oferece uma escolha de vários controles, enquanto a segunda página exibe os dados do formulário de envio novamente com uma mensagem de confirmação. Nesse segundo formulário, todos os campos devem ser estáticos.

Pelo que pude ver, alguns controles de formulário podem ser readonlye todos podem ser disabled, a diferença é que você ainda pode tabular para um campo somente leitura.

Em vez de fazer esse campo por campo, existe alguma maneira de marcar todo o formulário como somente leitura / desativado / estático, de modo que o usuário não possa alterar nenhum dos controles?

Coloque os campos de entrada e outras coisas em um <fieldset>e atribua a ele disabled="disabled".

Exemplo ( 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>

Nem todos os elementos do formulário podem ser definidos como readonly, por exemplo:

• caixas de seleção
• caixas de rádio
• upload de arquivo
• ...Mais..

A solução razoável seria definir todos os disabledatributos dos elementos do formulário true, pois o OP não declarou que o formulário "bloqueado" específico deveria ser enviado ao servidor (o que o disabledatributo não permite).

Outra solução, apresentada na demonstração abaixo, é colocar uma camada em cima do formelemento que impedirá qualquer interação com todos os elementos dentro do formelemento, pois essa camada é configurada com um z-indexvalor maior :

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>

Você pode usar esta função para desativar o formulário:

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

Veja a demonstração de trabalho aqui

Observe que ele usa jQuery.

Na página de confirmação, não coloque o conteúdo em controles editáveis, basta escrevê-los na página.

Não sei como fazer isso, então você precisará criar uma solução personalizada, dependendo da complexidade do seu formulário. Você deve ler este post:

Converter formulários HTML em somente leitura ( atualização : link de postagem quebrado, link arquivado )

EDIT: Com base na sua atualização, por que você está tão preocupado em tê-la somente leitura? Você pode fazer isso pelo lado do cliente, mas, caso contrário, precisará adicionar a tag necessária a cada controle ou converter os dados e exibi-los como texto bruto, sem controles. Se você está tentando torná-lo somente leitura para que a próxima postagem não seja modificada, você tem um problema, porque qualquer pessoa pode mexer com a postagem para produzir o que quiser, quando você realmente receber os dados, é melhor verificar isso. novamente para garantir que seja válido.

Não existe uma maneira HTML totalmente compatível e oficial de fazer isso, mas um pouco de javascript pode percorrer um longo caminho. Outro problema que você encontrará é que os campos desabilitados não aparecem nos dados do POST

Esta é uma solução ideal para desativar todas as entradas , áreas de texto , seleções e botões em um elemento especificado.

Para o jQuery 1.6 e superior :

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

Ou

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

jQuery 1.5 e abaixo :

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

E

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

Outra maneira simples suportada por todos os navegadores seria:

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

Mas lembre-se de que as guias ainda funcionam com essa abordagem e os elementos com foco ainda podem ser manipulados pelo usuário.

Tenha todos os IDs do formulário numerados e execute um loop for em JS.

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

Prefiro usar o jQuery:

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

find () seria muito mais profundo até o enésimo filho aninhado do que children (), que procura apenas filhos imediatos.

Caminho mais fácil

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

Você adiciona camada invisível html ao formulário. Por exemplo

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

e estilo:

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

É claro que o usuário pode ocultar essa camada no navegador da web.