type d'entrée = "texte" vs type d'entrée = "recherche" en HTML5

Question

Je suis nouveau dans HTML5 car j'ai commencé à travailler avec les nouveaux champs de saisie de formulaire de HTML5. Lorsque je travaille avec des champs de saisie de formulaire, en particulier <input type="text" /> et <input type="search" /> IMO, il n'y avait aucune différence entre tous les principaux navigateurs, y compris Safari, Chrome, Firefox et Opera. Et le champ de recherche se comporte également comme un champ de texte normal.

Alors, quelle est la différence entre input type="text" et input type="search" en HTML5?

Quel est le véritable objectif de <input type="search" /> ?

Answer 1

Maintenant, il n'y a pas une affaire énorme entre eux - peut-être qu'il ne le sera jamais. Toutefois, le point est de donner le navigateur décideurs la capacité de faire quelque chose de spécial avec elle, s'ils le veulent.

Pensez - <input type="number"> sur les téléphones portables, portant le numéro de plaquettes, ou type="email" apportant une version spéciale du clavier, avec @ et .com et le reste disponible.

Sur un téléphone cellulaire, la recherche peut produire une recherche à l'intérieur de l'applet, s'ils le voulaient.

De l'autre côté, il aide actuelle devs avec les css.

input[type=search]:after { content : url("magnifying-glass.gif"); }

Answer 2

Il ne fait absolument rien dans la plupart des navigateurs. Il vient se comporte comme un la saisie de texte. Ce n'est pas un problème. La spec n'en a pas besoin pour le faire quelque chose de spécial. Les navigateurs WebKit ne le traiter un peu différemment mais, avant tout avec style.

Une recherche d'entrée dans WebKit par défaut a un encart de la frontière, arrondi les coins, et un strict contrôle typographique.

Aussi,

Ce n'est pas documenté nulle part, que je sache, il n'est ni dans la spec, mais si vous ajoutez un paramètre sur les résultats de l'entrée, de WebKit appliquera une petite loupe avec une flèche de menu déroulant montrant précédente résultats.

<input type=search results=5 name=s>

Référence

Surtout, il offre une signification sémantique de l' input type.

Answer 3

Sur certains navigateurs, il prend également en charge les attributs "résultats" et "sauvegarde automatique", qui fournissent une fonctionnalité de "recherches récentes" automatique avec l'icône de la loupe.

Plus d'infos sur: http://www.wufoo.com/html5/types/5-search.html

Answer 4

Effectivement être très prudent à ce sujet, en supposant qu'il ne fait rien. Lorsque vous allez dans le style des entrées avec le type de recherche qu'ils ont certaines caractéristiques qui ne peuvent pas être modifiés. Essayez de modifier la bordure sur un seul et vous trouverez qu'il est tout à fait impossible. Il y a plusieurs autres interdits attributs CSS, découvrez cette http://css-tricks.com/webkit-html5-search-inputs/ pour tous les détails.

Aussi, comme mentionné par Jashwant il y a l'attribut de résultat, mais il ne fonctionne pas très bien, sauf si vous incluez le paramètre d'attribut. Le menu déroulant ne fonctionne pas dans la plupart des navigateurs, cependant, donc à utiliser à vos risques et périls.

Answer 5

Il y a une différence de navigateur en action, lorsque vous tapez quelques mots puis saisissez ESC dans input type = "search" en chrome / safari, le champ de saisie est effacé. mais dans le scénario type = "text", les mots ne seront pas effacés. Donc, soyez prudent en choisissant le type surtout lorsque vous l'utilisez pour la fonctionnalité de saisie semi-automatique ou liée à la recherche