input type = "text" vs input type = "search" in HTML5

Sono nuovo di HTML5 perché ho iniziato a lavorare con i nuovi campi di input del modulo HTML5. Quando sto lavorando con campi di input forma, in particolare <input type="text" />e <input type="search" />IMO non c'era alcuna differenza in tutti i principali browser tra cui Safari, Chrome, Firefox e Opera. E anche il campo di ricerca si comporta come un normale campo di testo.

Quindi, qual è la differenza tra input type="text"e input type="search"in HTML5?

Qual è il vero scopo di <input type="search" />?

In questo momento, non c'è un grosso problema tra loro - forse non ci sarà mai. Tuttavia, il punto è dare ai produttori di browser la possibilità di fare qualcosa di speciale, se lo desiderano.

Pensa <input type="number">ai cellulari, tirando su i tastierino numerico o type="email"tirando fuori una versione speciale della tastiera, con @ e .com e il resto disponibile.

Su un cellulare, la ricerca potrebbe far apparire un'applet di ricerca interna, se lo desiderasse.

D'altra parte, aiuta gli sviluppatori attuali con CSS.

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

Non fa assolutamente nulla nella maggior parte dei browser. Si comporta come un input di testo. Questo non è un problema. Le specifiche non richiedono che faccia qualcosa di speciale. I browser WebKit lo trattano in modo leggermente diverso, principalmente con lo stile.

Un input di ricerca in WebKit per impostazione predefinita ha un bordo interno, angoli arrotondati e un rigoroso controllo tipografico.

Anche,

Questo non è documentato in nessun luogo che io conosca, né lo è nelle specifiche, ma se aggiungi un parametro dei risultati sull'input, WebKit applicherà una piccola lente d'ingrandimento con una freccia a discesa che mostra i risultati precedenti.

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

Riferimento

Soprattutto, fornisce un significato semantico al input type.

Aggiornare:

Chrome 51 ha rimosso il supporto per l'attributo dei risultati:

Visivamente / funzionalmente, 2 differenze se il tipo di input è ' cerca ': -

1. Viene visualizzato un simbolo " X " alla fine della casella di input / ricerca per cancellare i testi nella casella
2. La pressione del tasto ' Esc ' sulla tastiera cancella anche i testi

Su alcuni browser, supporta anche gli attributi "risultati" e "salvataggio automatico" che forniscono la funzionalità automatica di "ricerche recenti" con l'icona della lente di ingrandimento.

Ulteriori informazioni

In realtà stai molto attento a supporre che non faccia nulla. Quando si passa agli input di stile con la ricerca del tipo, hanno determinati attributi che non possono essere modificati. Prova a cambiare il bordo su uno e lo troverai abbastanza impossibile. Ci sono molti altri attributi CSS non consentiti, controlla questo per tutti i dettagli.

Inoltre, come menzionato da Jashwant, c'è l'attributo risultato, anche se non funziona molto bene a meno che tu non includa anche l'attributo di salvataggio automatico. Il menu a discesa non funzionerà nella maggior parte dei browser, quindi utilizzalo a tuo rischio e pericolo.

C'è una differenza del browser nell'azione, quando si digitano alcune parole e si digita ESC nell'input type="search"in chrome / safari, la casella di input verrà cancellata. ma nello type="text"scenario, le parole non verranno cancellate. Quindi fai attenzione a scegliere il tipo soprattutto quando lo usi per il completamento automatico o la funzione di ricerca relativa

Punto bonus: input type="search"ha la possibilità di utilizzare l' onsearchattributo (anche se ho notato che NON funziona nel nuovo Edge Browser di Microsoft), il che elimina la necessità di scrivere onkeypress=if(key=13) { function() }qualcosa di personalizzato .

usando input type = "search", fai in modo che il testo della chiave di accesso del keybord mostri "cerca", il che può migliorare l'esperienza dell'utente. tuttavia, è necessario regolare lo stile se si utilizza questo tipo.

Dipende dal punto di vista dei programmatori, un programmatore può facilmente determinare lo scopo dell'input osservando il tipo ed è facile per lo stile CSS e per JavaScript o JQuery verificare la regola negli input.

Ma ha un effetto negativo sull'elemento di input, se impostato

<input type="search">

E nel tuo css hai impostato

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

Non si presenterà affatto.