Tipi di input in HTML
Questo articolo presenta una panoramica completa dei seguenti tipi di input:
- Testo
- Invia
- Parola d'ordine
- Pulsante
- Radio
- Casella di controllo
- File
- Colore
- Data
- Tempo
- DateTime-Local
- Settimana
- Mese
- Tel
Questo articolo presenterà una guida completa per tutti i tipi di input sopra menzionati, quindi iniziamo!
Digitare il testo
Il tipo di testo determina un campo di testo a linea singola.
Esempio
Lo snippet indicato di seguito crea un campo di input del tipo di testo all'interno di un tag modulo:
Lo snippet di codice sopra genererà l'output qualcosa del genere:
L'output verifica che il campo di input prenda i dati del tipo di testo.
Tipo Invia
Il pulsante Tipo di invio invia i dati del modulo all'URL specificato all'interno del tag.
Esempio
Lo snippet seguente mostra come funziona il tipo di invio:
Il codice sopra specifica un URL di un file HTML nel tag del modulo, inoltre crea un pulsante e un campo di testo. Facendo clic sul pulsante di invio invierà i dati inseriti nel campo di testo al forme.html pagina.
Prima di fare clic sul pulsante siamo sul formattributes.html Pagina, quindi, l'output dello snippet di codice sopra sarà così:
Facendo clic sul pulsante visualizzerà i dati inseriti dall'utente su forme.html pagina:
Ecco come funziona il pulsante di invio in HTML.
Digita l'email
Viene utilizzato per prendere l'indirizzo e -mail dell'utente e se qualcuno inserisce i dati irrilevanti, il tipo di posta elettronica non invierebbe tali dati:
Il seguito sarà l'output di questo codice:
Inserisci password
Il tipo di password viene utilizzato per determinare un campo password:
Il pezzo di codice sopra produce il seguente output:
Pulsante digitare
Viene utilizzato per creare un pulsante cliccabile:
La riga di codice sopra mostra inizialmente il seguente output:
Tipo radio
Viene utilizzato per creare un pulsante di opzione che consenta a un utente di scegliere un'opzione con più opzioni:
Il codice sopra fornirà il seguente output:
Digitare la casella di controllo
Il tipo di casella di controllo viene utilizzato per creare una casella di controllo che consente a un utente di selezionare una singola o più opzioni:
Lo snippet sopra dato mostra la seguente uscita:
L'output autentica il funzionamento della casella di controllo.
Tipo di file
Per allegare un file su un sito Web è possibile utilizzare il tipo di input del file:
Inizialmente visualizza "nessun file scelto":
Quando un utente seleziona un file, il nome del file verrà visualizzato adiacente al "scegli il file" opzione:
Tipo di colore
Questo tipo di input viene utilizzato per creare un raccoglitore a colori. Il valore predefinito è nero, tuttavia, un utente può scegliere un colore utilizzando i valori di colore RGB:
Il pezzo di codice sopra fornisce il seguente output:
Fare clic sul colore mostrerà consentirà a un utente di scegliere un colore a sua scelta:
Tipo di data
Viene utilizzato per creare un campo Tipo di data che consente a un utente di scegliere una data:
Il seguito sarà l'output per lo snippet di codice sopra:
Un utente può scegliere una data come segue:
Tipo di tempo
Viene utilizzato per creare un campo di tipo tempo che consente a un utente di scegliere un tempo. Il tipo di input di tempo può essere implementato allo stesso modo del tipo di data:
Inizialmente, le righe precedenti del codice forniranno il seguente output:
Un utente può scegliere un tempo a scelta:
DateTime-Local
Può essere utilizzato per specificare la data e l'ora contemporaneamente:
L'output dello snippet di codice sopra sarà così:
Un utente può scegliere contemporaneamente la data e l'ora come mostrato di seguito:
Settimana
Viene utilizzato per selezionare una settimana, lo snippet seguente fornirà una migliore comprensione:
Lo snippet di seguito mostra l'uscita delle righe di codice sopra:
Mese
Viene utilizzato per selezionare un mese, lo snippet di codice seguente descrive il tipo di input del mese:
L'output dello snippet sopra dato sembrerà così:
Tipo di tel
Viene utilizzato per prendere un numero di telefono dall'utente. Possiamo specificare un modello specifico che deve essere seguito. Lo snippet seguente mostra il funzionamento del tipo di input Tel:
Se qualcuno inserisce un modello irrilevante, verrà visualizzato un messaggio di avviso per immettere il formato richiesto:
L'output verifica che il "Tel" Il tipo di input funziona correttamente.
Conclusione
Il tag fornisce controlli di input per accettare i dati dall'utente in vari modi. In HTML diversi tipi di input possono essere utilizzati per prendere l'input dall'utente, ad esempio testo, e -mail, password, pulsante, invio e molti altri. Tutti questi tipi di input escono con diverse funzionalità. Questo articolo fornisce una panoramica completa di alcuni tipi di input utilizzati più frequentemente e considerato più esempi per una migliore comprensione.