简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel H5 > le corps du texte

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

寻∝梦
Libérer： 2018-08-13 19:00:09
original
5607 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

é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>
Copier après la connexion

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