<input type="text">

Gli elementi <input type="text"> creano campi di testo di base a riga singola.

Valore

L'attributo value è una stringa che contiene il valore corrente del testo immesso nel campo di testo. Puoi recuperarlo usando la proprietà in JavaScript HTMLInputElement value.

let theText = myTextInput.value;

Se non sono presenti vincoli di convalida per l'input , il valore potrebbe essere una stringa vuota ("").

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.

minlegth

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.

Attributi non standard

I seguenti attributi non standard sono disponibili per i campi di immissione del numero di telefono. Come regola generale, dovresti evitare di usarli a meno che non possa essere aiutato.

autocorrect

Estensione di Safari, l'attributo autocorrect è una stringa che indica se attivare o meno la correzione automatica mentre l'utente sta modificando questo campo. I valori ammessi sono:

on

Abilita la correzione automatica degli errori di battitura e l'elaborazione delle sostituzioni di testo, se configurate.

off

Disabilita la correzione automatica e le sostituzioni del testo.

Utilizzo di <input type="text">

Gli elementi <input type="text"> creano input di base a riga singola. Dovresti usarli ovunque tu voglia che l'utente inserisca un valore a riga singola e non sia disponibile un tipo di input più specifico per raccogliere quel valore.

Esempio di base

<form>
  <div>
    <label for="userName">Scegli un esername:</label>
    <input id="userName" type="text" name="userName">
  </div>
  <div>
    <button>Invia</button>
  </div>
<form>

Una volta inviata, la coppia nome/valore dati inviata al server sarà name=Chris (se "Chris" è stato inserito come valore di input prima dell'invio). È necessario ricordare di includere l'attributo namesull'elemento <input>, altrimenti il ​​valore del campo di testo non verrà incluso nei dati inviati.

Impostazione di un placeholder

Puoi fornire un utile segnaposto all'interno del tuo input di testo che può fornire un suggerimento su cosa inserire includendo l'uso dell'attributo placeholder. Guarda il seguente esempio:

<form>
  <div>
    <label for="userName">Scegli un esername:</label>
    <input id="userName" type="text" name="userName"
    placeholder="Minuscolo, una parola">
  </div>
  <div>
    <button>Invia</button>
  </div>
<form>

Convalida

Agli elementi <input type="text"> non è applicata alcuna convalida automatica (poiché un input di testo di base deve essere in grado di accettare qualsiasi stringa arbitraria), ma sono disponibili alcune opzioni di convalida lato client, di cui parleremo di seguito.

Nota: la convalida del modulo HTML non sostituisce gli script del server che assicurano che i dati inseriti siano nel formato corretto. È fin troppo facile per qualcuno apportare modifiche all'HTML che consentano loro di ignorare la convalida o rimuoverlo completamente. È anche possibile che qualcuno ignori completamente il tuo HTML e invii i dati direttamente al tuo server. Se il codice lato server non riesce a convalidare i dati che riceve, potrebbe verificarsi un disastro quando nel database vengono immessi dati formattati in modo errato (o dati troppo grandi, di tipo errato e così via).