¿Cómo puedo hacer que un formulario HTML completo sea "de solo lectura"? En el lado del servidor, por favor

Question

Editar nuevamente:

¿Sin duda esto es estándar? No puedo estar reinventando la rueda ?? El usuario rellena un formulario y se lo muestra (usando PHP, pero eso no debería importar). Lo muestran a él como confirmación, por lo que no debería ser capaz de intentar cambiar de nuevo ...

---

Ver pregunta relacionada, How to display a form list box as read-only or disabled with a selected index? El quid de la cuestión es que quiero llevar a cabo lo que debe ser una muy tarea común ...

Hay dos formas: un formulario de envío en HTML y un formulario de reconocimiento de procesamiento & en PHP.

El primer formulario ofrece una opción en muchos controles, el segundo verifica la entrada y, si es válido, muestra el formulario de entrada nuevamente con un mensaje de confirmación. En esta segunda forma, todos los campos deben ser estáticos.

Por lo que puedo ver, algunos controles de formulario pueden ser readonly y todos pueden ser disabled, la diferencia es que aún se puede tabular en un campo de solo lectura.

En lugar de hacer este campo por campo ¿hay alguna forma de marcar el formulario completo como readonly/disabled/static de modo que el usuario no pueda alterar ninguno de los controles?

---

Editar: gracias por todas las soluciones JS (que no tengo +1) pero estoy restringido a una solución de servidor. Lo siento, debería haber dicho esto originalmente.

---

[Actualización] Esto se sigue recibiendo respuestas siete años más tarde ;-) Lo que hice, al final, era para generar la forma de PHP y, para cada campo escribir un atributo readonly o disabled (según sea apropiado al tipo de control), se establece en verdadero o falso según una variable global.

Answer 1

Envuelva todo el contenido del formulario en una etiqueta <fieldset> y configure su atributo disabled.

<form> 
    <fieldset disabled> 
     <input/> 
     <input/> 
     <input/> 
    </fieldset> 
</form> 

Answer 2

No hay una forma HTML oficial totalmente compatible para hacerlo, pero un pequeño javascript puede ser de gran ayuda. Otro problema con el que se encontrará es que los campos deshabilitados no aparecen en los datos de POST

Answer 3

No existe una forma integrada que conozca para hacer esto, por lo que tendrá que encontrar una solución personalizada sobre lo complicado que es tu formulario Debe leer este mensaje:

Convert HTML forms to read-only

EDIT: En base a su actualización, por qué estás tan preocupado por tener que leer solamente? Puede hacerlo a través del 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 intentas que se lea solo para que la próxima publicación no se modifique, entonces tienes un problema porque cualquiera puede meterse con la publicación para producir lo que quiera, de modo que cuando de hecho finalmente recibas la información, es mejor que la revises nuevamente. para asegurarse de que sea válido

Answer 4

Puede utilizar esta función para desactivar la forma:

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

See the working demo here

Note que usa jQuery.

Answer 5

Ten todos los id del formulario numerados y ejecute un bucle for en JS.

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

Answer 6

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

Answer 7

Envuelva los campos de entrada y otras cosas en un <fieldset> y asígnele el atributo disabled="disabled".

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>

Answer 8

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

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

A continuación, la solución razonable sería establecer atributos disabled todos los elementos del formulario a true, ya que el PO no afirmó que la específica 'bloqueado' forma debe ser enviado al servidor (que el atributo disabled no permite).

Otra solución, que se presenta en la demostración a continuación, es colocar una capa en la parte superior del elemento de form que evitará cualquier interacción con todos los elementos en el interior del elemento de form, puesto que la capa se ajusta con un mayor valor 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>

Answer 9

prefiero usar jQuery:

find() iría mucho más profundo hasta el nido nido que los niños(), que solo busca hijos inmediatos.