Aide-mémoire sur les types d'entrée

 Button
Il s'agit d'un bouton cliquable, principalement utilisé dans les formulaires HTML pour
activer un script lorsqu'on clique dessus. <input type="button" value="Click
me" onclick="msg()" />

N'oubliez pas que vous pouvez également définir des boutons à l'aide de la balise
<button>, avec l'avantage supplémentaire de pouvoir placer du contenu tel que du texte
ou des images à l'intérieur de la balise.

<button onclick="alert('Are you sure you want to continue?')">

<img src="https://yourserver.com/button_img.jpg"
alt="Submit the form" height="64" width="64">
</button>

 Case à cocher
Définit une case à cocher permettant de sélectionner ou de désélectionner des valeurs
individuelles. Elles sont utilisées pour permettre à l'utilisateur de sélectionner une ou
plusieurs options parmi un nombre limité de choix.

<input type="checkbox" id="dog" name="dog" value="Dog">

<label for="dog">I like dogs</label>
<input type="checkbox" id="cat" name="cat" value="Cat">
<label for="cat">I like cats</label>

 Bouton radio
Affiche un bouton radio permettant de sélectionner une seule valeur parmi plusieurs
choix. Ils sont normalement présentés dans des groupes de boutons radio, c'est-à-dire une
collection de boutons radio décrivant un ensemble d'options liées qui partagent le même
attribut "name".

<input type="radio" id="light" name="theme" value="Light">

<label for="light">Light</label>
<input type="radio" id="dark" name="theme" value="Dark">
<label for="dark">Dark</label>
  Soumettre
Affiche un bouton d'envoi pour soumettre toutes les valeurs d'un formulaire HTML à un
gestionnaire de formulaires, généralement un serveur. Le gestionnaire de formulaires est
spécifié dans l'attribut "action" du formulaire :

<form action="myserver.com" method="POST">

…
<input type="submit" value="Submit" />
</form>

 Texte
Définit un champ de texte de base d'une seule ligne dans lequel l'utilisateur peut saisir du
texte.

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname">

 Mot de passe
Définit un champ de texte d'une ligne dont la valeur est masquée, adapté aux
informations sensibles telles que les mots de passe.
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">

 Date
Affiche une commande permettant de saisir une date sans heure (année, mois et jour).
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="date of birth">

 Date time-local
Définit un contrôle permettant de saisir une date et une heure, y compris l'année, le mois
et le jour, ainsi que l'heure en heures et minutes.
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">

Courriel/Mail
Définit un champ pour une adresse électronique. Il est similaire à une entrée de texte
simple, avec l'ajout d'une validation automatique lorsqu'il est soumis au serveur.
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
  Fichier
Affiche un contrôle qui permet à l'utilisateur de sélectionner et de télécharger un fichier
depuis son ordinateur. Pour définir les types de fichiers autorisés, vous pouvez utiliser
l'attribut "accept". De même, pour permettre la sélection de plusieurs fichiers, ajoutez
l'attribut "multiple".
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">

 Caché
Définit un contrôle qui n'est pas affiché mais dont la valeur est tout de même soumise au
serveur.
<input type="hidden" id="custId" name="custId" value="3487">

 Image
Définit une image comme bouton de soumission graphique. Vous devez utiliser l'attribut
"src" pour indiquer l'emplacement de votre fichier image.
<input type="image"src="submit_img.png" alt="Submit" width="48" height="48">

 Nombre
Définit un contrôle pour la saisie d'un nombre. Vous pouvez utiliser des attributs pour
spécifier des restrictions, telles que les valeurs minimales et maximales autorisées, des
intervalles de chiffres ou une valeur par défaut.
<input type="number" id="quantity" name="quantity" min="1" max="5">

 Plage
Affiche un widget de plage permettant de spécifier un nombre entre deux valeurs. La
valeur précise n'est toutefois pas considérée comme importante. Elle est généralement
représentée à l'aide d'un curseur ou d'un cadran. Pour définir la plage de valeurs
acceptables, utilisez les propriétés "min" et "max".
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="10">

 Réinitialiser
Affiche un bouton qui rétablit les valeurs par défaut du contenu du formulaire.
<input type="reset">
  Recherche
Définit un champ de texte pour la saisie d'une requête de recherche. Ces champs sont
fonctionnellement identiques aux entrées de texte, mais peuvent être stylisés
différemment selon le navigateur.

<label for="gsearch">Search in Google:</label>

<input type="search" id="gsearch" name="gsearch">

 Heure
Affiche une commande permettant de saisir une valeur temporelle en heures et minutes,
sans fuseau horaire.
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">

 Tél
Définit un contrôle pour la saisie d'un numéro de téléphone. Les navigateurs qui ne
prennent pas en charge "tel" reviennent à la saisie de texte standard. Vous pouvez
éventuellement utiliser le champ "pattern" pour effectuer une validation.
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[+]{1}[0-9]{11,14}">

 Url
Affiche un champ pour la saisie d'un texte URL. Son fonctionnement est similaire à celui
d'une entrée de texte, mais il effectue une validation automatique avant d'être soumis au
serveur.
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">

 Semaine
Définit un contrôle permettant de saisir une date composée d'un numéro de semaine et
d'une année, sans fuseau horaire. N'oubliez pas qu'il s'agit d'un type de date plus récent
qui n'est pas pris en charge par tous les navigateurs.
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">

 Mois
Affiche un contrôle permettant de saisir le mois et l'année, sans fuseau horaire. N'oubliez
pas qu'il s'agit d'un type plus récent qui n'est pas pris en charge par tous les navigateurs.
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth" min="1930-01" value="2000-
01">