Html <input> Attributi tag | Spiegato
- Attributo digitare
- Attributo nome
- Attributo min e max
- Attributo AutoFocus
- Attributo disabilitato
- Attributo segnaposto
- Attributo readonly
- Attributo richiesto
- Attributo multiplo
- Attributo dimensione
- Attributo di completamento automatico
Questo articolo presenterà una panoramica completa di tutti gli attributi sopra menzionati. Procediamo!
Attributo digitare
Come suggerisce il nome stesso, l'attributo di tipo nel tag determina il tipo di input, il valore di default dell'attributo di tipo è il testo. Possiamo assegnare valori diversi all'attributo di tipo come password, e -mail, ecc. La sintassi di base dell'attributo di tipo è mostrata nella figura seguente:
Vari diversi sono specificati per l'attributo di tipo in tag. Il comportamento dell'attributo di tipo sarà diverso per valori diversi.
Attributo nome
Specifica il nome dell'elemento di input, seguente sarà la sintassi di base dell'attributo del nome:
Non influirebbe sull'output invece l'attributo Nome indica al server sul campo di input.
Attributo min e max
Questi attributi vengono utilizzati per specificare i valori minimi e massimi dell'elemento di input. Lo snippet seguente mostra la sintassi degli attributi Min e Max:
Attributo AutoFocus
L'attributo AutoFocus determina che un elemento dovrebbe ottenere AutoFocus quando la pagina si carica e la figura seguente mostra la sintassi dell'attributo AutoFocus:
Attributo disabilitato
L'attributo disabilitato ci consente di disabilitare un elemento, in tal caso l'utente non sarebbe in grado di utilizzare o fare clic su quel campo:
Esempio
Consideriamo il codice seguente che implementa tutti gli attributi sopra menzionati per diversi campi:
Lo snippet sopra crea più campi di input, l'attributo AutoFocus è abilitato nel primo campo, quindi ogni volta che cariciamo la pagina il cursore indicherà quel campo. Non saremmo in grado di fare clic sul secondo campo perché contiene l'attributo disabilitato. Il terzo campo di input è un campo di tipo numerico e specifichiamo gli attributi Min e Max in modo che prenda il valore solo tra 20 e 60:
L'output verifica che tutti gli attributi funzionino correttamente.
Attributo segnaposto
Fornisce un suggerimento sul valore atteso del campo di input. La sintassi di base dell'attributo segnaposto sarà la seguente:
Tutto ciò che specifichiamo all'interno del segnaposto verrà visualizzato come un suggerimento come mostrato di seguito:
Attributo readonly
Determina che il campo è di sola lettura, il che significa che il campo non può essere modificato. La sintassi dell'attributo di sola lettura è mostrata nella figura seguente:
Specifichiamo valore = "Michael" e abilitiamo l'attributo di sola lettura. Di conseguenza, non saremmo in grado di modificare il valore di quel campo di input:
Attributo richiesto
L'attributo richiesto determina che il modulo non può essere inviato se il campo di input non viene riempito. La sintassi di base dell'attributo richiesto è mostrata nel seguente frammento:
Se facciamo clic sul pulsante di invio senza riempire il campo di input, otterremo il seguente risultato:
Attributo multiplo
Ci consente di inserire più valori e viene utilizzato principalmente con il tipo di input "file" in cui consente a un utente di scegliere più file. Snippet di codice sotto, mostra la sintassi dell'attributo "multiplo":
Sopra lo snippet genera il seguente output:
Attributo dimensione
Viene utilizzato per impostare la dimensione (larghezza) del campo di input, la sintassi dell'attributo dimensione è mostrata nello snippet di seguito:
La dimensione predefinita dei campi di input è di 20 caratteri e abbiamo modificato la dimensione del primo campo di input come 35, quindi genererà il seguente output:
Attributo di completamento automatico
Abilitazione dell'attributo di completamento automatico consente a un browser di prevedere e completare automaticamente il campo di input. Lo snippet di seguito è riportato come utilizzare l'attributo di completamento automatico nel tag di input:
Sopra il codice-snippet mostra il seguente output:
L'output ha verificato che se AutoComplete = "ON", il browser suggerisce i dati già immessi.
Conclusione
Gli attributi del tag vengono utilizzati per controllare il comportamento dei campi di input del modulo E.G. L'attributo di tipo determina il tipo di input, l'attributo AutoFocus viene utilizzato per concentrarsi sull'elemento specifico sulla caricamento della pagina. Abilitazione dell'attributo di completamento automatico fornisce i dati già inseriti come suggerimenti e attributo multipli ci consente di aggiungere più file. Questo articolo ha dimostrato una guida dettagliata per la profonda comprensione degli attributi tag HTML.