<input type="search">

Gli elementi <input type="search"> sono campi di testo progettati per consentire all'utente di inserire query di ricerca. Questi sono funzionalmente identici a <input type="text">, ma possono avere uno stile diverso dall'interprete.

Valore

L'attributo value contiene una stringa che rappresenta il valore contenuto nel campo di ricerca.

searchTerms = mySearch.value

Se non sono presenti vincoli di convalida per l'input, il valore può essere qualsiasi stringa di testo o una stringa vuota ("").

Attributi aggiuntivi

Oltre agli attributi attributi globali che operano su tutti gli elementi <input> indipendentemente dal loro tipo, gli input del campo di ricerca supportano i seguenti attributi.

list

I valori dell'attributo list sono quelli id di un elemento <datalist> che si trova nello stesso documento. <datalist> fornisce un elenco di valori predefiniti da suggerire all'utente per questo input. Eventuali valori nell'elenco che non sono compatibili con typenon sono inclusi nelle opzioni suggerite. I valori forniti sono suggerimenti, non requisiti: gli utenti possono selezionare da questo elenco predefinito o fornire un valore diverso.

maxlength

Il numero massimo di caratteri (come unità di codice UTF-16) che l'utente può inserire nel campo di ricerca. Deve essere un valore intero 0 o superiore. Se non viene specificato maxlength o viene specificato un valore non valido, il campo di ricerca non ha una lunghezza massima. Questo valore deve anche essere maggiore o uguale al valore di minlength.

minlength

Il numero minimo di caratteri (come unità di codice UTF-16) che l'utente può inserire nel campo di ricerca. Deve essere un valore intero non negativo minore o uguale al valore specificato da maxlength. Se viene specificato no minlengtho viene specificato un valore non valido, l'input di ricerca non ha una lunghezza minima.

pattern

L'attributo pattern, quando specificato, è un'espressione regolare a cui il valore dell'input deve corrispondere affinché il valore superi la convalida del vincolo. Deve essere un'espressione regolare JavaScript valida, come utilizzata dal tipo RegExp e come documentato nella nostra guida sulle espressioni regolari ; il flag 'u' viene specificato durante la compilazione dell'espressione regolare, in modo che il modello venga trattato come una sequenza di punti di codice Unicode, anziché come ASCII. Nessuna barra in avanti deve essere specificata attorno al testo del modello.

Se il modello specificato non è specificato o non è valido, non viene applicata alcuna espressione regolare e questo attributo viene completamente ignorato.

placeholder

L'attributo placeholder è una stringa che fornisce un breve suggerimento all'utente sul tipo di informazioni previste nel campo. Dovrebbe essere una parola o una breve frase che dimostri il tipo di dati previsto, piuttosto che un messaggio esplicativo. Il testo non deve includere ritorni a capo o avanzamenti di riga.

Se il contenuto del controllo ha una direzionalità ( LTR o RTL ) ma deve presentare il segnaposto nella direzionalità opposta, puoi utilizzare i caratteri di formattazione dell'algoritmo bidirezionale Unicode per sovrascrivere la direzionalità all'interno del segnaposto.

readonly

Un attributo booleano che, se presente, significa che questo campo non può essere modificato dall'utente. Tuttavia, value può ancora essere modificato dal codice JavaScript impostando direttamente la proprietà HTMLInputElement value.

size

L'attributo size è un valore numerico che indica quanti caratteri deve essere largo il campo di input. Il valore deve essere un numero maggiore di zero e il valore predefinito è 20. Poiché le larghezze dei caratteri variano, questo può essere esatto o meno e non dovrebbe essere considerato tale; l'input risultante potrebbe essere più stretto o più largo del numero di caratteri specificato, a seconda dei caratteri e del font.

Questo non pone un limite al numero di caratteri che l'utente può inserire nel campo. Specifica solo approssimativamente quanti possono essere visti alla volta. Per impostare un limite superiore alla lunghezza dei dati di input, utilizzare l'attributo maxlength.

spellcheck

spellcheck è un attributo globale che viene utilizzato per indicare se abilitare o meno il controllo ortografico per un elemento. Può essere utilizzato su qualsiasi contenuto modificabile, ma qui consideriamo le specifiche relative all'uso di spellcheck su elementi <input>. I valori ammessi per spellcheck sono:

false

Disabilita il controllo ortografico per questo elemento.

true

Disabilita il controllo ortografico per questo elemento.

"" (stringa vuota) o nessun valore

Segui il comportamento predefinito dell'elemento per il controllo ortografico. Questo può essere basato sull'impostazione di un genitore spellcheck o su altri fattori.

Un campo di input può avere il controllo ortografico abilitato se non ha l' attributo di sola lettura impostato e non è disabilitato.

Il valore di spellcheck restituito dalla lettura potrebbe non riflettere lo stato effettivo del controllo ortografico all'interno di un controllo, se le preferenze dell'interprete prevalgono sull'impostazione.

Utilizzo di input di tipo "search"

Gli elementi <input type="search"> sono molto simili a quelli di tipo text, tranne per il fatto che sono specificamente destinati alla gestione dei termini di ricerca. Sono sostanzialmente equivalenti nel comportamento, ma i programmi utente possono scegliere di impostarli in modo diverso per impostazione predefinita (e, naturalmente, i siti possono utilizzare fogli di stile per applicare loro stili personalizzati).

<form>
  <div>
    <input type="search" id="mySearch" name="q">
    <button>Cerca</button>
  </div>
</form>

q è il dato più comune da dare a name per cercare, sebbene non sia obbligatorio. Una volta inviata, la coppia nome/valore dati inviata al server sarà q=searchterm.

Convalida

Gli elementi <input type="search"> hanno le stesse caratteristiche di convalida disponibili come input text regolari. È meno probabile che tu voglia utilizzare le funzioni di convalida in generale per le caselle di ricerca. In molti casi, gli utenti dovrebbero essere autorizzati a cercare qualsiasi cosa, ma ci sono alcuni casi da considerare, come le ricerche su dati di un formato noto.

Liste utili

• Attributi
• Attributi globali
• Elementi