Types d'entrée
Ce chapitre décrit les types d'entrée de la <input> élément.
Type d'entrée: texte
<input type="text"> définit un champ d'entrée d' une ligne de saisie de texte:
Exemple
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
Prénom:
Nom de famille:
Type d'entrée: Mot de passe
<input type="password"> définit un champ de mot de passe:
Exemple
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
Nom d'utilisateur:
Mot de passe de l'utilisateur:
Les caractères dans un champ de mot de passe sont masqués (shown as asterisks or circles) des (shown as asterisks or circles) des (shown as asterisks or circles) .
Type d'entrée: soumettre
<input type="submit"> définit un bouton pour soumettre entrée de formulaire pour un formulaire de gestionnaire.
La forme gestionnaire est typiquement une page de serveur avec un script pour traiter des données d'entrée.
La forme gestionnaire est spécifiée dans l'attribut d'action de la forme:
Exemple
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form> Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
Prénom:
Nom de famille:
Si vous ne spécifiez pas l'attribut de valeur du bouton d'envoi, le bouton obtenir un texte par défaut:
Exemple
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form> Essayez vous - même » Type d'entrée: la radio
<input type="radio"> définit un radio de radio bouton.
Radio boutons permettent à un utilisateur de choisir seulement une d'un nombre limité de choix:
Exemple
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
Mâle
Femelle
Autre
Type d'entrée: checkbox à checkbox
<input type="checkbox"> définit une checkbox à checkbox .
Les Checkboxes à Checkboxes laisser un utilisateur de sélectionner zéro ou plusieurs options d'un nombre limité de choix.
Exemple
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
j'ai un vélo
j'ai une voiture
Type d'entrée: button
<input type="button"> définit un button :
Exemple
<input type="button" onclick="alert('Hello World!')" value="Click Me!"> Essayez vous - même » Voici comment au-dessus du code HTML sera affiché dans un navigateur:
HTML5 Input Types
HTML5 a ajouté plusieurs nouvelles input types:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input types, non pris en charge par les anciens navigateurs web, se comportent comme input de type texte.
Input Type: number
Le <input type="number"> est utilisé pour les champs d'entrée qui doivent contenir une valeur numérique.
Vous pouvez définir des restrictions sur le nombre.
Selon le support du navigateur, les restrictions peuvent s'appliquer à la zone de saisie.
Exemple
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> Essayez vous - même » Input Restrictions
Voici une liste de quelques communes d' input restrictions (some are new in HTML5) :
| Attribut | La description |
|---|---|
| disabled | Indique qu'un champ d'entrée doit être désactivée |
| max | Indique la valeur maximale pour une zone de saisie |
| >maxlength | Indique le nombre maximum de caractères pour un champ d'entrée |
| min | Indique la valeur minimale pour un champ d'entrée |
| pattern | Indique une expression régulière pour vérifier la valeur d'entrée contre |
| readonly | Indique qu'un champ d'entrée est en lecture seule (cannot be changed) |
| required | Indique qu'un champ d'entrée est nécessaire (must be filled out) |
| size | Spécifie la largeur (in characters) d'un champ d'entrée |
| step | Indique les intervalles de numéros légaux pour un champ d'entrée |
| value | Spécifie la valeur par défaut pour un champ d'entrée |
Vous en apprendrez plus sur input restrictions dans le chapitre suivant.
Exemple
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> Essayez vous - même » Input Type: date
Le <input type="date"> est utilisé pour les champs d'entrée qui devrait contenir une date.
Selon le support du navigateur, un sélecteur de date peut apparaître dans le champ de saisie.
Vous pouvez ajouter des restrictions à l' input :
Exemple
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> Essayez vous - même » Input Type: couleur
Le <input type="color"> est utilisé pour les champs d'entrée qui doivent contenir une couleur.
Selon le support du navigateur, un sélecteur de couleur peut apparaître dans le champ de saisie.
Exemple
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form> Essayez vous - même » Input Type: plage
Le <input type="range"> est utilisé pour les champs d'entrée qui devrait contenir une valeur dans une plage.
Selon le support du navigateur, le champ de saisie peut être affiché sous la forme d'un contrôle de curseur.
Vous pouvez utiliser les following attributs pour spécifier des restrictions: min, max, pas, valeur.
Input Type: month
Le <input type="month"> permet à l'utilisateur de sélectionner un mois et l' année.
Selon le support du navigateur, un sélecteur de date peut apparaître dans le champ de saisie.
Exemple
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form> Essayez vous - même » Input Type: week
Le <input type="week"> permet à l'utilisateur de sélectionner une semaine et l' année.
Selon le support du navigateur, un sélecteur de date peut apparaître dans le champ de saisie.
Input Type: time
Le <input type="time"> permet à l'utilisateur de sélectionner un temps (no time zone) de (no time zone) .
Selon le support du navigateur, un sélecteur de temps peut apparaître dans le champ de saisie.
Input Type: datetime
Le <input type="datetime"> permet à l'utilisateur de sélectionner une date et l' heure (with time zone) le (with time zone) .
Exemple
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form> Essayez vous - même »  | Le type d'entrée datetime est retiré de la norme HTML. Utilisez plutôt datetime-local. |
|---|
Type d'entrée: datetime locale
Le <input type="datetime-local"> permet à l'utilisateur de sélectionner une date et l' heure (no time zone) de (no time zone) .
Selon le support du navigateur, un sélecteur de date peut apparaître dans le champ de saisie.
Exemple
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> Essayez vous - même » Type d'entrée: e-mail
Le <input type="email"> est utilisé pour les champs d'entrée qui doit contenir une adresse e - mail.
Selon le support du navigateur, l'adresse e-mail peut être validé automatiquement soumis.
Certains smartphones reconnaissent le type de messagerie, et ajoute ".com" au clavier pour correspondre à l' entrée e - mail.
Type d'entrée: recherche
Le <input type="search"> est utilisé pour les champs de recherche (a search field behaves like a regular text field) .
Exemple
<form>
Search Google:
<input type="search" name="googlesearch">
</form> Essayez vous - même » Type d'entrée: tel
Le <input type="tel"> est utilisé pour les champs d'entrée qui doit contenir un numéro de téléphone.
Le type tel est actuellement pris en charge uniquement dans Safari 8.
Type d'entrée: URL
Le <input type="url"> est utilisé pour les champs d'entrée qui doit contenir une adresse URL.
Selon le support du navigateur, le champ URL peut être validé automatiquement soumis.
Certains smartphones reconnaissent le type d'URL, et ajoute ".com" au clavier pour correspondre à l' entrée URL.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 »