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
Bouton radio
case à cocher
Liste déroulante< ;select>
Champ de mot de passe
Bouton d'envoi
Bouton cliquable
Bouton Image
Champ caché
Bouton Réinitialiser
Champ fichier

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 :

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 :

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 :

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 :

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

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

Sélectionner la semaine et l'année

Copier le code

Le code est le suivant :

heure

Sélectionner l'heure ( heures et minutes)

Copier le code

Le code est le suivant :

datetime < ;input type="datetime">

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

Copier le code

Code comme suit :

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"]{
-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 :

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 :