Etendre la surface cliquable d'un contrôle

Commenter

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

S'inscrire maintenant

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.

Du même auteur (vbbreizh)