Les formulaires (2)
Vous avez déjà surement vu dans des formulaires, des listes déroulantes, des cases à cocher et bien voici comment procéder.
|
<HTML>
<HEAD> <TITLE>Formulaires</TITLE> </HEAD> <BODY> <B>Les boutons :</B> <BR><BR> <FORM> <INPUT type="button" name="mon_bouton" value="Voici un bouton"> </FORM> <BR> <B>Les liste déroulantes :</B> <BR><BR> <FORM> Comment trouver ce tutorial jusqu'à présent : <SELECT name="liste"> <OPTION value="excellent">Excellent</option> <OPTION value="bon" selected>Bon</option> <OPTION value="moyen">Moyen</option> <OPTION value="faible">Faible</option> <OPTION value="nul">Pitoyable</option> </SELECT> <BR><BR> Ou bien, on peut préciser le nombre de valeur à afficher : <SELECT name="liste" size="3"></option> <OPTION value="excellent">Excellent</option> <OPTION value="bon" selected>Bon</option> <OPTION value="moyen">Moyen</option> <OPTION value="faible">Faible</option> <OPTION value="nul">Pitoyable</option> </SELECT> </FORM> <BR> <B>Les zones de textes :</B> <BR><BR> <FORM> Entrez votre texte : <BR> <TEXTAREA name="texte" cols=40 rows=5>Texte de départ</TEXTAREA> </FORM> <BR> <B>Les cases à cocher :</B> <BR><BR> <FORM> Quels sont vos hobbys : <BR> Le sport : <INPUT type="checkbox" name="hobby1" value="sport" checked> <BR> Internet : <INPUT type="checkbox" name="hobby2" value="internet" checked> <BR> Votre site : <INPUT type="checkbox" name="hobby3" value="site"> <BR> La lecture : <INPUT type="checkbox" name="hobby4" value="lecture"> <BR> La télévision : <INPUT type="checkbox" name="hobby5" value="tv" checked> </FORM> <BR> <B>Les boutons radio :</B> <BR><BR> <FORM> Quel est votre niveau en HTML : <BR> <INPUT type="radio" name="niveau" value=3>Excellent <BR> <INPUT type="radio" name="niveau" value=2 checked>Moyen <BR> <INPUT type="radio" name="niveau" value=1>Débutant </FORM> </BODY> </HTML> |
Ce qui donnera une page dont le contenu sera comme ceci :
Les boutons :
Les liste déroulantes :
Les zones de textes :
Les cases à cocher :
Les boutons radio :
Vous avez pouvez maintenant enregistrez votre page sous le même nom et visualiser la page dans votre navigateur.
Explications des nouvelles balises utilisées :
- <select> et </select> : crée une liste déroulante. On peut lui attribuer une nom avec l'attribut "name" ainsi que le le nombre d'éléments visibles de la liste avec "size" (1 par défaut).
- <option> et </option> : ajoute un élément à la liste déroulante créée avec un SELECT. On peut lui donner une valeur grâce à son attribut "value". Par défaut, c'est la première balise option qui sera celle par défaut. Si vous voulez que ce soit une autre, il faut ajouter le mot suivant dans la balise en question : 'selected'.
- <textarea> et </textarea> : elles délimitent une zone de texte. Comme toujours on peut la nommer avec "name". On peut également en spécifier la taille avec "rows" (nombre de lignes) et "cols" (nombre de colonnes).
Nous avons également vu 3 nouvelles valeurs pour l'attribut type d'un INPUT :
- "button" : crée un bouton cliquable. On lui donne un nom au moyen de "name" et une valeur (qui sera le texte affiché sur ce bouton) avec "value". Les simples boutons n'ont pas un grand intérêt à première vue mais ils en auront beaucoup quand on leur affectera des actions via un JavaScript.
- "checkbox" : crée une case à cocher. On peut bien entendu lui donner un nom et une valeur mais on peut aussi décider si elle doit être cochée ou non au chargement de la page.
Si la case doit être cochée, il faut rajouter dans la balise le mot suivant : 'checked'. Par défaut une case n'est pas cochée.
- "radio" : crée un bouton radio. Un bouton radio seul n'a pas un grand intérêt. En général, on en place plusieurs pour donner un choix aux visiteurs. Contrairement aux cases à cocher avec lesquelles on peut sélectionner plusiers valeurs, avec les boutons radio, on ne peut en choisir qu'une ! Quand on choisit une autre valeur, celle qui était sélectionnée ne l'est plus.
ATTENTION : les boutons radios doivent avoir le même nom (via l'attibut "name") !
Pour sélectionner la valeur par défaut, comme pour les cases à cocher, il faut ajouter le mot 'checked' dans la balise du bouton par défaut.
| Précédent : Les formulaires (1) | |
| Retour au sommaire | |
