Voir le flux RSS

Bovino

[Actualité] Désactiver vos champs de formulaires HTML5 par groupes

Noter ce billet
par , 05/02/2015 à 11h56 (1276 Affichages)


Comme vous le savez certainement, pour désactiver qu'un champ de formulaire soit inactif, vous devez lui attribuer un attribut disabled.
Notez qu'il s'agit d'un attribut de type booléen. Ces attributs booléens ont la particularité que leur seule présence suffit à activer la fonctionnalité.

Si vous optez pour une syntaxe XHTML (c'est-à-dire conforme aux règles XML), vous devez lui attribuer une valeur (la seule autorisée pour que le document soit valide est "disabled", mais n'importe qu'elle autre valeur aura le même effet si ce n'est que le document ne sera plus valide) :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<input name="total" disabled="disabled" />
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<input name="total" disabled="foo" /><!-- aura le même effet -->

Si au contraire vous optez pour une syntaxe HTML, alors seul l'attribut est nécessaire :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<input name="total" disabled>

Le problème que vous pouvez rencontrer, c'est dans le cas où vous ayez plusieurs champs à désactiver de la sorte. Bien entendu, multiplier les attributs disabled est faisable, mais un peu lourd.
Heureusement, HTML5 arrive à votre secours.
En effet, il est désormais possible d'affecter l'attribut à une balise <fieldset>. Cette balise a pour but de regrouper des champs ayant une finalité commune.
Ainsi, en affectant l'attribut disabled à cette balise, tous les champs enfants seront désactivés sans avoir besoin de le préciser pour chacun d'eux :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
<fieldset id="groupe" disabled="disabled">
    <input name="foo" />
    <input type="checkbox" name="bar" />
    <select name="toto">
        <option value="1">Valeur 1</option>
        <option value="2">Valeur 2</option>
        <option value="3">Valeur 3</option>
        <option value="4">Valeur 4</option>
    </select>
</fieldset>

Enfin, vous aurez peut-être besoin d'activer ou de désactiver ces champs en fonction des actions de l'utilisateur. Vous pourrez le faire uniquement en JavaScript puisque ni HTML ni CSS ne prévoient d'interaction permettant d'influer sur cet attribut.
De la même manière, la propriété JavaScript disabled d'un objet de type HTMLElement correspondant à cet attribut est de type booléenne.
Notez que cette propriété prend comme valeur true ou false mais que le transtypage dynamique de JavaScript permet un comportement similaire à celui de HTML : si vous affectez à cette propriété n'importe qu'elle valeur non équivalente à false (par exemple la chaine 'disabled'), l'élément sera désactivé, sinon, il sera activé.
Dans notre exemple précédent, il est donc possible de créer un bouton permettant d'activer ou non un groupe de champs de formulaire :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<button id="switchActif">Activer / désactiver le groupe</button>
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
document.getElementById('switchActif').onclick = function(){
    var $groupe = document.getElementById('groupe');
    $groupe.disabled = !$groupe.disabled;
};

Voir un exemple en ligne.

Envoyer le billet « Désactiver vos champs de formulaires HTML5 par groupes » dans le blog Viadeo Envoyer le billet « Désactiver vos champs de formulaires HTML5 par groupes » dans le blog Twitter Envoyer le billet « Désactiver vos champs de formulaires HTML5 par groupes » dans le blog Google Envoyer le billet « Désactiver vos champs de formulaires HTML5 par groupes » dans le blog Facebook Envoyer le billet « Désactiver vos champs de formulaires HTML5 par groupes » dans le blog Digg Envoyer le billet « Désactiver vos champs de formulaires HTML5 par groupes » dans le blog Delicious Envoyer le billet « Désactiver vos champs de formulaires HTML5 par groupes » dans le blog MySpace Envoyer le billet « Désactiver vos champs de formulaires HTML5 par groupes » dans le blog Yahoo

Mis à jour 05/02/2015 à 17h23 par Bovino

Catégories
HTML / CSS , Développement Web

Commentaires