L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle
     ClickInText
     XooIt

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
121713 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kit graphique
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Compteur live
     Créer un forum
     Le PHP facile
     Comscripts
     Liens sponsorisés
     Blog
     Page Rank
     Gifs animés, f...
     Poésie et cita...
     Easy-script.com
     Web creation ...
     Je crée mon site
     Azote.org - no...
     Outils de créa...
     K i s s design
     Electroniq...
     L'histoire d'a...
     Les autres
     Votre site ici ?


Article posté par : krucial
Date de mise en ligne : 13-06-2004
Niveau : Assez facile
>> Ajouter un article

Utilisation de la balise <label> dans un formulaire


Mais, qu'est ce donc ?

Cette balise meconnue permet d'ameliorer grandement l'ergonomie de vos formulaires.
Elle permet en effet de cocher un element "radio" et "checkbox" par un clic sur le texte qui lui est joint.

Ca sera plus clair avec un exemple :
Sans label (vous êtes obligé de cliquer sur le "radio" pour cocher ce choix)

C'est tout de même plus simple non ? :)


Utilisation :

C'est assez simple, il suffit :
1 - de donner un "id" a l'element radio :
<input type="radio" name="test" value="1" id="nom_d_id" />

2 - d'entourer le texte correspondant de balises <label>, en passant l'ID en parametre :
<label for="nom_d_id">Et voila le travail</label>

Ce qui donne dans un formulaire :
<form>
Vous êtes :<br />
<input type="radio" name="test" value="1" id="radio1" /> <label for="radio1">Integrateur HTML</label><br />
<input type="radio" name="test" value="1" id="radio2" /> <label for="radio2">Developpeur</label><br />
<input type="radio" name="test" value="1" id="radio3" /> <label for="radio3">Graphiste</label><br />
<input type="radio" name="test" value="1" id="radio4" /> <label for="radio4">Autre</label><br />
</form>



Resultat :

Vous êtes :







Annotations des visiteurs :

De anedam - le 14-12-2009

Si on veut cacher le checkbox avec son label ? comment on fait ?
De tibo59 - le 12-02-2005

excellent! je connaissais pas mais ouarf vais en abuser :p
De francocompanies - le 14-11-2004

Moi aussi, j'utilise Safari sur mon MAC, et le script fonctionne parfaitement.
De Rothlis - le 06-09-2004

Les <label> ne sont pas compatibles avec Safari.
De Xenon_54 - le 14-07-2004

Le tag <label> permet en fait d'associer un texte, une explication à un champ formulaire. Il est notamment utilisé par les non-voyants.

Veillez donc à modifier vos formulaires pour ceux qui ne peuvent voir. :)

>> Poster une annotation sur cette astuce

Retour à la liste des trucs et astuces





compteur gratuit
actuellement en ligne

    PUBLICITE



     ANNUAIRE WEBMAST.
GrosBill
GrosBill est un site de vente high tech serieux, disposant d'une boutique a Paris.
http://www.grosbill.com
Cat : Hardware
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

     LES MEMBRES :
65912 membres
4797 comptes CountUs
1839 comptes myCircle

     LES FORUMS :
14 forums
40353 topics
191677 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "Hebergement / Linux" du jour par caaptusss
Lorsque vous choisissez votre hébergment, ne prenez pas trop large ! 150 Mo suffisent largement pour un site qui n'a que quelques dizaines de pages ! Vous pourrez alors agrandir votre espace au fur et à mesure que vous en aurez besoin !
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2012 EJS - Tous droits réservés | CNIL N° 844440 | 04/02/2012 03:30:35 | Design by | Gen. en 0.355 sec.