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.

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

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> 

Produzione:

Inserisci il tipo 'testo':

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

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> 

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.

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> 

Produzione:

Inserisci il tipo di 'invio':

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> 

Produzione:

Tipo di input 'reset':

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

Produzione:

Ingresso di tipo 'radio'

Seleziona gentilmente il tuo colore preferito

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> 

Produzione:

Inserisci il tipo 'casella di controllo'.

Modulo di registrazione

Seleziona gentilmente i tuoi sport preferiti

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:

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: 

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'.

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 

Produzione:

Inserisci i tipi di 'colore':

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> 

Produzione:

Inserisci il tipo 'data'.

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> 

Produzione:

Inserisci il tipo 'datetime-local'.

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> 

Produzione:

Inserisci il tipo 'e-mail'.

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

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: 

Produzione:

Inserisci il tipo 'mese':

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: 

Produzione:

Inserisci il tipo 'numero'.

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> 

Produzione:

Inserisci il tipo 'URL'.

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> 

Produzione:

Inserisci il tipo 'settimana'.

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: 

Produzione:

Inserisci il tipo di 'ricerca'.

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> 

Produzione:

Inserisci il tipo 'tel'.

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.