Attributi degli Input HTML

Questo capitolo descrive i diversi attributi per l’elemento HTML <input>.

L’attributo “value”

L’attributo “value” dell’elemento di input specifica un valore iniziale per il campo di input:

<form>
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" value="Luca" /><br />
  <label for="cognome">Cognome:</label><br />
  <input type="text" id="cognome" name="cognome" value="Rossi" />
</form>

L’attributo “readonly”

L’attributo “readonly” dell’elemento di input specifica che il campo di input è di sola lettura.

Un campo di input di sola lettura non può essere modificato (tuttavia, l’utente può spostarsi su di esso, selezionarlo e copiare il testo).

Il valore di un campo di input di sola lettura verrà inviato quando viene inviato il modulo!

<form>
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" value="Luca" readonly /><br />
  <label for="cognome">Cognome:</label><br />
  <input type="text" id="cognome" name="cognome" value="Rossi" />
</form>

L’attributo “disabled”

L’attributo “disabled” dell’elemento di input specifica che il campo di input deve essere disabilitato.

Un campo di input disabilitato non è utilizzabile e non può essere selezionato.

Il valore di un campo di input disabilitato non verrà inviato quando viene inviato il modulo!

<form>
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" value="Luca" disabled /><br />
  <label for="cognome">Cognome:</label><br />
  <input type="text" id="cognome" name="cognome" value="Rossi" />
</form>

L’attributo “size”

L’attributo “size” dell’elemento di input specifica la larghezza visibile, in caratteri, di un campo di input.

Il valore predefinito per “size” è 20.

L’attributo “size” funziona con i seguenti tipi di input: text, search, tel, url, email e password.

<form>
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" size="50" /><br />
  <label for="pin">PIN:</label><br />
  <input type="text" id="pin" name="pin" size="4" />
</form>

L’attributo “maxlength”

L’attributo “maxlength” dell’elemento di input specifica il numero massimo di caratteri consentiti in un campo di input.

Quando è impostato “maxlength”, il campo di input non accetterà più di quel numero specificato di caratteri. Tuttavia, questo attributo non fornisce alcun feedback. Pertanto, se desideri avvisare l’utente, dovrai scrivere codice JavaScript.

<form>
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" size="50" /><br />
  <label for="pin">PIN:</label><br />
  <input type="text" id="pin" name="pin" maxlength="4" size="4" />
</form>

Gli attributi “min” e “max”

Gli attributi “min” e “max” specificano i valori minimo e massimo per un campo di input.

Gli attributi “min” e “max” funzionano con i seguenti tipi di input: number, range, date, datetime-local, month, time e week.

Usa insieme gli attributi “max” e “min” per creare un intervallo di valori legali.

<form>
  <label for="datemax">Inserisci una data prima del 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31" /><br /><br />

  <label for="datemin">Inserisci una data dopo il 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02" /><br /><br />

  <label for="qta">Quantità (tra 1 e 5):</label>
  <input type="number" id="qta" name="qta" min="1" max="5" />
</form>

L’attributo “multiple”

L’attributo “multiple” specifica che all’utente è consentito inserire più di un valore in un campo di input.

L’attributo “multiple” funziona con i seguenti tipi di input: email e file.

<form>
  <label for="files">Seleziona file:</label>
  <input type="file" id="files" name="files" multiple />
</form>

L’attributo “pattern”

L’attributo “pattern” specifica un’espressione regolare con cui viene controllato il valore del campo di input quando il modulo viene inviato.

L’attributo “pattern” funziona con i seguenti tipi di input: text, date, search, url, tel, email e password.

<form>
  <label for="codicePaese">Codice paese:</label>
  <input
    type="text"
    id="codicePaese"
    name="codicePaese"
    pattern="[A-Za-z]{3}"
    title="Codice paese di tre lettere" />
</form>

L’attributo “placeholder”

L’attributo “placeholder” specifica un breve suggerimento che descrive il valore atteso di un campo di input (un esempio di valore o una breve descrizione del formato atteso).

Il suggerimento breve viene visualizzato nel campo di input prima che l’utente inserisca un valore.

L’attributo “placeholder” funziona con i seguenti tipi di input: text, search, url, tel, email e password.

<form>
  <label for="telefono">Inserisci un numero di telefono:</label>
  <input
    type="tel"
    id="telefono"
    name="telefono"
    placeholder="123-45-678"
    pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />
</form>

L’attributo “required”

L’attributo “required” specifica che un campo di input deve essere compilato prima di inviare il modulo.

L’attributo “required” funziona con i seguenti tipi di input: text, search, url, tel, email, password, selezione di date, number, checkbox, radio e file.

<form>
  <label for="username">Nome utente:</label>
  <input type="text" id="username" name="username" required />
</form>

L’attributo “step”

L’attributo “step” specifica gli intervalli numerici legali per un campo di input.

Questo attributo può essere utilizzato insieme agli attributi “max” e “min” per creare un intervallo di valori legali.

L’attributo “step” funziona con i seguenti tipi di input: number, range, date, datetime-local, month, time e week.

<form>
  <label for="punti">Punti:</label>
  <input type="number" id="punti" name="punti" step="3" />
</form>

Le restrizioni di input non sono infallibili e JavaScript fornisce molti modi per aggiungere input non validi. Per limitare in modo sicuro l’input, è necessario controllare anche il valore ricevuto dal server.

L’attributo “autofocus”

L’attributo “autofocus” specifica che un campo di input dovrebbe ottenere automaticamente il focus quando la pagina si carica.

<form>
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" autofocus /><br />
  <label for="cognome">Cognome:</label><br />
  <input type="text" id="cognome" name="cognome" />
</form>

Gli attributi “height” e “width”

Gli attributi “height” e “width” specificano l’altezza e la larghezza di un elemento <input type="image">.

Specifica sempre sia gli attributi “height” che “width” per le immagini. Se vengono impostate altezza e larghezza, lo spazio richiesto per l’immagine viene riservato quando la pagina viene caricata. Senza questi attributi, il browser non conosce le dimensioni dell’immagine e non può riservare lo spazio appropriato. L’effetto sarà che il layout della pagina cambierà durante il caricamento (mentre le immagini vengono caricate).

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" /><br /><br />
  <label for="cognome">Cognome:</label>
  <input type="text" id="cognome" name="cognome" /><br /><br />
  <input type="image" src="img_submit.png" alt="Invia" width="48" height="48" />
</form>

L’attributo “list”

L’attributo “list” si riferisce a un elemento <datalist> che contiene opzioni predefinite per un elemento <input>.

<form>
  <input list="browser" />
  <datalist id="browser">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
  </datalist>
</form>

L’attributo “autocomplete”

L’attributo “autocomplete” specifica se un modulo o un campo di input deve avere l’autocompletamento attivo o disattivato.

L’autocompletamento consente al browser di predire il valore. Quando un utente inizia a digitare in un campo, il browser dovrebbe visualizzare opzioni per compilare il campo, basandosi su valori digitati in precedenza.

L’attributo “autocomplete” funziona con il tag <form> e i seguenti tipi di input: text, search, url, tel, email, password, selezionatori di date, range e colori.

<form action="/action_page.php" autocomplete="on">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" /><br /><br />
  <label for="cognome">Cognome:</label>
  <input type="text" id="cognome" name="cognome" /><br /><br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off" /><br /><br />
  <input type="submit" value="Invia" />
</form>

In alcuni browser potrebbe essere necessario attivare una funzione di autocompletamento per farlo funzionare (cerca sotto “Preferenze” nel menu del browser).