Eingabetyp = "Text" vs Eingabetyp = "Suche" in HTML5

Ich bin neu in HTML5, da ich angefangen habe, mit den neuen Formulareingabefeldern von HTML5 zu arbeiten. Wenn ich mit Formulareingabefeldern arbeite, insbesondere <input type="text" />mit <input type="search" />IMO, gab es keinen Unterschied in allen wichtigen Browsern, einschließlich Safari, Chrome, Firefox und Opera. Das Suchfeld verhält sich auch wie ein normales Textfeld.

Was ist der Unterschied zwischen input type="text"und input type="search"in HTML5?

Was ist der wahre Zweck von <input type="search" />?

Im Moment gibt es keine große Sache zwischen ihnen - vielleicht wird es nie eine geben. Es geht jedoch darum, den Browserherstellern die Möglichkeit zu geben, etwas Besonderes daraus zu machen, wenn sie dies wünschen.

Denken Sie <input type="number">an Mobiltelefone, rufen Sie Nummernblöcke auf oder type="email"rufen Sie eine spezielle Version der Tastatur auf, wobei @ und .com und der Rest verfügbar sind.

Auf einem Mobiltelefon kann die Suche ein internes Such-Applet aufrufen, wenn dies gewünscht wird.

Auf der anderen Seite hilft es aktuellen Entwicklern mit CSS.

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

In den meisten Browsern macht es absolut nichts. Es verhält sich einfach wie eine Texteingabe. Das ist kein Problem. Die Spezifikation erfordert nichts Besonderes. WebKit-Browser behandeln dies jedoch etwas anders, vor allem beim Styling.

Eine Sucheingabe in WebKit hat standardmäßig einen eingefügten Rand, abgerundete Ecken und eine strenge typografische Kontrolle.

Ebenfalls,

Dies ist an keiner mir bekannten Stelle oder in der Spezifikation dokumentiert. Wenn Sie jedoch einen Ergebnisparameter zur Eingabe hinzufügen, wendet WebKit eine kleine Lupe mit einem Dropdown-Pfeil an, der die vorherigen Ergebnisse anzeigt.

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

Referenz

Vor allem gibt es dem eine semantische Bedeutung input type.

Aktualisieren:

Chrome 51 hat die Unterstützung für das Ergebnisattribut entfernt:

Optisch / funktional 2 Unterschiede, wenn der Eingabetyp " Suche " ist: -

1. Am Ende des Eingabe- / Suchfelds wird ein X -Symbol angezeigt, um die Texte im Feld zu löschen
2. Durch Drücken der Esc -Taste auf der Tastatur werden auch Texte gelöscht

In einigen Browsern werden auch die Attribute "Ergebnisse" und "Automatisch speichern" unterstützt, die automatische Funktionen für "Letzte Suchvorgänge" mit dem Lupensymbol bereitstellen.

Mehr Info

Seien Sie eigentlich sehr vorsichtig, wenn Sie davon ausgehen, dass es nichts bewirkt. Wenn Sie mit der Typensuche zu Stileingaben wechseln, weisen diese bestimmte Attribute auf, die nicht geändert werden können. Versuchen Sie, die Grenze auf einer zu ändern, und Sie werden es ziemlich unmöglich finden. Es gibt mehrere andere nicht zulässige CSS-Attribute. Überprüfen Sie dies auf alle Details.

Wie von Jashwant erwähnt, gibt es auch das Ergebnisattribut, obwohl es nur dann sehr gut funktioniert, wenn Sie auch das Attribut "Automatisch speichern" einschließen. Das Dropdown-Menü funktioniert jedoch in den meisten Browsern nicht. Verwenden Sie es daher auf eigene Gefahr.

Es gibt einen Unterschied in der Aktion des Browsers. Wenn Sie einige Wörter eingeben und dann ESC in die Eingabe type="search"in Chrome / Safari eingeben, wird das Eingabefeld gelöscht. Im type="text"Szenario werden die Wörter jedoch nicht gelöscht. Seien Sie also vorsichtig bei der Auswahl des Typs, insbesondere wenn Sie ihn für die automatische Vervollständigung oder für die Suche verwenden

Bonuspunkt: input type="search"hat die Möglichkeit, das onsearchAttribut zu verwenden (obwohl ich bemerkt habe, dass dies in Microsofts neuem Edge-Browser NICHT funktioniert), wodurch das Schreiben einer benutzerdefinierten onkeypress=if(key=13) { function() }Sache entfällt .

Wenn Sie input type = "search" verwenden, wird im Text des Keybord-Enterkeys "search" angezeigt, was die Benutzererfahrung verbessern kann. Sie müssen jedoch den Stil anpassen, wenn Sie diesen Typ verwenden.

Dies hängt von der Sichtweise des Programmierers ab. Ein Programmierer kann den Zweck der Eingabe leicht anhand des Typs bestimmen. Für das CSS-Styling und für JavaScript oder JQuery ist es einfach, die Regeln in den Eingaben zu überprüfen.

Wenn Sie dies festlegen, hat dies jedoch negative Auswirkungen auf Ihr Eingabeelement

<input type="search">

Und in Ihrem CSS setzen Sie

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

Es wird überhaupt nicht auftauchen.