Formare elementi in HTML
Gli elementi del modulo HTML aiutano a creare una forma con varie funzionalità. Un modulo di input include input, output, pulsante, seleziona, textErais, etichetta, datatalist, fieldsettc,. Tra questi, il tag di input è l'elemento più usato ed è considerato la parte fondamentale di un modulo HTML. Mentre altri elementi della forma hanno la propria funzionalità. Tenendo conto degli elementi del modulo, questo articolo serve i seguenti risultati di apprendimento.
- Informazioni di base e utilizzo di ciascun elemento del modulo
- vari esempi per ogni elemento
Formare elementi in HTML
Questa sezione fornisce un elenco di vari elementi di forma che hanno un ruolo chiave nella generazione di moduli. Scaviamo in loro uno per uno:
Elemento di input
Questo elemento è considerato come l'elemento principale delle forme HTML ed è abbastanza impossibile tracciare una forma che non contiene alcun elemento di input. La funzionalità degli elementi di input dipende dall'insieme di attributi da loro supportati. Ad esempio, l'attributo TIPO definisce il tipo (casella di radio, la casella di controllo) del campo di input.
Esempio
Utilizzando il codice HTML, le seguenti righe di codice creano un campo di testo con l'elemento di input.
Accanto all'elemento di input, abbiamo usato un attributo (segnaposto) dell'elemento di input.
Produzione
L'output mostra che il campo di testo viene creato utilizzando l'elemento di input. Come abbiamo usato l'attributo segnaposto, il testo fittizio viene visualizzato anche nella casella di testo.
Elemento etichetta
L'elemento dell'etichetta definisce lo scopo di vari elementi di forma agli utenti finali. Un elemento dell'etichetta può essere dichiarato utilizzando la seguente sintassi.
Come la maggior parte degli elementi HTML, il contenuto per l'elemento etichetta è scritto tra i tag.
Esempio:
L'uso dell'elemento etichetta viene elaborato utilizzando il seguente codice.
Viene creata un'etichetta per associarla a un campo di testo che ottiene il nome dell'utente. IL per attributo (dell'elemento etichetta) e id (dell'elemento di input) devono avere gli stessi valori in modo che possano essere legati insieme.
Produzione
L'output contiene un'etichetta che ti indirizza ad inserire il tuo nome nella casella di testo.
Seleziona l'elemento
L'elemento Select crea un elenco a discesa di varie opzioni. L'elemento genera più scelte in un elenco a discesa.
Esempio
Il seguente codice pratica l'elemento seleziona per creare un elenco a discesa.
Il codice sopra è descritto come,
- In primo luogo, viene dichiarato un tag dell'etichetta (solo per guidare l'utente finale).
- Il tag select è definito e contiene tre opzioni tag
Produzione
L'output mostra un'etichetta, un menu a discesa e un pulsante.
Elemento textrea
L'elemento textrea crea un campo di testo che consente di scrivere più righe. Tuttavia, l'elemento di input può creare un campo di testo ma supporta solo gli ingressi a linea singola.
Esempio
Il codice fornito di seguito mostra l'utilizzo dell'elemento textarea
Il codice sopra crea un'etichetta per un campo di testo e il campo di testo utilizzando l'elemento textrea. Inizialmente, viene esercitata l'altezza e la larghezza predefinita dell'elemento textreatea. Tuttavia, è possibile utilizzare l'attributo di altezza e larghezza per ottenere la dimensione personalizzata di un elemento textarea.
Produzione
Elemento pulsante
È possibile creare un pulsante attuabile utilizzando l'elemento pulsante dei moduli HTML.
Esempio
Il codice scritto di seguito pratica l'elemento pulsante
Il codice scritto sopra crea due pulsanti usando gli elementi dei pulsanti.
Produzione
Elemento in campo
Questo elemento viene utilizzato per raggruppare i molteplici elementi di una forma in un singolo campo.
Esempio
Il codice sopra crea un fieldset utilizzando l'elemento fieldset in HTML e la sua didascalia è definita usando l'elemento legenda. L'elemento FieldSet contiene due elementi di input che ricevono il nome e l'e -mail dell'utente.
Produzione
Elemento Datalist
L'elemento DataList estende la funzionalità dell'elemento di input. L'elemento DataList ti fornisce un elenco di voci predefinite per scegliere la voce da esse (oppure puoi inserire anche il tuo valore).
Esempio
Il codice fornito di seguito pratichi l'uso dell'elemento Datalist
Nel codice sopra,
- Viene creato un elenco di input e quindi viene dichiarato l'elemento Datalist
- All'interno dell'elemento Datalist, il tag viene utilizzato per creare opzioni per l'elemento Datalist.
Produzione
Elemento di output
Questo elemento viene utilizzato per visualizzare l'output di qualsiasi azione (presentazione del modulo).
Esempio
Il codice seguente pratica l'attributo di output per ottenere la somma di due campi numerici.
Nel codice sopra,
- Due tipi di input = "numero"Sono definiti con ID a e b rispettivamente
- IL produzione Element considera entrambi gli ID per l'elaborazione
- IL OnInput Evento dell'elemento modulo aggiunge sia il numero (quando vengono inseriti)
Produzione
Attraversando questo articolo, avresti imparato a creare un modulo HTML caratteristico.
Conclusione
Gli elementi del modulo sono le principali parti interessate nella creazione di una forma dettagliata. Gli elementi del modulo includono input, etichetta, textarea, pulsante e molti altri. Questo articolo elenca gli elementi del modulo in HTML e viene fornito anche un esempio di ciascun elemento. È possibile creare un semplice modulo HTML con l'aiuto di alcuni elementi. Tuttavia, se si desidera una forma con funzionalità dettagliate, vengono forniti un sacco di elementi di forma HTML per esercitarsi in questa guida.