Les formulaires

Comment créer un formulaire et quelles sont les différentes balises utilisées pour le concevoir .

Simple formulaire

Simple formulaire
Formulaire simple avec un champ
<form action="#" method="post">
<fieldset>
<legend>Simple formulaire</legend>
<input name="champ1" type="text" size="40" maxlength="100">
<input value="Valider" type="submit">
</fieldset>
</form>

form action: indique l'URL qui procède au traitement du formulaire.
method: méthode HTTP qui sera employée pour soumettre le formulaire. Deux choix possibles, "POST" ou "GET".
fieldset: permet de regrouper thématiquement les éléments et d'assigner une légende. Cela facilite la navigation par tabulation pour les personnes handicapés.
input: permet de définir les différentes zones composant le formulaire.
name: nom du champ du formulaire. Celui ci doit être différent si le formulaire comporte plusieurs champs.
type: définit le type d'éléments du formulaire (boutons, zones de textes...), la valeur par défaut de cet attribut est "TEXT" qui définit une zone de saisie texte.
size: définit la taille du champ.
maxlength: définit le nombre de caractères acceptés ( ici 100 lettres maximum).
value: spécifie la valeur de la commande.
submit: permet de soumettre le formulaire.

Formulaire 2 champs

Formulaire composé de 2 champs


Formulaire composé de 2 champs dont un textarea et d'un bouton pour effacer

<form action="#" method="post">
<fieldset>
<legend>Formulaire composé de 2 champs</legend>
<input name="champ1" size="40" maxlength="100" type="text"><br/>
<textarea name="champ2" rows="3" cols="30"></textarea><br/>
<input value="Valider" type="submit">
<input name="Effacer" value="Effacer" type="reset">
</fieldset>
</form>

Dans cette exemple, j'ai ajouté un champ textarea et un bouton pour effacer le formulaire.
textarea: permet de donner une zone de texte libre.
rows: définit le nombre de ligne.
cols: définit la largeur de la zone de texte.
reset: permet d'éffacer le formulaire.

Formulaire avec checkbox

Formulaire avec checkbox



Exemple d'un formulaire avec checkbox et description des champs
<form action="#" method="post">
<fieldset>
<legend>Formulaire avec checkbox</legend>
<label for="texte">Texte</label>
<input name="champ1" size="40" maxlength="100" type="text"><br/>
<label for="choix1"><input name="choix1" value="choix1" checked="checked"  
type="checkbox" id="choix1">
choix1</label><br/> <label for="choix2"><input name="choix2" value="choix2" type="checkbox"
id
="choix2">
choix2</label><br/> <label for="choix3"><input name="choix3"
value="choix3" type="checkbox" id="choix3">
choix3</label><br/> <input value="Valider" type="submit"> </fieldset> </form>

label: permet de donner une description aux champs. Cela facilite la navigation par tabulation pour les personnes handicapés.
checked="checked": l'argument CHECKED permet de pré-cocher une case.
type="checkbox": permet de donner des réponses sous forme de cases à choix multiples.
id="..": permet d'identifier des éléments dans la page en cours de visualisation.
L'utilisation de checkbox permet des choix multiples.

Formulaire avec bouton radio

Formulaire avec bouton radio



Exemple d'un formulaire avec l'utilisation de boutons radio
<form action="#" method="post">
<fieldset>
<legend>Formulaire avec bouton radio</legend>
<label for="texte">Texte</label>
<input name="champ1" size="40" maxlength="100" type="text" /><br />
<label for="choix1"><input name="ma selection" value="choix1" 
checked
="checked" type="radio" id="choix1" />
choix1</label><br /> <label for="choix2"><input name="ma selection" value="choix2"
type="radio" id="choix2" />
choix2</label><br /> <label for="choix3"><input name="ma selection" value="choix3"
type
="radio" id="choix3" />
choix3</label><br /> <input value="Valider" type="submit" /> </fieldset> </form>

type="radio": permet de donner une réponse sous forme de bouton à choix unique.
L'utilisation de radio permet qu'un seul choix parmit ceux proposés. Faite attention à ce que la balise "name" porte le même nom.

Formulaire avec liste caché

Formulaire avec liste
Formulaire avec une liste caché à choix unique
<form action="#" method="post">
<fieldset>
<legend>Formulaire avec liste</legend>
<select name="FORMULAIRE">
<option value="Choix">Faite un choix dans cette liste.</option>
<option value="choix1">choix1</option>
<option value="choix2">choix2</option>
<option value="choix3">choix3</option>
<option value="choix4">choix4</option>
</select>
<input value="Valider" type="submit" />
</fieldset>
</form>

select name: définit le début et le nom du formulaire.
option value: définit chaque élément de la liste.

Formulaire avec liste ouverte

Formulaire avec liste
Formulaire avec une liste de choix visible directement et par groupe
<form action="#" method="post">
<fieldset>
<legend>Formulaire avec liste</legend>
<select name="FORMULAIRE" size="6">
<optgroup label="groupe 1">
<option value="choix1">choix1</option>
<option value="choix2">choix2</option>
</optgroup>
<optgroup label="groupe 2">
<option value="choix3">choix3</option>
<option value="choix4">choix4</option>
</optgroup>
</select>
<input value="Valider" type="submit" />
</fieldset>
</form>

size="6": permet de définir le nombre de choix à afficher sans avoir besoin de scroller.
optgroup label: permet de définir un groupe.

Formulaire avec selection multiple

Formulaire avec sélection multiple
Ce formulaire est identique à celui du dessus mais avec une sélection multiple
<form action="#" method="post">
<fieldset>
<legend>Formulaire avec sélection multiple</legend>
<select name="FORMULAIRE" size="6" multiple="multiple">
<optgroup label="groupe 1">
<option value="choix1">choix1</option>
<option value="choix2">choix2</option>
</optgroup>
<optgroup label="groupe 2">
<option value="choix3">choix3</option>
<option value="choix4">choix4</option>
</optgroup>
</select>
<input value="Valider" type="submit" />
</fieldset>
</form>

multiple="multiple": permet une selection multiple en maintenant enfoncé la touche Ctrl de votre clavier.

Envoyer un fichier

Envoyer un fichier
Formulaire avec envoie d'un fichier
<form action="#" accept="text/plain,text/html" method="post">
<fieldset>
<legend>Envoyer un fichier</legend>
<label>Selectionner un fichier <input type="file" /></label>
<input value="Valider" type="submit">
</fieldset>
</form>

accept="..": permet de définir le type de fichier qui peut être envoyé. Il vous est possible d'autoriser plusieurs types en les séparents par une virgule.

Plusieurs choix possible:
text: text/rfc822 , text/plain , text/html.
image: image/jpeg , image/gif , image/png , image/*.
audio: audio/basic , audio/wav.
video : video/mpeg.
application: application/octet-stream , application/pdf.

type="file": permet la selection local d'un fichier.

Champ caché

Champ caché
Cacher le champ d'un formulaire
<form action="#" method="post">
<fieldset>
<legend>Champ caché</legend>
<label>Ici se trouve un champ caché <input type="hidden" value="mon mot de passe"/>
</label> <input value="Valider" type="submit"> </fieldset> </form>

type="hidden": permet de cacher un champ. Ce "type" est généralement utilisé pour la transmission de donnée n'ayant pas besoin d'être modifier. Attention, celui ci est quand même visible en regardant juste le code source de la page ... il ne faut donc pas y mettre des données sensibles!

Voir/déposer un commentaire (2) | Signaler un problème