Attributi del modulo di input in HTML
Come funzionano gli attributi di input in HTML
La funzionalità degli attributi dipende dai valori trasportati da questi attributi. Gli attributi e i loro valori supportati sono descritti qui.
Attributo digitare
Come l'elemento di input è la parte principale delle forme HTML, l'attributo di tipo è l'ingrediente chiave dell'elemento di input. Definisce il tipo di input che ha uno dei seguenti valori.
- testo: usato per descrivere un campo di testo
- numero: usato per creare un campo che accetta valori numerici
- e-mail: usato per inserire un indirizzo email
- colore: Definire il colore di un campo di input
- Casella di controllo: per creare una casella di controllo
- Radio: per creare un pulsante di opzione
- tel: crea un campo che accetta i numeri di telefono
- Immagine: usato per ottenere il file di immagine dall'utente
- nascosto: un campo che non verrà visualizzato sullo schermo dell'utente
- data: crea un campo che accetta la data
- mese: crea un campo che contiene mese e anno da selezionare
- invia: un pulsante che inviare i dati del modulo
- Ripristina: questo crea un pulsante che ripristina tutti i dati del modulo
I suddetti sono i valori più utilizzati dell'attributo di tipo e l'esempio seguente ne fa uso di pochi.
Esempio
Il codice scritto di seguito esegue alcuni valori del tipo attributo.
Quattro diversi tipi di input vengono utilizzati nel codice sopra che utilizza il testo valori, e -mail, invio e reset.
Produzione
Attributo valore
Ogni volta che viene definito un modulo HTML, si consiglia di assegnare un valore iniziale a ciascuno per l'elemento. Per fare ciò, devi usare l'attributo del valore. Il tipo di input deve essere definito per utilizzare questo attributo.
Esempio
Il codice fornito di seguito Attributo Valore pratiche su tipo di input = testo e tipo di input = Invia.
Produzione
Attributo di sola lettura
Questo attributo non consentirebbe la scrittura all'interno del campo di input.
Esempio
Il codice HTML ha fornito pratiche il sola lettura attributo su un campo di input.
Produzione
Il campo di testo mostrato nell'output non consentirà né di scrivere né il clic del mouse farebbe alcuna azione.
Attributo disabilitato
Il tipo di input che trasporta questo attributo visualizzerebbe solo l'area coperta dal campo di input. Tuttavia, non è possibile eseguire alcuna azione su quell'elemento di input.
Esempio
IL Disabilitato L'attributo dell'elemento di input è praticato nel seguente codice
Produzione
Nota: L'attributo di sola lettura viene inviato con il modulo mentre l'attributo disabilitato consente il valore per l'invio.
Attributo modello
Questo attributo accetta espressioni regolari per le quali verrà controllato il valore di quel campo. Viene utilizzato con pochi tipi di input come testo, e -mail, tel, URL, password e data.
Esempio
Nel codice seguente, il file modello L'attributo viene utilizzato su un campo di testo che accetterà solo piccoli alfabeti.
Produzione
Per la verifica dell'attributo pattern, abbiamo cercato di entrare negli alfabeti capitali. Tuttavia, un errore richiesto chiedendo di abbinare il formato richiesto.
Attributo segnaposto
Questo attributo aggiunge caratteri fittizi che aiutano l'utente a sottovalutare lo scopo di quel campo.
Esempio
Il codice menzionato di seguito applica il segnaposto campo attributo per descrivere che il campo di testo ha lo scopo di accettare il tuo nome.
Produzione
Si osserva dall'output che il campo di testo indirizza l'utente a inserire il proprio nome.
Attributo richiesto
I tipi di input che utilizzano gli attributi richiesti sono obbligatori per essere riempiti.
Esempio
Il codice scritto di seguito imposta l'attributo richiesto per un campo di testo.
Produzione
Poiché il campo è obbligatorio da riempire, quindi la presentazione non verrà eseguita fino a quando un testo non viene scritto all'interno del campo di testo.
Attributo AutoFocus
Se la pagina Web viene ricaricata, il campo di input sarà focalizzato in cui viene utilizzato l'attributo AutoFocus.
Esempio
Il seguente codice imposta il file autofocus attributo dell'elemento di input.
Produzione
Come abbiamo usato il autofocus Attributo su un campo di testo, quindi ogni volta che viene caricata la pagina, il cursore continuerà a ticchettare.
Attributo multiplo
Questo attributo consente l'aggiunta di più valori (allegare più file è l'uso principale di questo attributo).
Esempio
Il codice fornito di seguito prende il file file come tipo di input e multiplo L'attributo viene applicato sul tipo di input.
Produzione
L'output mostra che sono allegati tre file che descrivono il funzionamento di più attributi.
Attributo di altezza e larghezza
Questo attributo viene utilizzato con il tipo di immagine e imposta l'altezza e la larghezza dell'immagine.
Esempio
Il tipo di input è impostato su immagine e il altezza larghezza Gli attributi vengono applicati su di esso.
Produzione
L'immagine nell'uscita verrebbe regolata in base al valore di larghezza e altezza.
Attributo min/max
I valori minimi/massimi per vari tipi di input sono specificati da questi attributi. I tipi di input possono includere testo, numero, data, intervallo, mese, ora e settimana.
Esempio
Il codice fornito di seguito utilizza il min E max attributo in cui il tipo di input è impostato su numero.
Produzione
Come mostrato nell'output, il campo numerico non accetta 21 poiché il limite è stato impostato su 20.
Attributo MAXLength
Il numero di caratteri per un tipo di input può essere specificato utilizzando l'attributo MaxLength.
Esempio
Il seguente codice limita il numero di caratteri a 5 in un campo di testo.
Produzione
L'output sopra contiene 5 caratteri nel campo di testo, il campo di testo non consentirà il 6 ° carattere dovuto a lunghezza massima attributo.
Conclusione
L'elemento di input ha un ampio elenco di attributi per creare un modulo HTML caratteristico. Questo post informativo elenca gli attributi dell'elemento di input dei moduli HTML. Gli attributi supportati dall'elemento di input sono, tipo, valore, disabilitato, sola lettura, autofocus, multipli, altezza e larghezza, massima ecc,. Inoltre, ogni attributo viene praticato usando un esempio che aiuterà a sottovalutare la funzionalità.