En fait, les caractéristiques de forme de HTML5 ont été introduites dans les fonctionnalités, conseils et techniques HTML5 de l'article 28 que vous devez connaître l'année dernière. Cependant, il est un peu regrettable que l'introduction de cette partie soit affichée sous la forme d'une vidéo. En fait, c'est bien s'il s'agit d'une vidéo. La clé est la vidéo toutube, qui doit être jailbreakée pour regarder. Eh bien, un bon citoyen comme moi qui est juste une personne scrupuleuse est trop paresseux pour être dupe dans d'autres situations, à l'exception de l'agent de bord, donc le contenu affiché dans cette partie de la vidéo est en fait vide.
Voici donc un patch pour améliorer cette partie du contenu. Le contenu général de cet article est:
# <Type d'entrée = numéro />
# <Type d'entrée = plage />
# <Type d'entrée = date /> et d'autres commandes de sélecteur de temps
# <Type d'entrée = Couleur /> Sélecteur de couleurs
# <Type d'entrée = search />
# <datalist> élément et attribut d'élément
# La relation ambiguë entre la vérification du formulaire HTML5 et CSS3
L'élément de formulaire HTML avec Type = Number vous permet de modifier la valeur dans la zone de texte en appuyant sur une touche. Cet effet est souvent observé dans les systèmes Windows, tels que:
Les paresseux préfèrent se coucher sur une chaise et cliquer sur la souris que de s'asseoir et d'appuyer sur le clavier. Par conséquent, par rapport à l'entrée du clavier, il existe également un marché de clic et de saisie. C'est pourquoi il existe des contrôles de sélection numérique dans les formes HTML5.
Le code HTML approximatif est le suivant:
Nombre de personnes: <Type d'entrée = valeur de nombre = 1 />
Si vous ajoutez une limite de largeur appropriée pour les points, l'effet dans Chrome (l'interface utilisateur estimée est liée aux thèmes du système) est la suivante:
Le navigateur qui est actuellement pris en charge est Opera 11, mais les boutons qui ajoutent et soustrayaient les valeurs sous l'opéra semblent un peu tordu et ont un style abstrait.
Vous pouvez cliquer ici dur: HTML5 Form Nubmer Control Demo
2. Type = plageGamme chinoise Signification de la plage de valeur, et ce type d'effet est également courant dans le système de fenêtre, comme indiqué dans la capture d'écran suivante:
Il existe un contrôle des entrées avec des effets similaires dans HTML5. Définissez simplement son type comme une plage, si facile!
Glisser la plage: <Type d'entrée = valeur de plage = 50 />
Par défaut, la plage de valeur est de 0 à 100, donc si la valeur = 50, la barre de traînée est au milieu de la plage de zone. Comme indiqué dans la figure ci-dessous:
Mon Firefox est actuellement la version 3.6 et cette fonctionnalité n'est pas encore prise en charge. Cependant, Chrome, Opera et Safari 4 ont tous des effets, mais ils ne sont pas le même père après tout, il y a donc quelques différences d'apparence, donc ces différences ne seront pas montrées ici.
Vous pouvez cliquer ici dur: démo de contrôle de la plage de formulaire de formulaire HTML5
Le dernier élément des 28 fonctionnalités, astuces et techniques HTML5 mentionnées au début, c'est-à-dire l'exemple d'effet superbe du 28e élément est l'effet implémenté sur le contrôle de la plage, qui implique également les attributs MIN, MAX et les attributs de pas. C'est un exemple qui vaut la peine d'observer et d'apprendre. En ce qui concerne cet exemple de démo, vous pouvez cliquer ici durement.
3. Type = date et autres commandes de tempsC'est le contrôle du sélecteur de temps. Si vous choisissez longtemps, ne vous embêtez pas avec un plug-in JS. Avoir un attribut de date, puis vous pouvez communiquer avec la vieille dame qui a balayé le sol à côté de vous pendant le café. Si vous ne le croyez pas, regardez:
Sélectionner la date: <Type d'entrée = valeur de date = 2011-01-04 />
En conséquence, sous les navigateurs pris en charge, tels que l'opéra, les effets suivants sont disponibles:
C'est un sélecteur de temps qui n'est pas vivant!
Mis à part son apparence laide, les autres sont très délicieuses.
Espace de classe dans le temps, non seulement type de date, mais aussi type de temps, mais aussi Datetime, semaine et mois.
De toute évidence, comme son nom l'indique, le type de date est de sélectionner la date, le type d'heure consiste à sélectionner l'heure, le DateTime est de sélectionner la date et l'heure, et la semaine est de sélectionner la semaine, et le mois se rend compte de sélectionner le mois.
Vous pouvez cliquer ici dur: HTML5 Form Form Time Class Space Demo
Je l'ai testé et je viens de mettre à niveau Safari vers la version 5.0. J'ai trouvé qu'à l'heure actuelle, le navigateur d'opéra prend en charge ce type de contrôle du temps. Les effets sont les suivants:
Lorsque type = temps, l'effet est quelque peu similaire à type = nombre. Vous pouvez changer d'événements en cliquant. Par défaut, chaque point est une fois, le temps est commuté pendant 1 minute, et la souris est longue et la souris est également valide.
Sélectionnez l'heure: <Type d'entrée = valeur de temps = 22: 52 />
Sélectionner l'heure:
Sous type = semaine, lorsque la souris passe, la couleur d'arrière-plan de la date de chaque ligne (représente une semaine) deviendra plus sombre collectivement, comme le montre la figure ci-dessous:
Lorsque le type = mois, la couleur d'arrière-plan de tout le mois devient plus sombre, comme le montre la figure ci-dessous:
Les valeurs de données après avoir sélectionné les deux sont les suivantes:
4. type = couleurIl s'agit d'un contrôle de sélecteur de couleurs, qui est assez puissant. Il est très simple à utiliser, comme suit:
Sélectionnez Couleur: <Type d'entrée = Valeur de couleur = # 34538B />
L'effet par défaut dans le navigateur d'opéra est le suivant:
Le contrôle d'entrée par défaut a un fond de couleur ronde avec # 34538B. Nous cliquons pour se dérouler et le résultat est, effacer et développer le panneau de couleur Web:
Cliquez sur le bouton ci-dessous avec d'autres mots, et par conséquent, le magnifique panneau de sélection de couleurs a été élargi:
C'est cool, c'est très facile à utiliser, oh hehe.
Vous pouvez cliquer ici dur: démo de contrôle de sélection de couleur de couleur de couleur de formulaire HTML5
5. Type = RechercheC'est la fonction de recherche. Je me souviens quand j'ai vu que la boîte d'entrée de type de recherche aurait automatiquement une icône de recherche de longe de recherche. Cependant, je n'ai pas vu ce test (est-ce dans un rêve), et l'effet d'interface utilisateur de cet attribut est très discret et froid. Dans le navigateur de base Webkit, lorsqu'il y a une valeur, il y aura un croisement sexy après la boîte d'entrée, comme indiqué ci-dessous:
Je n'ai rien trouvé de spécial d'autre chose, alors je viens de mentionner celui-ci. Vous pouvez cliquer ici dur: démo de contrôle de type de recherche de recherche HTML5
6. <datalist> élément et attribut d'élémentDatalist est un élément très rare qui met en œuvre l'effet déroulant de la liste des données, et le style d'interface utilisateur est un peu similaire à la saisie semi-automatique.
Pour donner un exemple simple:
Le code HTML suivant:
Liste: <entrée Type = Text List = MyData Splateholder = Classement de films populaire /> <Datalist ID = MyData> <Option Label = Top1 Value = Laissez les balles voler> <Option Label = Top2 Value = If You Are the One 2> <Option Label = Top3 Value = Laugh JianghU> <Option Label = Top4 Value = Orphan of Zhao> <Option Label = Top
Le résultat est le suivant une fois que la boîte d'entrée a obtenu la mise au point:
Cette chose, cet attribut est une bonne chose. Ne vous promenez pas et découvrez qu'il n'a des effets que sous le dernier navigateur d'opéra. On ne sait pas si d'autres navigateurs le soutiendront à l'avenir.
Avec HTML5, de nouvelles pseudo-classes sont également apparues dans la partie sélective de CSS3, comme:
Par exemple, les codes CSS et HTML suivants:
entrée [type = texte]: focus: valide, entrée [type = e-mail]: focus: valide, entrée [type = numéro]: focus: in-gard {contour: 2px vert vert; } entrée [type = texte]: focus: invalid, entrée [type = e-mail]: focus: invalide, entrée [type = numéro]: focus: hors gamme {contour: 2px rouge solide; }<p> Boîte d'entrée normale: <Type d'entrée = Text /> </p> <p> Boîte de saisie du courrier: <Type de saisie = Email /> </p> <p> Boîte d'entrée numérique: <Type d'entrée = Number Min = 0 Max = 10 /> (0 ~ 10) </p>
Prenez la boîte de saisie du courrier comme exemple. Lorsque le texte d'entrée n'est pas une boîte aux lettres légale, le contour de la boîte d'entrée affiche une bordure d'avertissement rouge:
Avec l'entrée des caractères, lorsque la boîte aux lettres est légale, la frontière rouge sera brossée dans une bordure verte sûre:
Les travaux de vérification, ainsi que l'affichage de style connexe, etc. sont tous terminés par le navigateur et le CSS. J'y ai pensé 10 ans plus tard, wow, c'est le Web, tout est si beau.
Certaines autres caractéristiques des formulaires HTML5, telles que requises, l'autofocus, l'espace réservé, le modèle, etc., ont été montrées et expliquées dans les 28 fonctionnalités, conseils et techniques HTML5 que vous devez connaître, donc je n'entrerai pas ici.
Si vous êtes intéressé par HTML5, je recommande personnellement de lire l'article précédent sur 28 choses. Le contenu de cet article peut être considéré comme une amélioration et un complément supplémentaires à un certain point (autres nouvelles fonctionnalités des formulaires HTML5). Le premier est un gros problème, et cet article est au mieux une sauce de soja de haut niveau.
Enfin, comme ce sont toutes des choses HTML5, si le navigateur que vous essayez de faire maintenant est à savoir, même si vous laissez votre navigateur voler pendant un certain temps, vous ne verrez pas ces effets accrocheurs. Par conséquent, il est recommandé de passer à la dernière version des navigateurs modernes.
Article de référence:Fonctionnalités de la nouvelle forme dans html5: http://dev.opera.com/articles/view/new-forgeres-in-html5/