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 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 but réel de <input type="search" />?
À l'heure actuelle, il n'y a pas d'énorme contrat entre eux - peut-être n'y en aura-t-il jamais. Cependant, le but est de donner aux constructeurs de navigateurs la possibilité de faire quelque chose de spécial avec cela, s'ils le souhaitent.
Penser à <input type="number"> sur un téléphone cellulaire, en utilisant les touches numériques ou type="email" apportant 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é, cela aide les développeurs actuels avec les CSS.
input[type=search]:after { content : url("magnifying-glass.gif"); }
Cela ne fait absolument rien dans la plupart des navigateurs. Cela se comporte simplement comme une entrée de texte. Ce n'est pas un problème. La spécification ne nécessite pas de faire quelque chose de spécial. Les navigateurs WebKit le traitent un peu différemment, principalement avec le style.
Une entrée de recherche dans WebKit par défaut a une bordure incrustée, des coins arrondis et un contrôle typographique strict.
Aussi,
Ceci n'est documenté nulle part à ma connaissance ni dans les spécifications, mais si vous ajoutez un paramètre de résultat à l'entrée, WebKit appliquera une petite loupe avec une flèche déroulante affichant les résultats précédents.
<input type=search results=5 name=s>
Surtout, il donne un sens sémantique à la input type.
Mise à jour:
Chrome 51 supprime la prise en charge de l'attribut results:
Visuellement/fonctionnellement, 2 différences si le type de saisie est 'recherche': -
- Vous obtenez un symbole ' X ' à la fin de la zone de saisie/recherche pour effacer les textes dans la zone.
- Appuyer sur la touche 'Echap' du clavier efface également les textes
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.
En fait, soyez très prudent en supposant que cela ne fasse rien. Lorsque vous accédez aux entrées de style avec la recherche par type, elles ont certains attributs qui ne peuvent pas être modifiés. Essayez de changer la frontière sur l'un et vous le trouverez tout à fait impossible. Il existe plusieurs autres attributs CSS non autorisés, consultez this pour tous les détails.
De plus, comme mentionné par Jashwant, il y a l'attribut result, bien que cela ne fonctionne pas très bien à moins d'inclure également l'attribut autosave. Le menu déroulant ne fonctionnera pas dans la plupart des navigateurs, cependant, utilisez-le à vos risques et périls.
Point bonus: input type="search "A la capacité d'utiliser l'attribut onsearch (bien que j'ai remarqué que cela ne fonctionnait PAS dans le nouveau navigateur Edge de Microsofts), ce qui évite d'avoir à écrire une fonction personnalisée onkeypress=if(key=13) { function() } chose.
using input type = "search" amène le clavier à entrer le texte de la clé indiquant "search", ce qui peut améliorer l'expérience de l'utilisateur. Cependant, vous devez ajuster le style si vous utilisez ce type.
Il y a une différence de navigateur en action, lorsque vous tapez quelques mots puis saisissez ESC en entrée type="search" en chrome/safari, la zone de saisie sera effacée. mais en type="text" scénario, les mots ne seront pas effacés. Alors, soyez prudent en choisissant le type surtout lorsque vous l'utilisez pour la fonctionnalité de saisie semi-automatique ou liée à la recherche
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 les règles dans les entrées.