SELFHTML/Quickbar
HTML
Formulaires SELFHTML/Quickbar
HTML
Formulaires
Définir une liste de choixVous pouvez proposer à l'utilisateur une liste de choix avec des éléments invariables dont il peut en choisir un. Le texte de l'élément inscrit est transmis quand l'utilisateur envoie le formulaire.
<p>Votre favori:</p> <select name="top5" size=3> <option> Françoise Hardy <option> Michael Jackson <option> Jacques Dutronc <option> Sheila <option> Johnny Hallyday <option> Sylvie Vartan </select> |
<select ...> introduit une liste de choix. Chaque liste reçoit une nom d'identification interne et cela grâce à la mention name=. Le nom ne doit pas être trop long et ne peut contenir ni caractères spéciaux, ni espace. Utilisez tout au plus comme caractère spécial le tiret de soulignement "_". Placez le nom entre guillemets.
Avec l'attribut size= vous déterminez la taille d'affichage de la liste c'est à dire combien d'éléments doivent être affichés. Si la liste contient plus d'éléments que ceux qui sont affichés, l'utilisateur peut faire dérouler la liste. Si vous mentionnez size=1, vous définissez ce qu'on appelle une liste "Drop-down".
<option> définit chacun des éléments d'une liste de choix. Derrière <option> doit figurer le texte de l'élément. Vous pouvez définir autant d'éléments de liste que vous le désirez.
Un repère de fermeture </option> est permis mais pas indispensable.
Avec </select> la liste de choix est close.
La largeur d'affichage de la liste est détectée automatiquement en fonction
du plus long des éléments de la liste (voir aussi 
autres
possibilités)
À l'aide de 
JavaScript
vous pouvez aussi détourner des listes de choix de leur but pour réaliser des
liens à l'intérieur de votre projet. Dans cette documentation vous en
trouverez un exemple: 
liste
de liens comme liste de choix.
|
Liste de choix à plusieurs choixSi vous ne mentionnez rien, l'utilisateur ne peut choisir qu'un élément d'une liste de choix. Vous pouvez permettre un choix multiple.
<p>Tous vos favoris des années 70:</p> <select name="top70s" size=5 multiple> <option> the Beatles <option> Johnny Hallyday <option> the Rollin Stones <option> Otis Redding <option> Nino Ferrer <option> Chicago </select> |
Les listes de choix à choix multiples sont définies comme des listes
de choix normales. Le choix multiple est rendu possible par l'attribut
supplémentaire multiple dans le repère d'ouverture <select>.
Un choix multiple n'est pas reconnaissable immédiatement par l'utilisateur. C'est pourquoi il vous faut attirer son attention si plusieurs éléments peuvent être choisis. Tous les utilisateurs ne savent pas non plus comment ils peuvent choisir plusieurs éléments. Sur les claviers d'ordinateur modernes, on opère normalement en maintenant la touche [Contrôle] appuyée et en cliquant sur les éléments choisis.
|
|
Présélectionner des élémentsSi vous ne mentionnez rien, il n'y a d'abord aucun élément
présélectionné dans une liste de choix. Vous pouvez présélectionner un
élément. En relation avec liste
de choix à plusieurs choix vous pouvez aussi présélectionner
plusieurs éléments. Les éléments présélectionnés sont marqués par une
barre visible.
<p>Qui connaissez vous le mieux?</p> <select name="mieuxconnu" size=3> <option> Rosa Luxemburg <option selected> Jacques Chirac <option> Herbert Léonard </select> |
Les listes de choix avec présélection sont définies comme des listes
de choix normales. Pour prédéfinir un élément de la liste de choix,
mentionnez dans le repère <option...> de l'élément
concerné l'attribut selected.
|
|
Déterminer la valeur devant être transmise des éléments choisisEn principe le texte de l'élément choisi placé derrière <option> est transmis lors de l'envoi du formulaire. Vous pouvez toutefois spécifier qu'un autre texte interne soit transmis.
<p>Votre commande de pizzas:</p> <select name="Pizza" size=5> <option value="P101"> Pizza Napoli <option value="P102"> Pizza champignons <option value="P103"> Pizza Cyclope <option value="P104"> Pizza fromage <option value="P105"> Pizza Anchois <option value="P106"> Pizza Quatre Saisons <option value="P107"> Pizza de la Casa <option value="P108"> Pizza royale <option value="P109"> Pizza con tutti </select> |
Les listes de choix avec d'autres valeurs à transmettre sont définies comme
des listes
de choix normales. Pour déterminer une autre valeur à transmettre pour
un élément de la liste de choix, mentionnez dans le repère <option...>
de l'élément concerné l'attribut value= an (value = valeur).
La mention doit figurer entre guillemets. Lors de l'envoi du formulaire, c'est
le texte défini ici qui sera transmis et non pas le texte de l'élément de la
liste proposé à l'utilisateur.
|
|
Définir une structure de menusLes commandes suivantes ne devraient pas être affichées par un navigateur WWW comme d'habitude comme de simples listes de choix mais au contraire comme une structure de menus imbriqués. Les utilisateurs d'interfaces graphiques modernes connaissent ce genre de menus imbriqués. Le menu Démarrer de Windows 95 est par exemple un tel menu.
Netscape 4.0 et l' der Explorer Internet MS 4.0 n'interprètent malheureusement pas encore ces mentions.
<select name="noms" size=3> <optgroup label="noms avec A"> <option label="Anna"> Anna <option label="Antoine"> Antoine <option label="Auguste"> Auguste </optgroup> <optgroup label="noms avec B"> <option label="Berthe"> Berthe <option label="Barbara"> Barbara <option label="Bernard"> Bernard </optgroup> <optgroup label="noms avec C"> <option label="César"> César <option label="Christiane"> Christiane <option label="Christian"> Christian </optgroup> </select> |
Un navigateur WWW devrait représenter une telle structure de menus d'après le consortium W3 comme ci-après:
Pour une telle structure de menus imbriqués définissez des sous groupes de listes de choix. Pour ce faire, notez entre les repères <select> et </select> pour chaque sous-groupe désiré le repère <optgroup> et à la fin du sous-groupe le repère de fermeture </optgroup>. Dans le repère d'ouverture <optgroup> attribuez avec l'attribut label= un nom pour le groupe d'éléments. Cet élément sera affiché si le navigateur interprète le menu de cette façon. La mention doit figurer entre guillemets.
Pour les éléments d'un sous groupe notez pour chacun d'entre eux un repère <option>. Déterminez ici aussi l'élément affiché grâce à l'attribut label=.
Les valeurs que vous notez derrière <option> ne sont d'aucune importance pour la représentation du menu. Il est cependant important de les noter car les navigateurs qui ne supportent pas la représentation de menus affichent à la place une liste de choix normale avec les éléments que vous avez mentionné derrière le repère <option>.
Si vous voulez réaliser des sous menus aux sous menus, notez simplement entre les repères <optgroup>...</optgroup> à l'endroit désiré un autre passage avec <optgroup>...</optgroup>.
|
|
Autres possibilitésLes repères <select> et <option> peuvent
contenir des attributs
universels.
Il est tout à fait permis d'utiliser des feuilles
de style CSS sur des éléments de formulaire. Malheureusement Netscape
n'interprète pas encore ce genre de possibilités dans sa version 4.x. L' Explorer
Internet MS 4.x interprète les feuilles de style en relation avec les
éléments de formulaire. Pour cela vous devez d'abord savoir comment définir
des feuilles de style. Ensuite, vous serez en mesure d'utiliser des
mentions de feuilles de style. Dans le contexte décrit ici les mentions de
feuilles de style suivantes sont par exemple intéressantes:
Formatage
de l'écriture
Couleurs
et images d'arrière plan
Positionner
des éléments
|
| |
après: |
Boutons radio et boites de vérification
|
avant: |
Champ de saisie à plusieurs lignes
|
SELFHTML/Quickbar
HTML
Formulaires
Serge François, 13405@free.fr
