begin process at 2012 05 28 09:53:04
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > ETENDRE LA SURFACE CLIQUABLE D'UN CONTRÔLE

ETENDRE LA SURFACE CLIQUABLE D'UN CONTRÔLE


 Information sur la source

Note :
7 / 10 - par 3 personnes
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Niveau :Débutant Date de création :10/10/2004 Vu :4 588
Auteur : vbbreizh

Ecrire un message privé
Site perso
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 Description

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

  • <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 &lt;LABEL FOR&gt;&lt;/LABEL&gt;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>
<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 &lt;LABEL FOR&gt;&lt;/LABEL&gt;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>



 Sources du même auteur

ANTI-SPAM
Source avec Zip CADRER UNE PAGE SELON LA RÉSOLUTION DE L'ÉCRAN UTILISATEUR
Source avec Zip Source avec une capture BOITES DE MESSAGE PERSONNALISÉES
Source avec une capture DIAPORAMA
Source avec Zip TIMEZONE/DÉCALAGE HORAIRE
Toutes les sources de vbbreizh

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de LocalStone le 10/10/2004 14:46:37

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.

Commentaire de smilynet le 12/10/2004 11:51:54

En effet
sypamthique ;-)))

Commentaire de Inekman le 12/10/2004 13:14:19

Simple et efficace :-P Je trouve l'astuce trop destroy !

Inekman.10/10

Commentaire de jjdagadir le 13/10/2004 11:47:52

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,

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Mio - Moov V735 - GPS Europe - Ecran 7"
Entre 305€ et 375€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Water in the Beginning of the Grand Canyon
Photo Lagoon and its inhabitant 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 8,861 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)