web-dev-qa-db-fra.com

Comment créer un formulaire HTML complet "en lecture seule"?

Editer à nouveau: 

C'est sûrement des trucs standards? Je ne peux pas réinventer la roue ?? !! L'utilisateur remplit un formulaire et vous le lui montrez (avec PHP, mais cela ne devrait pas avoir d'importance). Vous le lui montrez comme une confirmation, il ne devrait donc pas pouvoir essayer de le changer à nouveau ... 

Voir la question associée, Comment afficher une zone de liste de formulaire en lecture seule ou désactivée avec un index sélectionné? L'essentiel, c'est que je veux effectuer ce qui doit être une tâche très courante ...

Il existe deux formulaires: un formulaire de soumission en HTML et un formulaire de traitement et d’accusé de réception en PHP.

Le premier formulaire offre un choix dans de nombreux contrôles, le second vérifie la saisie et, s'il est valide, affiche à nouveau le formulaire 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 readonly et tous peuvent être disabled, la différence étant que vous pouvez toujours passer à un champ en lecture seule.

Plutôt que de faire ce champ par champ, y a-t-il de toute façon pour marquer le formulaire entier comme étant en lecture seule/désactivé/statique afin que l'utilisateur ne puisse pas modifier les contrôles?

Edit: merci pour toutes les solutions JS (que j'ai +1) mais je suis limité à une solution côté serveur. Désolé, j'aurais dû dire cela à l'origine.

[Mise à jour] Cela a toujours des réponses sept ans plus tard ;-) En fin de compte, j’ai généré le formulaire à partir de PHP et, pour chaque champ, écrivez un attribut readonly ou disabled (selon le type de contrôle), défini sur true ou false selon une variable globale.

htmlwebforms
106
Mawg

Enveloppez les champs de saisie et d’autres éléments dans un <fieldset> et attribuez-lui l’attribut disabled="disabled".

Exemple ( http://jsfiddle.net/7/7GGH/ ):

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

191
techouse

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..

La solution raisonnable consisterait alors à définir les attributs disabled de tous les éléments de formulaire sur true, car le pilote opérateur n'a pas indiqué que le formulaire "verrouillé" spécifique devait être envoyé au serveur (ce que l'attribut disabled ne permet pas).

Une autre solution, présentée dans la démonstration ci-dessous, consiste à placer une couche au-dessus de l'élément form, ce qui empêchera toute interaction avec tous les éléments de l'élément form, car cette couche est définie avec une valeur z-index supérieure:

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>

8
vsync

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.

6
Sarfraz

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

5
Doobi

À ma connaissance, il n'existe pas de méthode intégrée pour ce faire. Vous devrez donc proposer une solution personnalisée en fonction de la complexité de votre formulaire. Vous devriez lire ce post:

Convertir des formulaires HTML en lecture seule

EDIT: D'après 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 faire en lecture seule pour que le prochain message ne soit pas modifié, vous avez un problème, car tout le monde peut jouer avec le message pour produire ce qu'il veut. Quand vous recevrez finalement les données, vous feriez mieux de les vérifier à nouveau. pour vous assurer qu'il est valide.

4
Kelsey

Il n’existe pas de méthode HTML officielle entièrement compatible, mais un peu de javascript peut aller très loin ... Un autre problème que vous rencontrez est que les champs désactivés ne figurent pas dans les données POST

3
Michael Clerx

Moyen le plus simple

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

C'est une solution idéale pour désactiver tous les boutons input, textareas, selects et 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');
1
Eternal Darkness

Avoir tous les identifiants de formulaire numérotés et exécuter une boucle for dans JS. 

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

Je préfère utiliser jQuery:

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

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

1
user163861

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 un navigateur Web.

0
Marcin Żurek