Input type: search

14 marzo 2011

È possibile utilizzare l’elemento input con type=search per creare un campo di ricerca. Questo campo è, ovviamente, un campo libero nel senso che non impone nessun pattern.

Safari su Mac OS X e il type search

Nella maggior parte dei browser non c’è alcuna differenza tra un campo di tipo text e un campo search, ma in Safari su Mac OS X abbiamo un comportamento particolare:

  1. Visivamente l’input ha i bordi arrotondati.
  2. Se scriviamo qualcosa nel campo compare una piccola X sulla destra che, se cliccata, svuota il campo.

Figura 1

screenshot

Esempi d’uso

Ecco un semplice esempio per implementare questo tipo di input:

<form name="ricerca" method="post" action="/search">
  <label> Parola chiave:
    <input type="search" autocomplete="on" placeholder="article, section, ..." name="keyword" required maxlength="50">
  </label>
  <input type="submit" value="Ricerca">
</form>

Come detto precedentemente, questo codice nella maggior parte dei browser produce visivamente un normale <input type="text">.

Tabella del supporto sui browser

Form: nuovi tipi di input Internet Explorer Firefox Safari Google Chrome Opera
search No 4.0+ 2.0+ 2.0+ 11.0+

Tutte le lezioni

1 ... 24 25 26 ... 51

Se vuoi aggiornamenti su Input type: search inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Input type: search

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy