Avec les listes de sélection, vous pouvez proposer aux visiteurs une liste d'entrées parmi lesquelles ils peuvent sélectionner une entrée.
<select name="langues"> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
Les listes de sélection sont définies par l'élément select. Encore une fois, chaque liste de sélection devrait être identifiable de manière unique dans le document via un identifiant (name). Chaque entrée de la liste est définie par un élément option. Le texte de l'entrée de la liste est positionné entre la balise d'ouverture et de fermeture de <option>.
Par défaut, en soumettant le formulaire, le texte de l'entrée de liste sélectionnée est transmis. Alternativement, vous pouvez aussi personnaliser la valeur de soumission. Cela se fait par l'attribut value.
<select name="langues"> <option value="s1">HTML</option> <option value="s2">JavaScript</option> <option value="s3">CSS</option> <option value="s4">XML</option> <option value="s5">Java</option> </select>
Pour attribuer cette value, il suffit de lui affecter la valeur de soumission souhaitée.
Normalement, une liste de sélection n'affiche qu'une seule entrée à la fois. Sur demande, vous pouvez également afficher plusieurs entrées en même temps.
Pour cela, attribuez à l'élément select l'attribut size. Ce size définit la taille d'affichage de la liste de sélection.
<select name="langues" size="3"> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
Si la liste contient plus d'entrées qu'il n'est possible d'afficher, la liste est scrollable.
Par défaut, une liste de sélection permet de sélectionner une seule entrée à la fois. Si nécessaire, vous pouvez également permettre une sélection multiple.
<select name="langues" size="3" multiple> <option>HTML</option> <option>JavaScript</option> <option>CSS</option> <option>XML</option> <option>Java</option> </select>
La sélection multiple est possible en attribuant l'attribut multiple à l'élément select.
À l'origine, aucune entrée n'est pré-sélectionnée dans les listes de sélection. Cependant, ceci peut être modifié en ajoutant un attribut approprié.
<select name="langues" size="3" multiple> <option>HTML</option> <option>JavaScript</option> <option selected>CSS</option> <option>XML</option> <option>Java</option> </select>
Pour pré-sélectionner une entrée, attribuez à l'élément option concerné l'attribut selected.
Vous pouvez d'ailleurs pré-sélectionner plusieurs entrées. Pour ce faire, utilisez simplement l'attribut selected plusieurs fois.
Boutons radio
Avec les boutons radio, vous pouvez définir des groupes de boutons.
À partir de ces groupes, les utilisateurs peuvent choisir une des options proposées.
Les boutons radio sont définis par des éléments d'entrée auxquels la combinaison attribut-valeur type="radio" est assignée.
<form action="form.php" method="post">
<p>Souhaitez-vous vous abonner à la newsletter?:</p>
<p>
<input type="radio" name="newsletter" value="oui" /> Oui<br />
<input type="radio" name="newsletter" value="non" /> Non
</p>
</form>
Utilisez également l'attribut name ici pour assigner un identifiant aux boutons radio. Tous les boutons ayant le même nom appartiennent à un groupe. Un seul de ces boutons peut ensuite être sélectionné.
À l'aide de l'attribut value, on détermine la valeur à soumettre pour chaque bouton.
Pour pré-sélectionner un bouton, attribuez-lui l'attribut checked.
<form action="form.php" method="post">
<p>Souhaitez-vous vous abonner à la newsletter?:</p>
<p>
<input type="radio" name="newsletter" value="oui" /> Oui<br />
<input type="radio" name="newsletter" value="non" checked /> Non
</p>
</form>
Il faut noter que seulement un pré-choix peut être fait pour un bouton d'un groupe.
Cases à cocher
Vous connaissez également les cases à cocher de nombreux formulaires.
Il s'agit d'un groupe de rectangles à cocher, parmi lesquels les utilisateurs peuvent en sélectionner un, aucun ou plusieurs.
<p>Quels sujets t'intéressent encore?:</p>
<p>
<input type="checkbox" name="thema" value="html" /> HTML<br />
<input type="checkbox" name="thema" value="css" /> CSS<br />
<input type="checkbox" name="thema" value="javascript" /> JavaScript
</p>
Les cases à cocher sont définies par des éléments input, auxquels la combinaison d'attribut-valeur type="checkbox" est attribuée. Chaque case à cocher se voit attribuer un identifiant via l'attribut name. Toutes les cases à cocher ayant le même nom appartiennent au même groupe. L'attribut value permet de déterminer la valeur d'envoi de chaque case à cocher.
Champs de saisie cachés
Vous pouvez définir à l'intérieur des formulaires des champs qui sont invisibles pour les visiteurs. Lors de l'envoi du formulaire, les valeurs contenues dans les champs cachés sont transmises. C'est intéressant par exemple quand on veut transmettre des valeurs calculées via PHP sans que les utilisateurs ne s'en aperçoivent.
Les champs de saisie cachés sont définis par des éléments input auxquels la combinaison attribut-valeur type="hidden" est assignée.
<input type="hidden" name="id" value="">
L'élément est donné un identifiant unique via l'attribut name. La valeur du champ est indiquée par value. Il peut s'agir d'une valeur statique. On peut également l'assigner de manière dynamique avec PHP ou JavaScript, par exemple.
Champs de téléchargement
Si vous souhaitez permettre aux visiteurs de télécharger des fichiers, vous pouvez également proposer un champ correspondant. Voici un exemple de ce à quoi pourrait ressembler une application similaire:
<form action="form.php" method="post" enctype="multipart/form-data"> <p>Votre choix:<br> <input name="Fichier" type="file" /></p> </form>
Cela se présente de la manière suivante dans le navigateur:
Les champs de téléchargement sont définis par des éléments input avec la combinaison attribut-valeur type="file". Utilisez pour ce type de champ dans le <form> initial l'indication method="post". En outre, l'attribut-valeur enctype="multipart/form-data" doit également être présent. C'est seulement de cette manière que les fichiers seront effectivement transmis. Si cette indication est omise, seul le nom de fichier sera transmis.
Boutons pour envoyer et annuler
Pour que les données du formulaire soient effectivement envoyées, il faut bien sûr un bouton correspondant.
La syntaxe suivante est utilisée pour soumettre des formulaires:
<input type="submit" value="Envoyer" />
La valeur de l'attribut value détermine ce qui sera affiché sur le bouton.
Le contrepartie de ces boutons Soumettre sont les boutons Annuler.
En cliquant sur un tel bouton, tous les contenus du formulaire seront effacés. La syntaxe pour ces boutons est la suivante:
<input type="reset" value="Annuler" />
De même ici: La libellé est défini par la valeur de l'attribut value.
Vous pouvez d'ailleurs également définir des boutons via l'élément button.
Avantage de cette variante: Vous êtes donc très flexible. En effet, vous pouvez déterminer vous-même l'apparence et la fonctionnalité de ces boutons.
<button name="klick" type="button" value="Surprise" onclick="alert('Es-tu sûr ?');">Clique-moi</button>
Dans l'exemple actuel, grâce au gestionnaire d'événements onclick, une fenêtre d'alerte JavaScript s'ouvre lorsque vous cliquez sur le bouton. L'apparence du bouton est déterminée par le contenu entre la balise d'ouverture et de fermeture de <button>. Il peut s'agir de n'importe quel contenu. Il n'est donc pas seulement autorisé d'utiliser du texte. Vous pouvez également spécifier un élément img pour générer un bouton graphique.
