Tengo dos páginas con formularios HTML. La primera página tiene un formulario de envío y la segunda página tiene un formulario de reconocimiento. El primer formulario ofrece una variedad de controles, mientras que la segunda página muestra nuevamente los datos del formulario de envío con un mensaje de confirmación. En este segundo formulario, todos los campos deben ser estáticos.

Por lo que puedo ver, algunos controles de formulario pueden ser readonlyy todos pueden serdisabled , la diferencia es que aún puede tabular a un campo de solo lectura.

En lugar de hacer este campo por campo, ¿hay alguna forma de marcar todo el formulario como de solo lectura / deshabilitado / estático de modo que el usuario no pueda alterar ninguno de los controles?

Envuelva los campos de entrada y otras cosas en a <fieldset>y dele el disabled="disabled"atributo.

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

No todos los elementos de formulario se pueden configurar readonly, por ejemplo:

• casillas de verificación
• cajas de radio
• Subir archivo
• ...más..

Entonces, la solución razonable sería establecer todos los disabledatributos de los elementos del formulario true, ya que el OP no indicó que el formulario "bloqueado" específico se debe enviar al servidor (que eldisabled atributo no permite).

Otra solución, que se presenta en la demostración a continuación, es colocar una capa en la parte superior del formelemento que evitará cualquier interacción con todos los elementos dentro del formelemento, ya que esa capa se establece con un z-indexvalor mayor :

MANIFESTACIÓN:

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>

Puede usar esta función para deshabilitar el formulario:

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

Vea la demostración de trabajo aquí

Tenga en cuenta que usa jQuery.

En la página de confirmación, no coloque el contenido en controles editables, solo escríbalos en la página.

No hay una forma integrada que yo sepa para hacer esto, por lo que deberá encontrar una solución personalizada dependiendo de lo complicado que sea su formulario. Deberías leer esta publicación:

Convierta formularios HTML a solo lectura ( Actualización : enlace de publicación roto, enlace archivado )

EDITAR: Según su actualización, ¿por qué está tan preocupado por tenerlo como de solo lectura? Puede hacerlo desde el lado del cliente, pero si no, tendrá que agregar la etiqueta requerida a cada control o convertir los datos y mostrarlos como texto sin formato sin controles. Si está tratando de que sea de solo lectura para que la próxima publicación no se modifique, entonces tiene un problema porque cualquiera puede meterse con la publicación para producir lo que quiera, de modo que cuando finalmente reciba los datos, será mejor que lo esté revisando. nuevamente para asegurarse de que sea válido.

No hay una forma HTML oficial totalmente compatible para hacerlo, pero un poco de JavaScript puede ser muy útil. Otro problema con el que se encontrará es que los campos deshabilitados no se muestran en los datos POST

Esta es una solución ideal para deshabilitar todas las entradas , áreas de texto , selecciones y botones en un elemento específico.

Para jQuery 1.6 y superior :

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

O

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

jQuery 1.5 y abajo :

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

Y

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

Otra forma simple que es compatible con todos los navegadores sería:

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

Pero tenga en cuenta que las pestañas aún funcionan con este enfoque y que los elementos con foco aún pueden ser manipulados por el usuario.

Tener todos los identificadores de formulario numerados y ejecutar un bucle for en JS.

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

Prefiero usar jQuery:

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

find () iría mucho más profundo hasta el enésimo hijo anidado que children (), que busca solo hijos inmediatos.

La manera más fácil

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

Agrega una capa invisible HTML sobre el formulario. Por ejemplo

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

y estilo:

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

Por supuesto, el usuario puede ocultar esta capa en el navegador web.