Ho due pagine con moduli HTML. La prima pagina ha un modulo di invio e la seconda pagina ha un modulo di riconoscimento. Il primo modulo offre una scelta di numerosi controlli, mentre la seconda pagina visualizza nuovamente i dati dal modulo di invio con un messaggio di conferma. In questo secondo modulo tutti i campi devono essere statici.

Da quello che posso vedere, alcuni controlli del modulo possono essere readonlye tutti possono essere disabled, la differenza è che puoi ancora passare a un campo di sola lettura.

Invece di eseguire questo campo per campo, esiste un modo per contrassegnare l'intero modulo come di sola lettura / disabilitato / statico in modo tale che l'utente non possa modificare nessuno dei controlli?

Avvolgere i campi di input e altre cose in a <fieldset>e dargli l' disabled="disabled"attributo.

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

Non tutti gli elementi del modulo possono essere impostati su readonly, ad esempio:

• caselle di controllo
• box radio
• upload di file
• ...Di Più..

Quindi la soluzione ragionevole sarebbe quella di impostare tutti gli disabledattributi degli elementi del modulo true, poiché l'OP non ha dichiarato che il modulo specifico "bloccato" dovrebbe essere inviato al server (cosa che l' disabledattributo non consente).

Un'altra soluzione, che viene presentata nella demo di seguito, è quella di posizionare un livello sopra l' formelemento che impedirà qualsiasi interazione con tutti gli elementi all'interno formdell'elemento, poiché quel livello è impostato con un z-indexvalore maggiore :

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>

È possibile utilizzare questa funzione per disabilitare il modulo:

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

Guarda la demo di lavoro qui

Si noti che utilizza jQuery.

Nella pagina di conferma, non inserire il contenuto in controlli modificabili, basta scriverli nella pagina.

Non esiste un modo integrato che conosco per fare questo, quindi dovrai trovare una soluzione personalizzata a seconda di quanto sia complicato il tuo modulo. Dovresti leggere questo post:

Converti i moduli HTML in sola lettura ( Aggiornamento : link post interrotto, link archiviato )

EDIT: in base al tuo aggiornamento, perché sei così preoccupato di averlo di sola lettura? Puoi farlo dal lato client, ma in caso contrario dovrai aggiungere il tag richiesto a ciascun controllo o convertire i dati e visualizzarlo come testo non elaborato senza controlli. Se stai provando a renderlo di sola lettura in modo che il prossimo post non sia modificato, allora hai un problema perché chiunque può pasticciare con il post per produrre quello che vuole, quindi quando effettivamente ricevi i dati, è meglio che tu lo stia controllando di nuovo per assicurarsi che sia valido.

Non esiste un modo HTML ufficiale pienamente conforme per farlo, ma un po 'di javascript può fare molto. Un altro problema che incontrerai è che i campi disabilitati non vengono visualizzati nei dati POST

Questa è una soluzione ideale per disabilitare tutti gli input , le textareas , le selezioni e i pulsanti in un elemento specificato.

Per jQuery 1.6 e versioni successive :

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

O

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

jQuery 1.5 e precedenti :

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

E

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

Un altro modo semplice supportato da tutti i browser sarebbe:

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

Ma tieni presente che il tabbing funziona ancora con questo approccio e che gli elementi con focus possono essere comunque manipolati dall'utente.

Avere tutti gli ID del modulo numerati ed eseguire un ciclo for in JS.

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

Preferirei usare jQuery:

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

find () andrebbe molto più in profondità fino all'ennesimo bambino nidificato rispetto ai bambini (), che cerca solo i bambini immediati.

Il modo più semplice

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

Aggiungi un livello HTML invisibile al modulo. Per esempio

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

e stile:

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

L'utente Ofcourse può nascondere questo livello nel browser web.