logo

TechCodeview

Tipi di input del modulo HTML

In HTML è un elemento importante del modulo HTML. L'attributo 'tipo' dell'elemento input può essere di vari tipi, che definisce il campo informazioni. Ad esempio, fornisce una casella di testo.

Java Ciao mondo esempio

Di seguito è riportato un elenco di tutti i tipi di elementi HTML.

tipo=' ' Descrizione
testo Definisce un campo di immissione testo di una riga
parola d'ordine Definisce un campo di immissione della password su una riga
invia Definisce un pulsante di invio per inviare il modulo al server
Ripristina Definisce un pulsante di ripristino per reimpostare tutti i valori nel modulo.
Radio Definisce un pulsante di opzione che consente di selezionare un'opzione.
casella di controllo Definisce le caselle di controllo che consentono di selezionare più opzioni nel modulo.
pulsante Definisce un semplice pulsante che può essere programmato per eseguire un'attività su un evento.
file Definisce la selezione del file dalla memoria del dispositivo.
Immagine Definisce un pulsante di invio grafico.

HTML5 ha aggiunto nuovi tipi sull'elemento. Di seguito è riportato l'elenco dei tipi di elementi di HTML5

tipo=' ' Descrizione
colore Definisce un campo di input con un colore specifico.
data Definisce un campo di input per la selezione della data.
datetime-locale Definisce un campo di input per inserire una data senza fuso orario.
e-mail Definisce un campo di input per inserire un indirizzo email.
mese Definisce un controllo con mese e anno, senza fuso orario.
numero Definisce un campo di input per inserire un numero.
URL Definisce un campo per l'immissione dell'URL
settimana Definisce un campo per inserire la data con settimana-anno, senza fuso orario.
ricerca Definisce un campo di testo a riga singola per l'immissione di una stringa di ricerca.
tel Definisce un campo di input per inserire il numero di telefono.

Di seguito è riportata la descrizione dei tipi di elemento con esempi.

1. :

Gli elementi di tipo 'testo' vengono utilizzati per definire un campo di testo di input a riga singola.

Esempio:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p>
Provalo adesso

Produzione:

Inserisci il tipo 'testo':

IL 'testo' campo definisce un campo di testo di input a riga singola.

Inserisci il nome

Inserisci il cognome

Nota: La lunghezza massima predefinita dei caratteri è 20.

2. :

L'elemento di tipo 'password' consente a un utente di inserire la password in modo sicuro in una pagina web. Il testo inserito nell'archivio password viene convertito in '*' o '.', in modo che non possa essere letto da un altro utente.

Esempio:

 Enter User name <br> <br> Enter Password <br> <br> <br>
Provalo adesso

Produzione:

Inserisci il tipo di 'password':

IL 'parola d'ordine' Il campo definisce un campo per l'immissione della password su una riga singola per inserire la password in modo sicuro.

Inserire username

Inserire la password


3. :

L'elemento di tipo 'submit' definisce un pulsante di invio per inviare il modulo al server quando si verifica l'evento 'click'.

Esempio:

 Enter User name <br> <br> Enter Password <br> <br> <br>
Provalo adesso

Produzione:

Inserisci il tipo di 'invio':

Inserire username

Inserire la password


Dopo aver fatto clic sul pulsante di invio, questo invierà il modulo al server e reindirizzerà la pagina a azione valore. Impareremo l'attributo 'azione' nei capitoli successivi

4. :

Anche il tipo 'reset' è definito come pulsante ma quando l'utente esegue un evento clic, per impostazione predefinita reimposta tutti i valori immessi.

Esempio:

 User id: Password: <br> <br>
Provalo adesso

Produzione:

Tipo di input 'reset':

ID utente: Password:

Prova a modificare i valori di input di ID utente e password, quindi quando fai clic su Ripristina, verranno ripristinati i campi di input con i valori predefiniti.

5. :

Il tipo 'radio' definisce i pulsanti di opzione, che consentono di scegliere un'opzione tra un insieme di opzioni correlate. È possibile selezionare solo un'opzione del pulsante di opzione alla volta.

Esempio:

Seleziona gentilmente il tuo colore preferito

Rosso
blu
verde
rosa
Provalo adesso

Produzione:

Ingresso di tipo 'radio'

Seleziona gentilmente il tuo colore preferito

Rosso
blu
verde
rosa

6. :

Il tipo 'casella di controllo' viene visualizzato come caselle quadrate che possono essere selezionate o deselezionate per selezionare le scelte tra le opzioni fornite.

Nota: i pulsanti di opzione sono simili alle caselle di controllo, ma esiste un'importante differenza tra i due tipi: i pulsanti di opzione consentono all'utente di selezionare solo un'opzione alla volta, mentre le caselle di controllo consentono all'utente di selezionare da zero a più opzioni alla volta .

Esempio:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br>
Provalo adesso

Produzione:

Inserisci il tipo 'casella di controllo'.


Modulo di registrazione

Inserisci il tuo nome:

Seleziona gentilmente i tuoi sport preferiti

Cricket
Tennis
Calcio
Baseball
Badminton

7. :

Il tipo 'pulsante' definisce un semplice pulsante, che può essere programmato per controllare funzionalmente qualsiasi evento, ad esempio un evento clic.

tori contro bue

Nota: funziona principalmente con JavaScript.

Esempio:
Provalo adesso

Produzione:

Tipo di input 'pulsante'.

Fare clic sul pulsante per vedere il risultato:

Nota: nell'esempio sopra abbiamo utilizzato l''avviso' di JS, che imparerai nel nostro tutorial JS. Viene utilizzato per mostrare una finestra pop.

8. :

L'elemento di tipo 'file' viene utilizzato per selezionare uno o più file dalla memoria del dispositivo dell'utente. Una volta selezionato il file e dopo l'invio, questo file può essere caricato sul server con l'aiuto del codice JS e dell'API del file.

Esempio:

 Select file to upload:
Provalo adesso

Produzione:

confronto delle stringhe Java

Inserisci il tipo di 'file'.

Possiamo scegliere qualsiasi tipo di file finché non lo specifichiamo! Il file selezionato verrà visualizzato accanto all'opzione 'scegli file'.

Seleziona il file da caricare:

9. :

Il tipo 'immagine' viene utilizzato per rappresentare un pulsante di invio sotto forma di immagine.

Esempio:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br>

Elemento Types HTML5 appena aggiunto

1. :

Il tipo 'colore' viene utilizzato per definire un campo di input che contiene un colore. Consente all'utente di specificare il colore tramite l'interfaccia visiva del colore su un browser.

Nota: il tipo 'colore' supporta solo il valore del colore in formato esadecimale e il valore predefinito è #000000 (nero).

Esempio:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick
Provalo adesso

Produzione:

Inserisci i tipi di 'colore':

Scegli il tuo colore preferito:

Fare clic su

Fare clic verso il basso

Nota: Il valore predefinito del tipo 'colore' è #000000 (nero). Supporta solo il valore del colore in formato esadecimale.

2. :

L'elemento di tipo 'date' genera un campo di input che consente all'utente di inserire la data in un determinato formato. Un utente può inserire la data tramite il campo di testo o tramite l'interfaccia di selezione della data.

Esempio:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br>
Provalo adesso

Produzione:

Inserisci il tipo 'data'.

Seleziona la data di inizio e di fine:

Data d'inizio:

Data di fine:

3. :

L'elemento di tipo 'datetime-local' crea un file di input che consente all'utente di selezionare la data e l'ora locale nell'ora e nel minuto senza informazioni sul fuso orario.

Esempio:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br>
Provalo adesso

Produzione:

Inserisci il tipo 'datetime-local'.

Seleziona il programma dell'incontro:

Seleziona data e ora:

4. :

Il tipo 'e-mail' crea un campo di input che consente all'utente di inserire l'indirizzo e-mail con la convalida del modello. Gli attributi multipli consentono a un utente di inserire più di un indirizzo email.

Esempio:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b>
Provalo adesso

Produzione:

Inserisci il tipo 'e-mail'.

Inserisci il tuo indirizzo email

Nota: L'utente può anche inserire più indirizzi e-mail separandoli con virgole o spazi bianchi come segue:

Inserisci più indirizzi email

5. :

Il tipo 'mese' crea un campo di input che consente all'utente di inserire facilmente mese e anno nel formato 'MM, AAAA' dove MM definisce il valore del mese e AAAA definisce il valore dell'anno. Nuovo

Esempio:

 Enter your Birth Month-year:
Provalo adesso

Produzione:

Inserisci il tipo 'mese':

Inserisci il tuo mese-anno di nascita:

6. :

Il numero del tipo di elemento crea un campo di input che consente all'utente di inserire il valore numerico. Puoi anche limitare l'immissione di un valore minimo e massimo utilizzando gli attributi min e max.

Esempio:

 Enter your age:
Provalo adesso

Produzione:

Inserisci il tipo 'numero'.

Inserisci la tua età:

Nota: Permetterà di inserire un numero compreso tra 50 e 80. Se desideri inserire un numero diverso dall'intervallo, verrà visualizzato un errore.

7. :

L'elemento di tipo 'url' crea un campo di input che consente all'utente di inserire l'URL.

jquery questo clic

Esempio:

 Enter your website URL: <br>
Provalo adesso

Produzione:

Inserisci il tipo 'URL'.

Inserisci l'URL del tuo sito web:

8. :

Il tipo settimana crea un campo di input che consente all'utente di selezionare una settimana e un anno dal calendario a discesa senza fuso orario.

Esempio:

 <b>Select your best week of year:</b> <br> <br>
Provalo adesso

Produzione:

Inserisci il tipo 'settimana'.

Seleziona la tua migliore settimana dell'anno:

9. :

Il tipo 'ricerca' crea un campo di input che consente all'utente di inserire una stringa di ricerca. Questi sono funzionalmente simmetrici al tipo di input del testo, ma possono avere uno stile diverso.

Esempio:

 Search here:
Provalo adesso

Produzione:

Inserisci il tipo di 'ricerca'.

Cerca qui:

10. :

L'elemento di tipo ?tel? crea un campo di input per inserire il numero di telefono. Il tipo 'tel' non ha una convalida predefinita come l'e-mail, poiché il modello del numero di telefono può variare in tutto il mondo.

Esempio:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br>
Provalo adesso

Produzione:

Inserisci il tipo 'tel'.

Inserisci il tuo numero di telefono (nel formato xxx-xxx-xxxx):

Nota: Qui stiamo utilizzando due attributi 'modello' e 'richiesto' che consentiranno all'utente di inserire il numero nel formato specificato ed è necessario inserire il numero nel campo di input.