Comment puis-je rendre un formulaire HTML complet "en lecture seule" ?

Question

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

D'après ce que je vois, certains contrôles de formulaires peuvent être readonly et tout peut être disabled la différence étant que vous pouvez toujours tabuler sur un champ en lecture seule.

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

Answer 1

Enveloppez les champs de saisie et les autres éléments dans un fichier <fieldset> et lui donner le 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>

Answer 2

Tous les éléments du formulaire ne peuvent pas être définis comme readonly par exemple :

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

Dans ce cas, la solution raisonnable consisterait à définir tous les éléments du formulaire comme suit disabled les attributs de true Comme le PO n'a pas précisé que le formulaire "verrouillé" spécifique devait être envoyé au serveur (ce que le disabled ne le permet pas).

Une autre solution, présentée dans la démo ci-dessous, consiste à placer un calque au-dessus de l'élément form ce qui empêchera toute interaction avec tous les éléments à l'intérieur de l'élément form étant donné que cette couche est définie avec une plus grande valeur de z-index valeur :

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 3

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

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

Voir la démonstration ici

Notez qu'il utilise jQuery.

Answer 4

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

Answer 5

Il s'agit d'une solution idéale pour désactiver toutes les entrées , zones de texte , sélectionne y boutons dans un élément spécifié.

Pour jQuery 1.6 et plus :

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

Ou

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

jQuery 1.5 et moins :

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

Et

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