Nouveaux éléments de formulaire HTML5
Nouveaux éléments de formulaire HTML5
Permettez-moi d'abord de parler de ce qui est nouveau :
HTML5 comporte les nouveaux éléments de formulaire suivants :
< datalist>
<keygen>
<output>
Remarque : tous les navigateurs ne prennent pas en charge les nouveaux éléments de formulaire HTML5, mais vous pouvez les utiliser, même si le navigateur ne prend pas en charge les attributs de formulaire, il peut toujours être affiché comme un élément de formulaire standard.
Ensuite, nous présenterons un par un :
Éléments HTML5 <datalist>
<datalist> Une liste d'options pour le domaine d'entrée. L'attribut
<datalist> spécifie que le formulaire ou le champ de saisie doit avoir une fonctionnalité de saisie semi-automatique. Lorsque l'utilisateur commence à saisir un champ de saisie semi-automatique, le navigateur doit afficher les options renseignées dans ce champ :
Liez l'élément <datalist> à l'aide de l'attribut list de l'élément <input> >
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo-form.php" method="get"> <input list="phone" name="phone"> <datalist id="phone"> <option value="huawei"> <option value="oppo"> <option value="vivo"> <option value="iphone"> <option value="sony"> </datalist> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p> </body> </html>
Élément HTML5 <keygen> Le rôle de l'élément
<keygen> La balise <keygen> spécifie le champ générateur de paire de clés à utiliser dans le formulaire. Lorsque le formulaire est soumis, deux clés seront générées, l'une est la clé privée et l'autre est la 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.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo_keygen.php" method="get"> 用户名: <input type="text" name="usr_name"> 加密: <keygen name="security"> <input type="submit"> </form> <p><strong>注意:</strong> Internet Explorer 不支持 keygen 标签。</p> </body> </html>
La description de la valeur de l'attribut
La mise au point automatique désactivée fait que le champ keygen se concentre lorsque la page est chargée.
Challenge Challenge S'il est utilisé, définissez la valeur du keygen à demander lors de la soumission. .
name Fieldname définit le seul nom de l'élément keygen.
L'attribut name est utilisé pour collecter la valeur du champ lors de la soumission du formulaire.
L'élément HTML5 <output>
<output> est utilisé pour différents types de sortie, tels que des calculs ou une sortie de script : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<p><strong>注意:</strong> Internet Explorer 不支持 output 标签。</p>
</body>
</html>
new : Nouvel attribut en HTML5. Attribut Un ou plusieurs éléments liés au domaine.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
