Introduction aux 8 nouveaux types d'entrée INPUT dans les compétences du didacticiel HTML5_html5

Exemples de code HTML de type d'entrée existant :

Copiez le code

Le code est le suivant :

Champ de texte<input type="text">
Bouton radio<input type="radio">
case à cocher<input type="checkbox">
Liste déroulante&lt ;select><option>
Champ de mot de passe<input type="password">
Bouton d'envoi<input type="submit">
Bouton cliquable<input type="button">
Bouton Image<input type="image">
Champ caché<input type="hidden">
Bouton Réinitialiser<input type="reset ">
Champ fichier<input type= "file">

En HTML5, plusieurs nouveaux types d'entrée de formulaire ont été ajoutés. En utilisant ces nouveaux éléments, vous pouvez activer un meilleur contrôle et une meilleure validation des entrées.
1. Application de type e-mail
L'élément de saisie de type e-mail est une zone de saisie de texte spécialement utilisée pour saisir une adresse e-mail Lors de la soumission du formulaire, la valeur de l'e-mail sera automatiquement vérifiée. de la boîte.

Copier le code

Le code est le suivant :

<input type=" email" nom ="user_email" />

2. Application du type d'url
L'élément d'entrée de type url fournit une zone de texte pour saisir un texte spécial tel que l'adresse url.

Copier le code

Le code est le suivant :

<input type=" url" nom ="user_url" />

3. Application du type numérique
L'élément de saisie de type numérique fournit une zone de texte pour saisir des valeurs numériques.

Copier le code

Le code est le suivant :

<input type=" numéro" nom ="numéro1" min="1" max="20" step="4" />

4. Application du type plage
L'élément d'entrée de type plage fournit une zone de texte pour saisir des valeurs numériques dans une certaine plage, qui est affichée sous forme de barre de défilement sur la page Web. .

Copier le code

Le code est le suivant :

<input type=" plage" nom ="range1" min="1" max="30" />

5. Application de type de paiement par date
Type de saisie Code HTML Description de la fonction

Copier le code

Le code est le suivant :

date <input type="date">

Sélectionnez le jour, le mois, l'année
mois < input type="month">
Sélectionnez le mois et l'année

Copier le code

Le code est le suivant :

semaine <input type="week">

Sélectionner la semaine et l'année

Copier le code

Le code est le suivant :

heure <input type="time">

Sélectionner l'heure ( heures et minutes)

Copier le code

Le code est le suivant :

datetime &lt ;input type="datetime">

Sélectionnez l'heure, le jour, le mois, l'année (heure UTC)

Copier le code

Code comme suit :

datetime-local
<input type="datetime-local"> heure)

6. Applications de type recherche

L'élément de saisie du type de recherche fournit une zone de texte pour saisir des mots-clés de recherche.

Copier le code

Le code est le suivant :

<input type="search" name="search1" />
input[type="search"]{
-webkit-apparance:textfield;
}

7. Application de type Tel
L'élément de saisie de type tel fournit une zone de texte spécifiquement pour saisir les numéros de téléphone.

Copier le code

Le code est le suivant :

<input type=" tel" nom ="tel" />

8. Application de type de couleur
L'élément de saisie de type de couleur fournit une zone de texte spécialement utilisée pour définir la couleur.

Copier le code

Le code est le suivant :

<input type=" couleur" nom ="couleur" />