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.

830562b40d5b6271a690037de53450e6

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

e1fb43a77b5e74803b685c4255c1844b zone de saisie

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

2e1cf0710519d5598b1f0f14c36ba674Définir une étiquette de contrôle

02609e582fd7962059acb31154de1a92Champ de définition

e911751791aa3ba95dc724e2fb905976Définir le titre du champ

221f08282418e2996498697df914ce4eDéfinir une liste de sélection

5b7a15bed8615d1b843806256bebea72Définir le groupe d'options

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

bb9345e55eb71822850ff156dfde57c8Dé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!