Aide-mémoire des formulaires (X)HTML

<form> .... </form>

Cette balise encapsule tout le formulaire qui va transmettre des informations au serveur (envoi de mail, login, fiche, recherche, etc...).

Ses attributs spécifiques sont:

method="...."

"post" ou "get"

action="...."

adresse de la page qui va recevoir les données, ou adresse e-mail pour envoyer le formulaire avec le logiciel de mail du visiteur

target="...."

"self", "blank", "parent" ou "top" (pas en xhtml strict)

onsubmit="...."

du code javascript qui sera exécuté avant de soumettre le formulaire, par exemple pour vérifier les champs sur la machine du visiteur

<fieldset> .... </fieldset>

Cette balise regroupe des balises d'un formulaire et les entoure d'un cadre.

On peut aussi regrouper les balises dans des "<p>....</p>" ou dans des "<div>....</div>"

<legend> .... </legend>

Cette balise affiche une légende sur le cadre "fieldset".

<input type="text" name="...." />

Cette balise permet d'afficher et de saisir une ligne de texte.

Ses attributs spécifiques sont:

__value="...."

valeur qui sera transmise au serveur

__size="...."

largeur d'affichage en nombre de caractères

maxlength="...."

nombre maximum de caractères qui oeut être entré par l'utilisateur

readonly="readonly"

indique que le champ ne peut être modifié, sauf par un script, mais il peut être sélectionné et copié.

Par exemple, le formulaire

<form method="post" action="#">
<p>
<input type="text" name="texte1" size="10" value="test" />
</p>
</form>

affichera

<input type="checkbox" name="...." />

Cette balise permet de cocher un choix.

Ses attributs spécifiques sont:

value="...."

valeur qui sera transmise si la case est cochée

checked="checked"

pour cocher la case à l'ouverture de la page

Par exemple,

<input type="checkbox" name="nom_choix1" value="choix1" /> Premier choix
<br />
<input type="checkbox" name="nom_choix2" value="choix2" checked="checked" /> Deuxième choix choix

affichera

Premier choix
Deuxième choix choix

On peut utiliser un tableau de cases cochées, en ajoutant des crochets au name unique, comme mon_champ[] dans l'exemple suivant. La variable $_POST['mon_champ'] sera alors aussi un tableau qui ne contiendra que les valeurs cochées par l'utilisateur.

<input type="checkbox" name="mon_champ[]" value="Option 1"/>Option 1<br />
<input type="checkbox" name="mon_champ[]" value="Option 2"/>Option 2<br />
<input type="checkbox" name="mon_champ[]" value="Option 3"/>Option 3<br />

<input type="radio" name="...." />

Permet de sélectionner une option et seulement une parmi plusieurs qui ont le même attribut "name".

Ses attributs spécifiques sont:

value="...."

valeur qui sera transmise si la case est cochée

checked="checked"

pour indiquer la case cochée à l'ouverture de la page

Par exemple,

<input type="radio" name="animal" value="chat" /> Chat
<br />
<input type="radio" name="animal" value="chien" checked="checked" /> Chien
<br />
<input type="radio" name="animal" value="lapin" /> Lapin

affichera

Chat
Chien
Lapin

<input type="password" name="...." />

Pour saisir un mot de passe en affichant "*" pour chaque caractère entré.

Par exemple,

<input type="password"  name="code" />

affichera

Entrez votre mot de passe

<input type="hidden" name="...." value="...." />

Pour transmettre une variable sans l'afficher

<input type="submit" name="...." />

Bouton pour envoyer tous les champs du formulaire vers le serveur.

Son attribut spécifique est:

value="...."

valeur qui sera affichée sur le bouton et envoyée au serveur

On peut placer plusieurs boutons "submit" avec des "name" différents.

Par exemple,

<input type="submit"  value="Envoyer" />

affichera

<input type="reset" />

Pour effacer tous les champs du formulaire.

Aucun attribut n'est généralment associé au "reset".

Dans l'exemple suivant, tapez un oeu de texte puis cliquez sur le bouton "effacer".

<input type="button"  value="Test" />

affichera

<input type="button" name="...." />

Affiche un bouton mais n'effectue aucune action, il doit donc être associé pour lancer un script javascript.

Ses attributs spécifiques sont:

value="...."

valeur qui sera affichée sur le bouton et envoyée au serveur

onclick="...."

du code javascript

Par exemple,

<input type="button"  value="Test" />

affichera

<input type="image" name="...." />

Bouton pour envoyer tous les champs du formulaire vers le serveur mais en utilisant une image à la place d'un bouton.

Ses attributs spécifiques sont:

value="...."

valeur qui sera envoyée au serveur

src="...."

source de l'image

Par exemple,

<input type="image"  value="envoi" src="../up/bouton-image.gif"/>

affichera

<input type="file" name="...." />

Affiche une boîte de dialogue de choix de fichier.

Par exemple,

<input type="file"  value="fichier" />

affichera

<label for="...."> .... </label>

Cette balise associe un label à un élément du formulaire déterminé par son id. Cliquer sur le label revient alots à cliquer sur l'élément associé.

Par exemple,

<input type="checkbox" name="nom" id="monid" value="choisi" /> <label for="monid">Choisir</label>

affichera

Choisir

<button type="" name="...."> .... </button>

Autre moyen de créer des bontons avec fonction de submit ou de reset.

Le texte placé entre <button> et </button> est affiché sur le bouton.

Son attribut spécifique est:

type="...."

"submit" ou "reset" (submit par défaut)

Par exemple,

Valeur: <input type="text" name="champ"  />
<br /><br />
<button type="submit" name="envoi">Envoyer</button>
<button type="reset" name="efface">Effacer</button>

affichera

Valeur:

Envoyer Effacer

<textarea name="...." rows="...." cols="....">...</textarea>

Cette balise permet d'afficher et de saisir un texte sur plusieurs lignes.

Ses attributs spécifiques sont:

rows="...."

hauteur en nombre de lignes

cols="...."

largeur en nombre de caractères

readonly="readonly"

indique que le champ ne peut être modifié, sauf par un script, mais il peut être sélectionné et copié

Par exemple,

<textarea name="montexte" rows="5" cols="25">Mon texte</textarea>

affichera

Mon texte

Sur cette page, la largeur du textarea est définie par le style CSS du site.

<option value="....">...</option>

Définit les éléments d'une liste déroulante.

Toutes les options d'une mme liste doivent être encapsulées dans une basile <select> .... </select>

Par exemple,

<select name="choix">
<option value="chat">chat</option>
<option value="chien">chien</option>
<option value="lapin" selected="selected">oie</option>
<option value="poule">poule</option>
<option value="vache">vache</option>
</select>

affichera

chat chien lapin poule vache

<select name="....">...</select>

Génère une liste déroulante définie par les balises <option> encapsulées.

Ses attributs spécifiques sont:

size="...."

hauteur en nombre de lignes, nombre d'options que l'on peut voir simultanément (1 par défaut).

multiple="multiple"

pour permettre de sélectionner plusieurs options (en cliquant tout en utilisant les touches "Ctrl" ou "Shift")

Par exemple,

<select name="choix" size="3" multiple="multiple">
<option value="chat">chat</option>
<option value="chien">chien</option>
<option value="lapin">lapin</option>
<option value="poule">poule</option>
<option value="vache">vache</option>
</select>

affichera

chat chien lapin poule vache