Créez votre site avec honolulu...
Apprendre le html
Cours de javascript
Apprendre les CSS

Apprendre le HTML : boutons, listes, boutons radio, checkbox, textarea  






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.

Par exemple

  

Code du premier :
<input type="button" value="Bonjour" onclick="alert('Bonjour !')">

Code du deuxième :
<input type="button" value="Coucou" onclick="alert('Coucou...')">

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> :


  1. mon sapin
  2. mon deuxième sapin
  3. 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> :
<select>
<option>je</option>
<option>tu</option>
<option>il</option>
<option>elle</option>
<option selected>nous</option>
<option>vous</option>
<option>ils</option>
<option>elles</option>
</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 :

mignons
ronds
marrants

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 :

<input type="radio" name="choix" value="mi">mignons
<input type="radio" name="choix" value="ro">ronds
<input type="radio" name="choix" value="ma">marrants

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 :

voitures
avions
trains

Le code :
<input type="checkbox"> voitures
<input type="checkbox"> avions
<input type="checkbox"> trains

Il y a encore quelques "input" en HTML ! Ce sont ceux qui permettent à l'utilisateur de rentrer des données utilisées dans les formulaires :

Les champs texte

Votre pseudo :

Votre e-mail :

Le code en est très simple :

Votre pseudo :
<input type="text" name="nom" size="10">
Votre e-mail :
<input type="text" name="mail">

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" :

Exprimez votre opinion ici :

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 !