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

Je suis nouveau dans HTML5 car j'ai commencé à travailler avec les nouveaux champs de saisie de formulaire HTML5. Lorsque je travaille avec les champs de saisie de formulaire, en particulier <input type="text" />et l' <input type="search" />OMI, il n'y avait aucune différence dans 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 but de <input type="search" />?

À l'heure actuelle, il n'y a pas beaucoup de choses entre eux - peut-être qu'il n'y en aura jamais. Cependant, le but est de donner aux fabricants de navigateurs la possibilité de faire quelque chose de spécial avec, s'ils le souhaitent.

Pensez <input type="number">aux téléphones portables, à la mise en place de pavés numériques ou type="email"à une version spéciale du clavier, avec @ et .com et le reste disponible.

Sur un téléphone portable, la recherche peut faire apparaître une applet de recherche interne, s'ils le souhaitent.

De l'autre côté, il aide les développeurs actuels avec css.

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

Il ne fait absolument rien dans la plupart des navigateurs. Il se comporte simplement comme une entrée de texte. Ce n'est pas un problème. La spécification ne l'exige pas pour faire quoi que ce soit de spécial. Les navigateurs WebKit le traitent un peu différemment cependant, principalement avec le style.

Une entrée de recherche dans WebKit a par défaut une bordure incrustée, des coins arrondis et un contrôle typographique strict.

Aussi,

Cela n'est documenté nulle part à ma connaissance ni dans la spécification, mais si vous ajoutez un paramètre de résultats sur l'entrée, WebKit appliquera une petite loupe avec une flèche déroulante montrant les résultats précédents.

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

Référence

Surtout, il donne une signification sémantique au input type.

Mettre à jour:

Chrome 51 a supprimé la prise en charge de l'attribut de résultats:

Visuellement / fonctionnellement, 2 différences si le type d'entrée est ' recherche ': -

1. Vous obtenez un symbole ' X ' à la fin de la zone de saisie / recherche pour effacer les textes dans la zone
2. Appuyer sur la touche ' Echap ' du clavier efface également les textes

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

Plus d'informations

En fait, soyez très prudent en supposant que cela ne fait rien. Lorsque vous accédez aux entrées de style avec la recherche de type, elles ont certains attributs qui ne peuvent pas être modifiés. Essayez de changer la bordure sur un et vous trouverez cela tout à fait impossible. Il existe plusieurs autres attributs CSS non autorisés, vérifiez ceci pour tous les détails.

Comme mentionné par Jashwant, il y a également l'attribut result, bien qu'il ne fonctionne pas très bien à moins que vous n'incluiez également l'attribut d'enregistrement automatique. Le menu déroulant ne fonctionnera pas dans la plupart des navigateurs, cependant, utilisez-le à vos risques et périls.

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

Point bonus: input type="search"a la possibilité d'utiliser l' onsearchattribut (même si j'ai remarqué que cela ne fonctionne PAS dans le nouveau navigateur Edge de Microsoft), ce qui élimine le besoin d'écrire une onkeypress=if(key=13) { function() }chose personnalisée .

en utilisant input type = "search", le texte du keybord enterkey affiche "search", ce qui peut améliorer l'expérience utilisateur. cependant, vous devez ajuster le style si vous utilisez ce type.

Cela dépend du point de vue du programmeur, un programmeur peut facilement déterminer le but de l'entrée en regardant le type et il est facile pour le style CSS et pour JavaScript ou JQuery de vérifier la règle dans les entrées.

Mais cela a un mauvais effet sur votre élément d'entrée, si vous définissez

<input type="search">

Et dans votre css vous définissez

input {background: url("images/search_bg.gif");}

Il n'apparaîtra pas du tout.