Cette page vous permettra très rapidement de créer des boutons et des cases à cocher
et des champs à remplir...
Les boutons
Un bouton comme celui-là se crée très facilement !
Il vous suffit dans votre éditeur de taper le code suivant :
<input type="button">
Ensuite vous pouvez lui affecter un nom :
code :
<input type="button" value="cliquez ici">
Vous pouvez lui affecter aussi une action (dans un formulaire) :
code :
<input type="reset" value="Effacer">
code :
<input type="submit" value="Envoyer">
Vous aurez remarqué que c'est le "value" qui détermine le nom visible du bouton mais que son
action est déterminée par le "type"...
A noter que dans un formulaire, on emploie principalement type="reset" pour
remettre à zéro les données d'un formulaire ou type="submit" pour valider et envoyer
ces mêmes données...
En effet, type="button" s'emploie exclusivement lorsque le
bouton exécute une action locale, comme du Javascript ou DHTML.
Voilà vous en savez assez, de quoi vous donner de l'urticaire !
Ce que l'on rencontre aussi dans les pages HTML, ce sont les listes...
Les listes ordonnées
un cheval blanc
un porc tout rose
Vos énumérations doivent être encadrées par <ul> et </ul> et entre ces deux balises,
chaque objet énuméré doit être précédé de <li> et suivi de </li>:
<ul>
<li>un cheval blanc</li>
<li>un porc tout rose</li>
</ul>
On peut énumérer aussi avec <li> encadré cette fois par <ol> et </ol> :
mon sapin
mon deuxième sapin
mon troisième sapin
Vous noterez le retrait de ligne et bien sûr la numérotation...
Pour en terminer avec les listes, sachez que vous pouvez agrémenter vos énumérations de
"symboles" comme :
Un carré qu'on obtient avec <li type="square">
Un disque (c'est celui par défaut si aucun type n'est spécifié) défini par <li type="disk">
Un cercle vide rendu par <li type="circle">
Les menus déroulants
Les boîtes de défilement ressemblent à ça :
Le code en est plutôt simple : les différentes
propositions sont déclarées avec <option>, le tout étant encadré par <select> :
Possiblité de spécifier "multiple" dans la balise <select> pour
autoriser le choix multiple...
La seule différence étant l'option "nous" qui a été présélectionnée et donc apparaît
dans la petite fenêtre. Par défaut, c'est la première option qui aurait été préselectionnée (l'option "je").
Ces options auraient pu être accompagnées, comme pour les boutons, d'une "value" dont le
choix aurait pu activer une action Javascript ou autre. Voir le menu déroulant pour plus d'information...
Les checkbox et boutons radio
Les cases à cocher sont principalement de deux types : les "radio" et les "checkbox".
J'aime les boutons radio parce qu'ils sont :
Bizarrerie ou laxisme de l'un et intransigeance de l'autre ? Les boutons radio fonctionnent parfaitement avec IE5.5 et mal avec Netscape 6.2
si l'on omet d'encadrer les boutons radio par <form> et </form>.
Toujours est-il que le code des boutons radio est le suivant :
Une autre forme de "boutons" sont les "checkbox", littéralement cases à cocher. Alors que les boutons
radio, en principe n'autorisent qu'un seul choix, les "checkbox" en permettent plusieurs :
J'aime les :
J'ai spécifié la taille "size" pour le pseudo pour l'exemple. La taille par défaut est
celle de l'e-mail qui équivaut environ à "size=20". Attribuer un nom à un "text"
est nécessaire encore une fois pour l'utilisation de Javascript ou d'autres langages (PhP par
exemple) lors du traitement des informations.
Exemple rapide et non complet :
Essayez de rentrer un e-mail sans @ dans le champ suivant :
C'est, entre autres, parce que le champ "mail" possède un attribut "name" que cette action Javascript a
été possible...
On demande parfois aussi à l'utilisateur de rentrer des informations qui peuvent
requérir bien plus d'espace qu'un "text". On utilisera dans ce cas le "textarea" :
Le code est :
<textarea rows="5" cols="20"></textarea>
Une zone de texte n'est pas introduite par <input> mais par <textarea> et doit se refermer
par la balise </textarea>.
Vous aurez noté les spécifications du nombre de colonnes cols="20" et celui des
rangées rows="5".
IE 5.5 affiche spontanément une barre de défilement verticale
et le texte va à la ligne tout aussi spontanément. Pour Netscape, la barre de défilement
horizontale n'apparaît que si le texte plus long que les 20 de "cols" le justifie !
D'ailleurs ce même texte ne va pas à la ligne : vous pouvez avoir ainsi 10
kilomètres de texte sur une seule ligne. Pour se relire c'est un peu embarrassant ! Vous n'oublierez
donc pas d'ajouter "wrap=physical" dans votre balise <textarea wrap="physical">
C'est ainsi qu'apparaîtra une barre de défilement verticale pour Netscape si toutefois
l'internaute effectue "physiquement" un retour chariot !
Voilà, je pense avoir fait le tour des boutons et autres checkbox et radio.
Vous en savez assez maintenant pour agrémenter au mieux vos pages HTML !