Le couple name / value

L'attribut name

Le contenu du formulaire est envoyé au serveur Web pour traitement sous la forme de couples nom=valeur.
Les différents couples sont séparés par le caractère &.

Pour que l'envoi d'une zone de saisie soit réalisé, il est obligatoire que celle-ci ait un attribut name.

La valeur de l'attribut name se retrouvera sur le serveur, dans le programme de traitement du formulaire, comme nom de variable ou nom d'indice dans un tableau associatif. Cette forme de récupération sur le serveur entraîne 2 conséquences :

  • il convient de nommer les zones avec un nom valide pour le langage qui traitera le formulaire sur le serveur,
  • le nom d'une zone de saisie doit être unique dans le formulaire, sinon des valeurs seront perdues car la variable résultante sur le serveur ne peut avoir qu'une seule valeur.

Pour le nommage des zones de saisie, je vous conseille de :

  • jamais utiliser d'espaces,
  • utiliser uniquement les caractères aplhabétiques non accentués (de a à z), des chiffres (de 0 à 9) et le caractère _

Pour préparer et faciliter l'écriture du code du programme sur le serveur, je vous conseille aussi de nommer les zones de saisie de façon à ce que les variables récupérées soient facilement repérables et identifiables.
Un moyen simple est de préfixer le nom de la zone pour indiquer quel est son type.

Type de zone Préfixe Exemple
Texte txt <input type="text" name="txtNom">
<input type="password" name="txtPasse">
<textarea name="txtComment"></textarea>
Case à cocher chk <input type="checkbox" name="chkAccepter">
Bouton radio rad <input type="radio" name="radGenre">
Boutons btn <input type="submit" name="btnEnvoyer">
<input type="reset" name="btnEffacer">
<input type="button" name="btnFaire">
Liste sel <select name="slcPersonnages">
Dates dat <input type="date" name="datNaissance">
<input type="month" name="datMois">

La forme de l'envoi est la même pour les méthodes GET et POST. Elle est directement visible pour la méthode GET puisque les couples sont envoyés dans l'URL.

exemple d'URL de Google

Quand vous testez un exemple de code avec un formulaire dans cette partie du tutoriel, et que vous cliquez sur le bouton de soumission, vous obtenez en résulat un message composé des couples nom / valeur qui seraient envoyés au serveur.

Exemple : couples nom / valeur

Les attributs name et id sont différents et ne peuvent pas être substitués .
L'attribut name est vraiment spécifique au dialogue client/serveur (HTTP) et sera "transporté" du client au serveur.
L'attribut id est spécifique au client et permet principalement d'attacher des règles de style CSS à un élément HTML ou d'atteindre un élément HTML avec JavaScript.
Les 2 attributs peuvent avoir la même valeur pour identifier un élément.

Exemple : name et id avec la même valeur

L'attribut value

L'attribut value contient ce qui sera envoyé au serveur comme valeur associée au nom de la zone de saisie.

Pour certains types de zones, l'attribut value peut être absent. Si c'est le cas, il sera automatiquement créé par le navigateur avec comme valeur initiale une chaîne vide ou "on", "off", 0 ou 1. C'est le cas pour toutes les zones faite avec l'élément input

A noter que la valeur de l'attribut value est utilisée comme libellé du bouton pour les boutons faits avec <input type="submit">, <input type="reset"> et <input type="button">.
Si l'attribut est absent de l'élément, le navigateur affichera un libellé par défaut (pas le même pour tous les navigateurs).

Pour certains types de zones, l'attribut value devrait absolument être présent dans l'élement et la valeur initialisée dans le code HTML plutôt que laissée à l'initiative du navigateur :

  • cases à cocher (<input type="checkbox">)
  • boutons radio (<input type="radio">)
  • listes (éléments option dans l'élément select

Pour d'autres types de zones, l'attribut value ne peut pas être initialisé :

  • zone de saisie multi-lignes (textarea)
  • zone de sélection de fichier (<input type="file">)
  • zone image (<input type="image">)

De la même façon que l'initialisation de l'attribut value peut prendre différentes formes, la valeur finale de l'attribut pourra provenir de plusieurs sources :

  • la saisie directe de l'utilisateur (zone de texte par exemple),
  • un choix dans une liste prédéfinie (bouton radio, liste),
  • une boîte de dialogue système (fichier) ou gérée par le navigateur (date, intervalle)

Tous les attributs

Nom Utilité Types d'<input> Autres balises
accept Types MIME acceptés. file  
alt Alternative textuelle à l'image. image  
autocomplete Autocomplétion. Les saisies précédemment faites dans la zone sont proposées. Attribut booléen. color, date, datetime, datetime-local, email, month, number, password, range, tel, search, text, time, url, week <textarea>
autofocus 1er élément activé dans le formulaire. Attribut booléen. date, datetime, datetime-local, email, month, number, password, tel, search, text, time, url, week <button>, <keygen>, <select>, <textarea>
checked Etat par défaut (coché ou non). Attribut booléen. checkbox, radio  
cols Nombre de caractères en largeur.   textarea
dirname Direction du texte saisi ou affiché. Tous Toutes
disabled Zone désactivée, non transmise au serveur. Aucune interaction n'est possible avec la zone (pas de focus, pas de copie, etc). Attribut booléen. Tous Toutes
form id du formulaire associé si la zone n'est pas un élément form ou concerne un autre formulaire que celui dans lequel elle est imbriquée. Tous Toutes
height Hauteur de l'image. image  
high Valeur maximale.   <meter>
list id de la liste de suggestions associée à la zone. color, date, datetime, datetime-local, email, month, number, password, range, tel, search, text, time, url, week  
low Valeur minimale.   <meter>
max Valeur maximale. date, datetime, datetime-local, month, number, range, time, week <meter>, <progress>
maxlength Nombre maximal de caractères pouvant être saisis. email, password, tel, search, text, url <textarea>
min Valeur minimale. date, datetime, datetime-local, month, number, range, time, week <meter>, <progress>
multiple Valeurs multiples possibles. Attribut booléen. email, file, <select>
name Nom de la zone. Tous Toutes
optimum Valeur optimale.   <meter>
pattern Expression régulière à laquelle doit correspondre la valeur de la zone. Permet de vérifier la saisie. Des centaines d'expressions régulières. email, password, tel, search, text, url  
placeholder Texte d'aide, d'indication de saisie. email, password, tel, search, text, url <textarea>
readonly Zone en lecture seule, transmise au serveur. La zone peut avoir le focus et le contenu peut être copié. Attribut booléen. Tous Toutes
required Zone obligatoire. Attribut booléen. checkbox, date, datetime, datetime-local, file, email, month, number, password, radio, range, tel, search, text, time, url, week <textarea>
rows Nombre de lignes affichées.   <textarea>
selected Ligne sélectionnée par défaut dans une liste.   <option>
size Nombre de caractères visibles directement, ou nombre lignes affichées. email, password, tel, search, text, url <progress>
src URL de l'image. image  
step Valeur du pas d'incrément/décrément. date, datetime, datetime-local, month, range, time <meter>, <progress>
value Valeur initiale de la zone et valeur transmise au serveur après saisie. Tous <meter>, <progress>, <option>
width Largeur de l'image. image  

Les zones et leurs attributs

Type de zone de saisie
accept
alt
autocomplete
autofocus
checked
dirname
disabled
form
height
list
max
maxlength
min
multiple
name
pattern
placeholder
readonly
required
selected
size
src
step
value
<input type="button">      XXX      X    X     X
<input type="checkbox">     XXXX      X    XX    X
<input type="color">   X  XXX X    X    X     X
<input type="date">   XX XXX XX X X    XX   XX
<input type="datetime">   XX XXX XX X X    XX   XX
type="datetime-local"   XX XXX XX X X    XX   XX
<input type="email">   XX XXX X X XX X XXX X  X
<input type="file"> X    XXX     XX    XX    X
<input type="hidden">      XXX      X    X     X
<input type="image">  X   XXXX     X    X   X  
<input type="month">   XX XXX XX X X    XX   XX
<input type="number">   XX XXX XX X X    XX   XX
<input type="password">   XX XXX   X  X X XXX X  X
<input type="radio">     XXXX      X    XX    X
<input type="range">   X  XXX XX X X    XX   XX
<input type="reset">      XXX      X    X     X
<input type="search">   XX XXX X X  X X XXX X  X
<input type="submit">      XXX      X    X     X
<input type="tel">   XX XXX X X  X X XXX X  X
<input type="text">   XX XXX X X  X X XXX X  X
<input type="time">   XX XXX XX X X    XX   XX
<input type="url">   XX XXX X X  X X XXX X  X
<input type="week">   XX XXX XX XXX    XX    X
<select></select>    X XXX     XX    X  X   
<option></option>       X              X   X
<textarea></textarea>   XX XXX      X   XX