HTML5 - Tutorial 20: FORMS | Input Types in HTML

💻 #HTML5 - Tutorial 20: Forms in HTML i tipi di input

In questo #tutorial del corso di HTML (in italiano) parleremo di tipi di #input in HTML5

▶ input type="button" definisce un pulsante

▶ input type="checkbox" definisce una casella di controllo .

Le caselle di controllo consentono a un utente di selezionare ZERO o PIÙ opzioni di un numero limitato di scelte.

▶ input type="color" definisce un campo di input che deve contenere un colore.

A seconda del supporto del browser, nel campo di input può essere visualizzato un selettore di colori.

▶ input type="date" definisce un campo di input che deve contenere una data.

A seconda del supporto del browser, nel campo di immissione può essere visualizzato un selettore di date.

▶ input type="datetime-local" specifica un campo di immissione di data e ora, senza fuso orario.

A seconda del supporto del browser, nel campo di immissione può essere visualizzato un selettore di date.

▶ input type="email" definisce campi di input che devono contenere un indirizzo e-mail.

A seconda del supporto del browser, l'indirizzo e-mail può essere convalidato automaticamente al momento dell'invio.

Alcuni smartphone riconoscono il tipo di e-mail e aggiungono ".com" alla tastiera per corrispondere all'input e-mail.

▶ input type="file" definisce un campo di selezione file e un pulsante "Sfoglia" per il caricamento dei file.

▶ input type="hidden" definisce un campo di input nascosto (non visibile a un utente) .

Un campo nascosto consente agli sviluppatori Web di includere dati che non possono essere visualizzati o modificati dagli utenti quando viene inviato un modulo.

Un campo nascosto spesso memorizza quale record del database deve essere aggiornato quando il modulo viene inviato.

▶ input type="image" definisce un'immagine come pulsante di invio .

Il percorso dell'immagine è specificato src nell'attributo.

▶ input type="month" consente all'utente di selezionare un mese e un anno.

A seconda del supporto del browser, nel campo di immissione può essere visualizzato un selettore di date.

▶ input type="number" definisce un campo di input numerico .

Puoi anche impostare restrizioni sui numeri accettati.

▶ input type="password" definisce un campo password.

I caratteri vengono mascherati (mostrati come asterischi o pallini).

▶ input type="radio" definisce un pulsante di opzione.

I pulsanti di opzione consentono a un utente di selezionare SOLO UNA tra un numero limitato di scelte.

▶ input type="range" definisce un controllo per l'inserimento di un numero il cui valore esatto non è importante (attraverso uno slider).

L'intervallo predefinito è compreso tra 0 e 100.
Tuttavia, puoi impostare restrizioni sui numeri accettati con gli attributi min, max e step

▶ input type="reset" definisce un pulsante di ripristino che ripristinerà tutti i valori del modulo ai valori predefiniti

▶ input type="search" viene utilizzato per i campi di ricerca (un campo di ricerca si comporta come un normale campo di testo).

▶ input type="submit" definisce un pulsante per l' invio dei dati del modulo a un gestore del modulo.

▶ input type="tel" viene utilizzato per i campi di input che devono contenere un numero di telefono.

▶ input type="text" definisce un campo di input di testo a riga singola

▶ input type="time" consente all'utente di selezionare un orario (nessun fuso orario).

A seconda del supporto del browser, nel campo di immissione può essere visualizzato un time picker.

▶ input type="url" viene utilizzato per i campi di input che devono contenere un indirizzo URL.

A seconda del supporto del browser, il campo dell'URL può essere convalidato automaticamente al momento dell'invio.

Alcuni smartphone riconoscono il tipo di URL e aggiungono ".com" alla tastiera per corrispondere all'input dell'URL.

▶ input type="week" consente all'utente di selezionare una settimana e un anno.

A seconda del supporto del browser, nel campo di immissione può essere visualizzato un selettore di date.

Buona visione

💼 Ing. Francesca Martorana