### 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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Couples nom / valeur</title> <link rel="stylesheet" href="styles/form02.css"> </head> <body> <form action="dossier/login.php" method="POST"> <fieldset> <legend>Authentification</legend> <div> <label for="zNom">Nom</label> <input type="text" id="zNom" name="txtNom"> </div> <div> <label for="zPasse">Mot de passe</label> <input type="password" id="zPasse" name="txtPasse"> </div> <div> <label for="zCon">Restez connecté</label> <input type="checkbox" id="zCon" name="chkCon"> </div> </fieldset> <fieldset> <input type="reset" value="Effacer" name="btnEffacer"> <input type="submit" value="S'authentifier" name="btnAuthentif"> </fieldset> </form> </body> </html>

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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Name et id avec la même valeur</title> <link rel="stylesheet" href="styles/form02.css"> </head> <body> <form action="dossier/login.php" method="POST"> <fieldset> <legend>Authentification</legend> <div> <label for="txtNom">Nom</label> <input type="text" id="txtNom" name="txtNom"> </div> <div> <label for="txtPasse">Mot de passe</label> <input type="password" id="txtPasse" name="txtPasse"> </div> <div> <label for="chkCon">Restez connecté</label> <input type="checkbox" id="chkCon" name="chkCon"> </div> </fieldset> <fieldset> <input type="reset" value="Effacer" name="btnEffacer"> <input type="submit" value="S'authentifier" name="btnAuthentif"> </fieldset> </form> </body> </html>

#### 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">` |  |  |  |  |  | X | X | X |  |  |  |  |  |  | X |  |  | X |  |  |  |  |  | X
`<input type="checkbox">` |  |  |  |  | X | X | X | X |  |  |  |  |  |  | X |  |  | X | X |  |  |  |  | X
`<input type="color">` |  |  | X |  |  | X | X | X |  | X |  |  |  |  | X |  |  | X |  |  |  |  |  | X
`<input type="date">` |  |  | X | X |  | X | X | X |  | X | X |  | X |  | X |  |  | X | X |  |  |  | X | X
`<input type="datetime">` |  |  | X | X |  | X | X | X |  | X | X |  | X |  | X |  |  | X | X |  |  |  | X | X
`type="datetime-local"` |  |  | X | X |  | X | X | X |  | X | X |  | X |  | X |  |  | X | X |  |  |  | X | X
`<input type="email">` |  |  | X | X |  | X | X | X |  | X |  | X |  | X | X | X | X | X | X |  | X |  |  | X
`<input type="file">` | X |  |  |  |  | X | X | X |  |  |  |  |  | X | X |  |  | X | X |  |  |  |  | X
`<input type="hidden">` |  |  |  |  |  | X | X | X |  |  |  |  |  |  | X |  |  | X |  |  |  |  |  | X
`<input type="image">` |  | X |  |  |  | X | X | X | X |  |  |  |  |  | X |  |  | X |  |  |  | X |  |
`<input type="month">` |  |  | X | X |  | X | X | X |  | X | X |  | X |  | X |  |  | X | X |  |  |  | X | X
`<input type="number">` |  |  | X | X |  | X | X | X |  | X | X |  | X |  | X |  |  | X | X |  |  |  | X | X
`<input type="password">` |  |  | X | X |  | X | X | X |  |  |  | X |  |  | X | X | X | X | X |  | X |  |  | X
`<input type="radio">` |  |  |  |  | X | X | X | X |  |  |  |  |  |  | X |  |  | X | X |  |  |  |  | X
`<input type="range">` |  |  | X |  |  | X | X | X |  | X | X |  | X |  | X |  |  | X | X |  |  |  | X | X
`<input type="reset">` |  |  |  |  |  | X | X | X |  |  |  |  |  |  | X |  |  | X |  |  |  |  |  | X
`<input type="search">` |  |  | X | X |  | X | X | X |  | X |  | X |  |  | X | X | X | X | X |  | X |  |  | X
`<input type="submit">` |  |  |  |  |  | X | X | X |  |  |  |  |  |  | X |  |  | X |  |  |  |  |  | X
`<input type="tel">` |  |  | X | X |  | X | X | X |  | X |  | X |  |  | X | X | X | X | X |  | X |  |  | X
`<input type="text">` |  |  | X | X |  | X | X | X |  | X |  | X |  |  | X | X | X | X | X |  | X |  |  | X
`<input type="time">` |  |  | X | X |  | X | X | X |  | X | X |  | X |  | X |  |  | X | X |  |  |  | X | X
`<input type="url">` |  |  | X | X |  | X | X | X |  | X |  | X |  |  | X | X | X | X | X |  | X |  |  | X
`<input type="week">` |  |  | X | X |  | X | X | X |  | X | X |  | X | X | X |  |  | X | X |  |  |  |  | X
`<select></select>` |  |  |  | X |  | X | X | X |  |  |  |  |  | X | X |  |  | X |  |  | X |  |  |
`<option></option>` |  |  |  |  |  |  | X |  |  |  |  |  |  |  |  |  |  |  |  | X |  |  |  | X
`<textarea></textarea>` |  |  | X | X |  | X | X | X |  |  |  |  |  |  | X |  | X | X |  |  |  |  |  |