interface Web
Tutoriel H5
Quels sont les nouveaux éléments de formulaire couramment utilisés en HTML5 ? Exemples d'utilisation ci-joints
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.