web-dev-qa-db-fra.com

Comment faire un formulaire HTML grisé?

J'aimerais avoir un groupe de textes HTML <input> qui peuvent être tous grisés (désactivés) en même temps. Je souhaite également que toute la zone dans laquelle ils se trouvent soit grisée ou au moins visiblement handicapée. J'ai vu des choses comme celle faite dans les applications de bureau.

Des idées sur un moyen simple et élégant de le faire? J'essaie d'éviter de définir manuellement chaque paramètre sur disabled="disabled" et d'avoir également un zone entourant le <input> qui indique que la totalité du formulaire est non modifiable.

EDIT: Désolé, je devrais mentionner quelques autres choses ... 

  1. Tout est local. Je n'utilise pas PHP ou ASP ou quoi que ce soit du genre ... HTML, JavaScript et CSS. Aussi pas de jquery!
  2. Je veux activer/désactiver la "zone" dynamiquement avec JavaScript
  3. Ce n'est pas un <form>, juste un tas de <input>
htmlformsinputdisabled-input
14
Tony R

Le paramètre disabled = "disabled" est le moyen standard de le faire. Vous pouvez utiliser quelque chose comme jQuery pour désactiver dynamiquement tous les éléments de formulaire contenus dans un jeu de champs (qui est le moyen standard de regrouper des éléments de formulaire associés) à la volée.

Alternativement, vous pouvez placer une div partiellement transparente sur le fieldet. Cela permettra également de bloquer les éléments de formulaire à partir de clics de souris, mais ne les protégera pas contre la tabulation. Vous devez toujours désactiver les éléments de formulaire eux-mêmes.

20
Powertieke
for(i=0; i<document.FormName.elements.length; i++) {
    document.FormName.elements[i].disabled=true;
}
document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC";

parcourt les éléments du formulaire avec le nom NomForm et désactive chaque élément .. puis modifie la couleur de fond de l'élément

9
lando

s'il vous plaît noter: si vous faites désactivé>

l'élément input ne sera pas transmis si l'utilisateur soumet le formulaire.

ce que vous voulez faire à la place est:

<input type="text" name="surname" value="Korpela" readonly>

si votre formulaire est à l'intérieur d'un

<div style="background-color; grey;">

Est-ce que ça coupe le gâteau?

https://www.cs.tut.fi/~jkorpela/forms/readonly.html

2
canoodle

Vous pouvez simplement utiliser jQuery pour désactiver tous les éléments de formulaire dans cette zone, comme par exemple:


  //assuming that area is a div element with id lets say disabled-area
  $(document).ready(function(){
    $("#disabled-area input").attr("disabled", "disabled");
  });

Je n'ai pas vérifié, j'espère que cela fonctionnera :)

2
Ventus

Si vous dites que vous ne voulez pas jouer avec la propriété "disabled" - vous pouvez également positionner un formulaire transparent DIV sur HTML, qui (stylé correctement) pourrait donner l’impression que le formulaire est désactivé - les utilisateurs pourront le voir, mais ne cliquez/entrez aucune information dessus ... Ensuite, en fonction de certains événements, vous pouvez simplement supprimer/masquer cette DIV avec JS et rendre le formulaire "activé".

2
Laimoncijus

Les gens ici ont des réponses avec des boucles - inutile. Utilisez .children().

$('form').children().prop('disabled',true)

jsfiddle

0
Thielicious

Vous pouvez parcourir tous les éléments du formulaire et les désactiver. Non testé, mais essayez quelque chose comme ça:

for (x=0; x<document.YOURFORM.elements.length; x++) {
     document.YOURFORM.elements[x].disabled=true;
}
0
Brad