Créer un formulaire et les
différentes
balises utilisées pour le concevoir .
Simple formulaire
Formulaire simple avec un champ
<form action="#" method="post">
<fieldset>
<legend>Mon 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 dont un textarea et d'un bouton pour effacer
<form action="#"
method="post">
<fieldset>
<legend>Mon 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
Exemple d'un formulaire avec checkbox
et description des champs
<form action="#"
method="post">
<fieldset>
<legend>Mon 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
Exemple d'un formulaire avec
l'utilisation de boutons radio
<form action="#"
method="post">
<fieldset>
<legend>Mon 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
bouton 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 combo
Formulaire avec une liste
caché à choix unique
<form action="#"
method="post">
<fieldset>
<legend>Mon 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 une liste de choix
visible directement et par groupe
<form action="#"
method="post">
<fieldset>
<legend>Mon 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
Ce formulaire est identique à celui du dessus mais avec une sélection
multiple
<form action="#"
method="post">
<fieldset>
<legend>Mon formulaire a 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
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é
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!
| 
