J'ai deux pages avec des formulaires HTML. La première page a un formulaire de soumission et la deuxième page a un formulaire de reconnaissance. Le premier formulaire offre un choix de nombreux contrôles, tandis que la deuxième page affiche à nouveau les données du formulaire de soumission avec un message de confirmation. Sur ce second formulaire, tous les champs doivent être statiques.

D'après ce que je peux voir, certains contrôles de formulaire peuvent être readonlyet tous peuvent l'être disabled, la différence étant que vous pouvez toujours accéder à un champ en lecture seule.

Plutôt que de faire ce champ par champ, existe-t-il un moyen de marquer le formulaire entier comme en lecture seule / désactivé / statique de sorte que l'utilisateur ne puisse modifier aucun des contrôles?

Enveloppez les champs d'entrée et autres éléments dans un <fieldset>et donnez-lui l' disabled="disabled"attribut.

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

Tous les éléments de formulaire ne peuvent pas être définis sur readonly, par exemple:

• cases à cocher
• boîtes radio
• téléchargement de fichiers
• ...plus..

Ensuite, la solution raisonnable serait de définir tous les disabledattributs des éléments de formulaire sur true, puisque l'OP n'a pas déclaré que le formulaire "verrouillé" spécifique devrait être envoyé au serveur (ce que l' disabledattribut ne permet pas).

Une autre solution, présentée dans la démo ci-dessous, consiste à placer un calque au-dessus de l' formélément, ce qui empêchera toute interaction avec tous les éléments à l'intérieur de l' formélément, car ce calque est défini avec une z-indexvaleur plus élevée:

DÉMO:

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>

Vous pouvez utiliser cette fonction pour désactiver le formulaire:

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

Voir la démo de travail ici

Notez qu'il utilise jQuery.

Sur la page de confirmation, ne placez pas le contenu dans des contrôles modifiables, écrivez-les simplement sur la page.

Il n'y a aucun moyen intégré que je connaisse pour le faire, vous devrez donc proposer une solution personnalisée en fonction de la complexité de votre formulaire. Vous devriez lire cet article:

Convertir les formulaires HTML en lecture seule ( Mise à jour : lien de publication cassé, lien archivé )

EDIT: Sur la base de votre mise à jour, pourquoi êtes-vous si inquiet de l'avoir en lecture seule? Vous pouvez le faire via le côté client, mais sinon, vous devrez ajouter la balise requise à chaque contrôle ou convertir les données et les afficher sous forme de texte brut sans contrôle. Si vous essayez de le rendre en lecture seule pour que le prochain message ne soit pas modifié, vous avez un problème car n'importe qui peut jouer avec le message pour produire ce qu'il veut, alors lorsque vous recevez enfin les données, vous feriez mieux de le vérifier. à nouveau pour vous assurer qu'il est valide.

Il n'y a pas de méthode HTML officielle et entièrement conforme pour le faire, mais un peu de javascript peut aller très loin. Un autre problème que vous rencontrerez est que les champs désactivés n'apparaissent pas dans les données POST

C'est une solution idéale pour désactiver toutes les entrées , zones de texte , sélections et boutons dans un élément spécifié.

Pour jQuery 1.6 et supérieur :

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

Ou

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

jQuery 1.5 et inférieur :

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

Et

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

Un autre moyen simple pris en charge par tous les navigateurs serait:

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

Mais sachez que la tabulation fonctionne toujours avec cette approche et que les éléments avec le focus peuvent toujours être manipulés par l'utilisateur.

Faites numéroter tous les identifiants de formulaire et exécutez une boucle for dans JS.

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

Je préfère utiliser jQuery:

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

find () irait beaucoup plus loin jusqu'au nième enfant imbriqué que children (), qui ne recherche que les enfants immédiats.

Le moyen le plus simple

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

Vous ajoutez une couche invisible html sur le formulaire. Par exemple

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

et style:

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

Bien sûr, l'utilisateur peut masquer cette couche dans le navigateur Web.