Quels sont les nouveaux éléments de formulaire couramment utilisés en HTML5 ? Exemples d'utilisation ci-joints

HTML5 devient de plus en plus populaire maintenant. De nombreuses personnes souhaitent apprendre le HTML5, mais HTML5 contient plus de nouveaux éléments de formulaire que l'ancienne version. Jetons maintenant un coup d'œil aux nouveaux éléments de formulaire. Quels sont les nouveaux éléments de formulaire couramment utilisés en HTML5 ? Comment sont-ils utilisés ?

Ce chapitre présente les nouveaux éléments de formulaire suivants : datalist ; keygen ; output

élément datalist :

élément datalist spécifie input Une liste d'options pour le domaine.

Les listes sont créées via des éléments d'option dans datalist.

Si vous devez lier la liste de données au champ de saisie, veuillez utiliser l'attribut list du champ de saisie pour référencer l'identifiant de la liste de données :

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="php中文网" value="http://www.php.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

Conseil : l'élément option doit définissez toujours l'attribut value.

élément keygen : le but de l'élément

keygen est de fournir un moyen fiable d'authentifier l'utilisateur.

L'élément keygen est un générateur de paires de clés. Lorsque le formulaire est soumis, deux clés sont générées, une clé privée et une clé publique.

La clé privée est stockée sur le client et la clé publique est envoyée au serveur. La clé publique peut être utilisée ultérieurement pour vérifier le certificat client de l'utilisateur.

Actuellement, la prise en charge par les navigateurs de cet élément est suffisamment médiocre pour en faire une norme de sécurité utile.

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

élément de sortie :

L'élément de sortie est utilisé pour différents types de sortie, tels que la sortie de calcul ou de script :

<output id="result" onforminput="resCalc()"></output>

Types d'entrée :

HTML5 propose plusieurs nouveaux types d'entrée de formulaire. Ces nouvelles fonctionnalités offrent un meilleur contrôle et une meilleure validation des entrées.

1.Type de saisie - email

Le type d'e-mail est utilisé pour les champs de saisie qui doivent contenir des adresses e-mail. Lors de la soumission du formulaire, la valeur du champ email est automatiquement vérifiée.

2.Type d'entrée - url

le type d'url est utilisé pour les champs de saisie qui doivent contenir des adresses URL. Lors de la soumission du formulaire, la valeur du champ URL est automatiquement vérifiée.

3.Type de saisie - nombre

Le type de nombre est utilisé pour les champs de saisie qui doivent contenir des valeurs numériques. Vous pouvez également définir des limites sur les nombres acceptés :

4.Type d'entrée - plage

Le type de plage est utilisé pour les champs de saisie qui doivent contenir des valeurs numériques dans une certaine plage.

Le type de plage est affiché sous forme de curseur.

Vous pouvez également définir des limites sur les nombres acceptés :

5. Type d'entrée - Sélecteurs de dates

HTML5 propose de nombreux nouveaux types d'entrée pour sélectionner les dates et les heures :

date - sélectionnez le jour, le mois, l'année

mois - sélectionnez le mois, l'année

semaine - sélectionnez la semaine et l'année

heure - sélectionnez time (heures et minutes)

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

datetime-local - Sélectionnez l'heure, le jour, le mois, l'année (heure locale)

6.Type d'entrée - recherche

le type de recherche est utilisé pour les champs de recherche, tels que la recherche sur site ou la recherche Google.

Le champ de recherche apparaît comme un champ de texte normal.

Définir un formulaire pour la saisie de l'utilisateur

zone de saisie

Définir une zone de texte (un contrôle de saisie multiligne)

Définir une étiquette de contrôle

Champ de définition

Définir le titre du champ

Définir une liste de sélection

Définir le groupe d'options

< ; option>Définir les options dans la liste déroulante

Définir un bouton

[Articles associés]

L'historique du développement du HTML et du HTML5

Éléments de base du HTML, vous permettant d'apprendre le HTML à partir de zéro

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!