HTML
Input Control Elements

introduzione

Sintassi

• <input type="" name="" value="">

Parametri

Osservazioni

Casella di controllo e pulsanti di opzione

Panoramica

Caselle di controllo e pulsanti radio sono scritti con il tag HTML <input> e il loro comportamento è definito nelle specifiche HTML .

La casella di controllo o il pulsante di opzione più semplice è un elemento <input> con un attributo type di checkbox o radio , rispettivamente:

<input type="checkbox">
<input type="radio">

Un singolo elemento di casella di controllo stand-alone viene utilizzato per una singola opzione binaria come una domanda sì o no. Le caselle di controllo sono indipendenti, il che significa che l'utente può selezionare tutte le opzioni che desidera in un gruppo di caselle di controllo. In altre parole, il controllo di una casella di controllo non deseleziona le altre caselle di controllo nel gruppo di caselle di controllo.

I pulsanti di opzione vengono di solito in gruppi (se non sono raggruppati con un altro pulsante di opzione, probabilmente si intende utilizzare una casella di controllo) identificati utilizzando lo stesso attributo del name su tutti i pulsanti all'interno di quel gruppo. La selezione dei pulsanti di opzione si escludono a vicenda , il che significa che l'utente può selezionare solo una scelta tra un gruppo di pulsanti di opzione. Quando viene selezionato un pulsante di opzione, qualsiasi altro pulsante di opzione con lo stesso name precedentemente selezionato viene deselezionato.

Esempio:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

Se visualizzati, i pulsanti di opzione appaiono come un cerchio (deselezionato) o un cerchio pieno (selezionato). Le caselle di controllo appaiono come un quadrato (deselezionato) o un quadrato pieno (selezionato). A seconda del browser e del sistema operativo, il quadrato a volte ha angoli arrotondati.

attributi

caselle di controllo e pulsanti di opzione hanno un numero di attributi per controllare il loro comportamento:

value

Come qualsiasi altro elemento di input, l'attributo value specifica il valore stringa da associare al pulsante in caso di invio del modulo. Tuttavia, le caselle di controllo e i pulsanti di opzione sono speciali in quanto quando il valore viene omesso, viene impostato su on quando viene inviato, anziché inviare un valore vuoto. L'attributo value non si riflette nell'aspetto del pulsante.

checked

L'attributo checked specifica lo stato iniziale di una casella di controllo o di un pulsante di opzione. Questo è un attributo booleano e può essere omesso.

Ognuno di questi sono modi equivalenti validi per definire un pulsante di opzione selezionato:

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

L'assenza dell'attributo checked è l'unica sintassi valida per un pulsante non controllato:

<input type="radio">
<input type="checkbox">

Quando si ripristina un <form> , le caselle di controllo e i pulsanti di opzione tornano allo stato dell'attributo checked .

Accessibilità

etichette

Per dare un contesto ai pulsanti e mostrare agli utenti a cosa serve ciascun pulsante, ognuno di essi dovrebbe avere un'etichetta. Questo può essere fatto usando un elemento <label> per avvolgere il pulsante. Inoltre, rende l'etichetta selezionabile, quindi si seleziona il pulsante corrispondente.

Esempio:

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

o con un elemento <label> con un attributo for impostato id del pulsante:

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

Gruppi di pulsanti

Poiché ciascun pulsante di opzione influisce sugli altri componenti del gruppo, è comune fornire un'etichetta o un contesto per l'intero gruppo di pulsanti di opzione.

Per fornire un'etichetta per l'intero gruppo, i pulsanti radio dovrebbero essere inclusi in un elemento <fieldset> con un elemento <legend> suo interno.

Esempio:

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

Le caselle di controllo possono anche essere raggruppate in modo simile, con un fieldset e una legenda che identificano il gruppo di caselle di controllo correlate. Tuttavia, tieni presente che le caselle di controllo non devono condividere lo stesso nome perché non si escludono a vicenda. In questo modo il modulo invierà più valori per la stessa chiave e non tutti i linguaggi sul lato server lo gestiranno allo stesso modo (comportamento non definito). Ogni casella di controllo dovrebbe avere un nome univoco o utilizzare un insieme di parentesi quadre ( [] ) per indicare che il modulo deve inviare una matrice di valori per quella chiave. Il metodo scelto dipende dal modo in cui si intende gestire i dati del modulo lato client o lato server. Si dovrebbe anche tenere la leggenda breve, poiché alcune combinazioni di browser e screen reader leggono la legenda prima di ogni campo di input nel fieldset.

Nascosto

<input type="hidden" name="inputName" value="inputValue">  

Un input nascosto non sarà visibile all'utente, ma il suo valore verrà inviato al server quando il modulo viene comunque inviato.

Parola d'ordine

<input type="password" name="password">

L'elemento di input con un attributo type il cui valore è password crea un campo di testo a riga singola simile al type=text input type=text , ad eccezione del fatto che il testo non viene visualizzato quando l'utente lo inserisce.

<input type="password" name="password" placeholder="Password">

Il testo segnaposto viene mostrato in testo normale e viene sovrascritto automaticamente quando un utente inizia a digitare.

Nota: alcuni browser e sistemi modificano il comportamento predefinito del campo della password per visualizzare anche il carattere digitato più recentemente per una durata breve, in questo modo:

Sottoscrivi

<input type="submit" value="Submit">

Un input di invio crea un pulsante che invia il modulo al suo interno quando viene fatto clic.

Puoi anche utilizzare l'elemento <button> se hai bisogno di un pulsante di invio che può essere più facilmente stilizzato o contenere altri elementi:

<button type="submit">
  <img src="submit-icon.jpg" /> Submit
</button>

File

<input type="file" name="fileSubmission">

Gli input di file consentono agli utenti di selezionare un file dal loro filesystem locale per l'uso con la pagina corrente. Se utilizzati insieme a un elemento del form , possono essere utilizzati per consentire agli utenti di caricare file su un server (per ulteriori informazioni, consultare Caricamento di file ).

L'esempio seguente consente agli utenti di utilizzare l'input del file per selezionare un file dal proprio filesystem e caricarlo su uno script sul server denominato upload_file.php .

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
</form>

Più file

Aggiungendo l'attributo multiple l'utente sarà in grado di selezionare più di un file:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

Accetta file

L'attributo Accept specifica i tipi di file che l'utente può selezionare. Ad esempio .png , .gif , .jpeg .

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

Input Validation

La convalida dell'input HTML viene eseguita automaticamente dal browser in base agli attributi speciali sull'elemento di input. Potrebbe parzialmente o completamente sostituire la convalida dell'input JavaScript. Questo tipo di convalida può essere aggirato dall'utente tramite richieste HTTP appositamente predisposte, quindi non sostituisce la convalida dell'input lato server. La convalida si verifica solo quando si tenta di inviare il modulo, quindi tutti gli input limitati devono essere contenuti in un modulo per consentire la convalida (a meno che non si stia utilizzando JavaScript). Tieni presente che gli input disabilitati o di sola lettura non attivano la convalida.

Alcuni tipi di input più recenti (come email , url , tel , date e molti altri) vengono automaticamente convalidati e non richiedono i propri vincoli di convalida.

<input required>

Lunghezza minima / massima

Utilizzare gli attributi minlength e maxlength per indicare i requisiti di lunghezza. La maggior parte dei browser impedisce all'utente di digitare più di un massimo di caratteri nella casella, impedendo loro di rendere la loro voce non valida ancor prima di tentare l'invio.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Specifica di un intervallo

Utilizza gli attributi min e max per limitare l'intervallo di numeri che un utente può inserire in un input di tipo number o range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

<input pattern="\d*" title="Numbers only, please.">

<input type="file" accept="image/*" title="Only images are allowed">

<input type="file" accept="image/*,.rar,application/zip">

Nota: aggiungendo novalidate attributo novalidate all'elemento form o formnovalidate attributo formnovalidate al pulsante di invio, si impedisce la convalida sugli elementi del modulo. Per esempio:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

Il modulo contiene i campi necessari per "pubblicare" la bozza ma non sono necessari per "salvare" la bozza.

Reset

<input type="reset" value="Reset">

Un input di tipo reset crea un pulsante che, quando viene premuto, reimposta tutti gli input nel modulo in cui è contenuto al loro stato predefinito.

• Il testo in un campo di input verrà reimpostato su bianco o il suo valore predefinito (specificato utilizzando l'attributo value ).
• Qualsiasi opzione (s) in un menu di selezione verrà deselezionata a meno che non abbiano l'attributo selected .
• Tutte le caselle di controllo e le caselle radio saranno deselezionate a meno che non abbiano l'attributo checked .

Nota: un pulsante di ripristino deve essere all'interno o collegato a (tramite l'attributo form ) un elemento <form> per avere un effetto. Il pulsante resetterà solo gli elementi all'interno di questo modulo.

Numero

<input type="number" value="0" name="quantity">

Tel

<input type="tel" value="+8400000000">

L'elemento di input con un attributo type il cui valore è tel rappresenta un controllo di modifica in testo semplice di una riga per l'immissione di un numero di telefono.

E-mail

<form>
  <label>E-mail: <label>
  <input type="email" name="email">
</form>

Pulsante

<input type="button" value="Button Text">

I pulsanti possono essere utilizzati per attivare azioni sulla pagina, senza inviare il modulo. Puoi anche usare l'elemento <button> se hai bisogno di un pulsante che può essere più facilmente stilizzato o contenere altri elementi:

<button type="button">Button Text</button>

I pulsanti vengono in genere utilizzati con un evento "onclick":

<input type="button" onclick="alert('hello world!')" value="Click Me">

o

<button type="button" onclick="alert('hello world!')">Click Me</button>

attributi

[name]

Il name del pulsante, che viene inviato con i dati del modulo.

[type]

Il type del pulsante.

I valori possibili sono:

submit : il pulsante invia i dati del modulo al server. Questo è l'impostazione predefinita se l'attributo non è specificato o se l'attributo viene modificato dinamicamente in un valore vuoto o non valido.

reset : il pulsante ripristina tutti i controlli ai loro valori iniziali.

button : il pulsante non ha un comportamento predefinito. Può avere script sul lato client associati agli eventi dell'elemento, che vengono attivati ​​quando si verificano gli eventi.

menu : il pulsante apre un menu popup definito tramite l'elemento designato.

[value]

Il valore iniziale del pulsante.

Colore

<input type="color" name="favcolor" value="#ff0000">

url

<input type="url" name="Homepage">

Data

<input type="date" />

DateTime-locale

<input type="datetime-local" />

Immagine

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

Un'immagine. È necessario utilizzare l'attributo src per definire la fonte dell'immagine e l'attributo alt per definire il testo alternativo. È possibile utilizzare gli attributi di altezza e larghezza per definire la dimensione dell'immagine in pixel.

Gamma

<input type="range" min="" max="" step="" />

Mese

<input type="month" />

Tempo

<input type="time" />

19:04:39
08:20:39.04

Settimana

<input type="week" />

Testo

Il tipo di input più semplice e l'input predefinito se non viene specificato alcun type . Questo tipo di input definisce un campo di testo a riga singola con interruzioni di riga automaticamente rimosse dal valore di input. Tutti gli altri personaggi possono essere inseriti in questo. <input> elementi <input> vengono utilizzati all'interno di un elemento <form> per dichiarare controlli di input che consentono agli utenti di immettere dati.

Sintassi

<input type="text">

oppure (senza specificare un type , utilizzando l'attributo predefinito):

<input>

La larghezza predefinita di un campo di testo è di 20 caratteri. Questo può essere modificato specificando un valore per l'attributo size come questo:

<input type="text" size="50">

L'attributo size è nettamente diverso rispetto all'impostazione di una larghezza con CSS. L'uso di una larghezza definisce un valore specifico (in numero di pixel, percentuale dell'elemento genitore, ecc.) Che l'input deve essere sempre ampio. L'utilizzo della size calcola la quantità di larghezza da allocare in base al carattere utilizzato e alla larghezza dei caratteri.

Nota: l' uso dell'attributo size non limita intrinsecamente il numero di caratteri che possono essere inseriti nella casella, ma solo quanto è ampia la casella. Per limitare la lunghezza, vedere Input Validation .

Un campo di input consente solo una riga di testo. Se hai bisogno di un input di testo su più righe per una notevole quantità di testo, usa invece un elemento <textarea> .

Ricerca

<input type="search" name="googlesearch">

DateTime (globale)

L'elemento input con un attributo type il cui valore è " datetime " rappresenta un controllo per l'impostazione del valore dell'elemento su una stringa che rappresenta una data e un'ora globali (con informazioni sul fuso orario).

<fieldset>
   <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

Attributi consentiti:

• attributi globali
• nome
• Disabilitato
• modulo
• genere
• completamento automatico
• messa a fuoco automatica
• elenco
• minimo Massimo
• passo (float)
• sola lettura
• valore richiesto