Exemple d'analyse de nouveaux éléments et attributs de formulaire dans les compétences du didacticiel HTML5_html5

Cet article utilise un exemple de code pour démontrer les nouveaux éléments et attributs de formulaire HTML5. Le code de démonstration comprend des attributs d'espace réservé, des attributs de mise au point automatique, des éléments de liste et de liste de données, une zone de texte de type de recherche, une zone de texte de type e-mail, une zone de texte de type numérique et une plage. tapez la zone de texte, la zone de texte de type tel, la zone de texte de type url, ainsi que les éléments de saisie de type date, heure, etc.
L'exemple de code est le suivant :

Copier le code

Le code est le suivant :

< section>

Guide de développement Web mobile HTML5

< ;Nouvel élément HTML5 - élément de formulaire

 attribut d'espace réservé : <br> Généralement utilisé dans les zones de texte <br> Sa fonction principale est Lorsque le texte La zone de texte est dans un état de non-saisie et le contenu est vide, le contenu de l'invite pour la zone de texte <br> Effet : <br> Lorsque la zone de texte obtient le focus, les informations d'invite sont automatiquement effacées. Lorsque la zone de texte perd le focus et aucun contenu. est saisie, les informations d'invite sont automatiquement effacées à nouveau <br> Éliminant le besoin de zones de texte traditionnelles qui nécessitent l'aide des événements onfocel et onblur <br> (Compatible avec la plupart des navigateurs PC et navigateurs mobiles, on peut seulement dire que cela. la technologie a effectivement progressé) <br> Exemple : &lt ;input type="text" placeholder="Je suis un espace réservé, utilisé comme rappel"><br> 

< ;pre> attribut autofocus :
Le contrôle spécifié obtient automatiquement le focus. Il est à noter qu'il ne peut y avoir qu'un seul contrôle sur une page HTML avec l'attribut modifié
Exemple : ;

 éléments de liste et de liste de données : <br> La fonction principale de l'élément de liste est d'inviter la saisie de la zone de texte, et la source de données de l'invite est fournie par datalist <br> Actuellement, la liste et la liste de données les éléments ne sont pris en charge que par le navigateur Opera, et aucun navigateur mobile ne prend même en charge cette fonctionnalité <br> Exemple : <input type="text" placeholder="J'ai ajouté l'attribut list et l'élément datalist, mais peu de gens me comprennent" list ="myDataList"><br> <datalist id="myDataList"><br> <option label="1">Je suis datalist1</option><br> <option label="2" >Je suis datalist2</option><br> <option label="3"> Je suis datalist3</option><br> <option label="4">Je suis datalist4</option><br> </datalist><br> 

 pour rechercher des mots-clés<br> La seule différence entre cette zone de texte et une zone de texte ordinaire est qu'elle est parcourue dans Safari et Chrome Sous le navigateur, l'apparence de la zone de texte est arrondie <br> Exemple : <input type= "search" placeholder="Je suis une zone de texte de type recherche"><br> 

 Zone de texte de type d'e-mail : <br> est une zone de texte qui peut spécifier le contenu d'un e-mail. Elle est généralement utilisée dans la zone de texte de saisie pour saisir une adresse e-mail. zone de texte Elle ressemble presque à une zone de texte ordinaire, mais elle est en fait différente sous le navigateur mobile Safari <br> Le clavier affichera le clavier correspondant en fonction du type de zone de texte <br> Exemple : <input type = "email" placeholder="Je suis une zone de texte de type e-mail"><br> 

 : <br> est un type de zone de texte utilisé pour saisir des nombres <br> Il peut être utilisé avec les attributs min, max et step <br> Exemple : <input type="number" value="0" min=" 0 " max="10" step="1"><br> 

 zone de texte de type de plage :<br> Il s'agit d'un type de zone de texte de saisie de plage numérique qui fournit une méthode de saisie coulissante <br> Il doit être utilisé avec min, max, range et d'autres attributs <br> Exemple : <input type="range" value=" 1 " min="0" max="100" step="1"><br> 

 tel Type zone de texte : <br> est un type de zone de texte permettant aux utilisateurs de saisir des numéros de téléphone <br> Dans les navigateurs mobiles, le clavier de cette zone de texte affichera le clavier correspondant en fonction du type de zone de texte <br> Exemple : < input type="tel" placeholder="Je suis une zone de texte de type tel"><br> 

< tapez la zone de texte :
est un type de zone de texte permettant aux utilisateurs de saisir l'adresse URL
Dans les navigateurs mobiles, le clavier de cette zone de texte affichera le clavier correspondant en fonction du type de zone de texte
Exemple :

mais ces types ne sont pas largement pris en charge <br /> Les détails sont les suivants : <br /> Date et heure (y compris le fuseau horaire ): <br /> <input type="datetime"><br> Date et heure (hors fuseau horaire) : <br> <input type="datetime-local"><br> Zone de texte du sélecteur de sélection d'heure : <br> <input type="time"><br> Zone de texte du sélecteur de date : <br> <input type="date"><br> Zone de texte du sélecteur de numéro de semaine pour l'année :<br> &lt ;input type="week"><br> Zone de texte du sélecteur de mois : <br> <input type="month"><br>

< ;/article>

Nouvel élément HTML5 - élément de formulaire