Etendre la surface cliquable d'un contrôle

Soyez le premier à donner votre avis sur cette source.

Snippet vu 5 575 fois - Téléchargée 33 fois

Contenu du snippet

Ce n'est pas du javascript mais une petite astuce html permettant d'étendre la surface cliquable d'un contrôle à la légende. Un petit script facile utilisant la balise label for qui vous rendra d'énormes services, notemment dans les formulaires.
Comme je ne trouve pas de rubrique 'langage html', je le mets ici à votre disposition...(il y en a qui vont raler mais qui vont quand même piquer ce truc...)

Source / Exemple :


<html><head><title>Label for</title>
<style type="text/css"><!--
.class1{width:300px; background:beige; font-size:14px; color:darkred;}
.class2{background:darkred; font-size:14px; color:beige;}
.class3{width:400px; height:160px; background:beige; font-size:14px; color:black;}
--></style></head>
<body>
<font size=2>Free JavaScript provided by ©2004-VB'Breizh<hr>
<form name='form2' action='mailto:loggin@provider' method='post' class='class1'>
<div id='div2' name='div2' class='class2'><center><b>With the <LABEL FOR></LABEL>tags</b></center></div>
<br><center><font color=red>
Extend the clickable area with &quot;<b>Label for</b>&quot;<br>
(...Click on the legend of the control...)
</font></center><p>
<fieldset><legend>...with radio buttons</legend> 
<input type="radio" name="test2" value="Css" id="r1">
       <label for="r1">Css</label><br>
<input type="radio" name="test2" value="Html" id="r2">
      <label for="r2">Html</label><br>
<input type="radio" name="test2" value="JavaScript" id="r3">
       <label for="r3">JavaScript</label><br>
<input type="radio" name="test2" value="VBScript" id="r4">
      <label for="r4">VBScript</label>
</fieldset>
<fieldset><legend>...with check boxes</legend> 
<input type="checkbox" name="test3" value="Blue" id="c1">
       <label for="c1">Blue</label><br>
<input type="checkbox" name="test" value="Red" id="c2">
      <label for="c2">Red</label><br>
<input type="checkbox" name="test3" value="Green" id="c3">
       <label for="c3">Green</label><br>
<input type="checkbox" name="test3" value="Yellow" id="c4">
       <label for="c4">Yellow</label>
</fieldset>
<fieldset><center><input type='reset' name='reset' value='Initialize' title='Reset' disabled>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type='submit' name='submit' value='Send...' title='Submit'  disabled></center></fieldset>
</form>
</body></html>

A voir également

Ajouter un commentaire

Commentaires

cs_jjdagadir
Messages postés
127
Date d'inscription
lundi 7 avril 2003
Statut
Membre
Dernière intervention
6 mars 2009
-
Hello,
toujours prêt à faire partager, c'est du bon, comme d'habitude, çà vaut son 10.
Signalons d'ailleurs que si vous voulez écrire en xhtml strict, les balises "fieldset, legend et label for" sont obligatoires dans les formulaires, en minuscule bien sûr,
dans le legend un accesskey est bienvenu, et dans l'input, un tabindex, sans oublier de fermer tous les tags.
Kenavo,
Inekman
Messages postés
292
Date d'inscription
dimanche 2 février 2003
Statut
Membre
Dernière intervention
30 juin 2006
-
Simple et efficace :-P Je trouve l'astuce trop destroy !

Inekman.10/10
smilynet
Messages postés
11
Date d'inscription
vendredi 3 octobre 2003
Statut
Membre
Dernière intervention
31 octobre 2004
-
En effet
sypamthique ;-)))
LocalStone
Messages postés
515
Date d'inscription
mercredi 19 mars 2003
Statut
Membre
Dernière intervention
1 mars 2009
-
Putain, mais ça n'a rien à foutre là, c'est pas du Javascript !
Non, je plaisante. C'est vrai que c'est utile et ça peut rendre plus convivial certaines interfaces. Merci !
++ !
L.S.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.