Home-theater-designers
La raccolta di dati da un utente del sito Web può essere eseguita in diversi modi. I moduli sui siti Web possono avere una funzione semplice come l'iscrizione di un utente a una newsletter o uno scopo più complesso come fungere da modulo di domanda di lavoro.
Tuttavia, una cosa che tutte queste forme semplici e complesse hanno in comune è l'HTML e più specificamente l'HTML etichetta.
Utilizzo del tag modulo
Il tag è un elemento HTML che viene utilizzato come contenitore per racchiudere altri elementi che possono essere considerati come elementi costitutivi per i moduli. Alcuni di questi elementi fondamentali includono il tag, il tag, e il etichetta.
Il tag ha un attributo importante che contribuisce alla sua funzionalità. Questo attributo è chiamato azione e viene utilizzato per identificare il file a cui verranno passati i dati inseriti nel modulo.
Utilizzo dell'esempio di tag
L'esempio sopra mostra come utilizzare il tag form nei tuoi progetti. Uno dei principali vantaggi è che se apri un tag del modulo dovresti ricordarti di chiuderlo. Ciò creerà una struttura del modulo e garantirà anche che i dati inseriti nel modulo vengano elaborati correttamente.
Usando il Tag
Il tag viene utilizzato per descrivere i dati in ogni campo di input in un modulo. Questo tag ha un per attributo, che viene utilizzato per migliorare la funzionalità di un modulo.
Imparentato: I migliori editor HTML online gratuiti per testare il tuo codice
Se l'id assegnato al campo di input corrispondente corrisponde a per valore nella tag, allora quel campo di input verrà evidenziato automaticamente quando fai clic sull'etichetta.
Utilizzo dell'esempio di tag
First Name:
Nell'esempio sopra puoi vedere che il per all'attributo viene assegnato il valore fname . Pertanto, se crei un campo di input con il fname id, questo campo verrà evidenziato ogni volta che fai clic sul Primo Nome etichetta.
Usando il Tag
Nella sua forma più elementare, il tag può essere visto come una casella di testo. Il tag acquisisce i dati dall'utente e una delle sue caratteristiche più cruciali è il genere attributo. Il genere L'attributo indica il tipo di dati che questa casella di testo può raccogliere.
Imparentato: Come creare un modulo impilato in CSS
Ci sono diversi valori che puoi assegnare al genere attributo, ma alcuni di quelli più popolari sono i seguenti.
- Testo
- Numero
- Immagine
- Data
- Casella di controllo
- Radio
- Parola d'ordine
Utilizzo del tag Esempio
First Name:
Il tag nel codice sopra ha tre diversi attributi che hanno ciascuno una funzione univoca. Il genere All'attributo viene assegnato un valore di testo, il che significa che la casella di testo accetterà solo caratteri.
Il ID attributo è un identificatore univoco per la casella di testo ed è importante perché fornisce l'accesso a questo elemento da un file CSS. Il nome l'attributo è anche un identificatore univoco; tuttavia, l'attributo name viene utilizzato per interagire con un elemento dal lato server dello sviluppo.
Il ID e nome agli attributi viene solitamente assegnato lo stesso valore in quanto uno fornisce l'accesso a un elemento dal lato client e l'altro dal lato server.
Utilizzo dell'elemento Casella di controllo
L'elemento checkbox è davvero unico rispetto agli altri elementi che puoi usare con il etichetta. Consente a un utente di selezionare una o più opzioni da un elenco di scelte correlate. Le caselle di controllo sono facilmente identificabili perché sono rappresentate da minuscole caselle quadrate che contengono un segno di spunta quando vengono selezionate.
Utilizzo dell'esempio di elemento casella di controllo
Programming Languages:
Java
JavaScript
Python
Nell'esempio sopra, ciascuno degli elementi checkbox ha un attributo value, e questo è importante perché aiuta a distinguere ogni opzione checkbox dalla raccolta. Pertanto, se un utente seleziona 'Java' dalle opzioni precedenti, i dati lo rifletteranno.
Utilizzo del tag e degli elementi radio
Il tag e gli elementi radio sono simili nel senso che consentono a un utente solo di selezionare un singolo valore alla volta; quindi, si può dire che hanno la stessa funzione. Tuttavia, sono molto diversi nell'aspetto.
L'elemento radio è più vicino all'elemento checkbox in apparenza, tuttavia, con l'elemento radio hai cerchi invece di quadrati.
Il tag produce essenzialmente una casella a discesa, che consente a un utente di selezionare un singolo valore.
Utilizzo dell'esempio di tag ed elemento radio
Sex:
Male
Female
Other
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Utilizzo dell'elemento data
L'elemento data produce una piccola casella di testo che genera un calendario quando viene cliccato. Usando Data come un tipo di input nei moduli salvaguarda contro un utente che potrebbe inserire una data errata, che può potenzialmente portare alla raccolta di dati errati.
Utilizzo dell'esempio dell'elemento data
Utilizzo dell'elemento email e password
Quando uno sviluppatore assegna i valori dell'email o della password all'attributo type di an tag, producono ciascuno una casella di testo identica. Tuttavia, quando inizi a utilizzare queste caselle, le differenze diventano evidenti.
L'elemento email monitora i dati inseriti nella casella di testo e garantisce che ogni invio soddisfi il requisito standard di un indirizzo email; il che significa avere una parte locale, seguita dal simbolo @ e che termina con un dominio.
Utilizzo dell'esempio dell'elemento email
Nell'esempio sopra ti viene presentato un nuovo attributo chiamato segnaposto e questo attributo assume un valore di testo che viene visualizzato nella casella di testo in grigio sbiadito. Questo testo viene utilizzato per indicare i dati che devono essere inseriti nella casella di testo come si vede nell'esempio sopra.
L'elemento password trasforma i caratteri in asterischi mentre vengono immessi nella casella di testo. Pertanto, se lo schermo del tuo computer è visibile ad altre persone, queste non vedranno la password che inserisci.
Utilizzo dell'esempio dell'elemento password
Utilizzo del tag pulsante
In un modulo, di solito ci sono due diversi tipi di pulsanti. Il primo è il pulsante di invio, che sottopone i dati inseriti nel form al valore assegnato all'attributo action (che si trova nella < forma> etichetta).
Pulsante Invia Esempio
Submit
Il secondo tipo di pulsante che viene solitamente utilizzato in un modulo è un pulsante di ripristino, che cancella i dati in un modulo in modo che l'utente possa inserire nuovi dati. Il il tag ha un genere attributo, che viene utilizzato per indicare la funzione del pulsante. Nell'esempio sopra il genere l'attributo è assegnare il valore Sottoscrivi , quindi, un pulsante che ha un genere valore di Ripristina viene utilizzato per ripristinare il modulo.
Esempio di pulsante di ripristino
Reset
Creazione di un modulo
Per creare un semplice form in HTML dovrai racchiudere tutti gli elementi sopra menzionati in a etichetta.
Creazione di un esempio di modulo
Forms
First Name:
Last Name:
Date of birth:
Age:
Gender:
Male
Female
Other
Email Address:
Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer
Programming Languages:
Java
JavaScript
Python
Password:
Confirm Password:
Submit
Reset
Il codice sopra produrrà il seguente modulo:
miglior lanciatore per Android TV Box 2018
Ora puoi creare un modulo semplice in HTML
Questo articolo fornisce tutti gli strumenti per creare un modulo HTML funzionale. Identifica i diversi tag HTML utilizzati nella creazione dei moduli ed esplora i diversi attributi che possono essere utilizzati con questi tag.
Tuttavia, la maggior parte dei moduli che vedi sui siti Web ha un componente aggiuntivo; CSS, che viene utilizzato per dare vita alla forma e renderla più gradevole esteticamente.
Condividere Condividere Tweet E-mail Il cheat sheet delle proprietà essenziali di CSS3Padroneggia la sintassi CSS essenziale con il nostro cheat sheet delle proprietà CSS3.
Leggi Avanti Argomenti correlati- Programmazione
- HTML
- Sviluppo web
- Tutorial sulla programmazione
Kadeisha Kean è uno sviluppatore software full-stack e scrittore tecnico/tecnologico. Ha la spiccata capacità di semplificare alcuni dei concetti tecnologici più complessi; producendo materiale che può essere facilmente compreso da qualsiasi principiante della tecnologia. È appassionata di scrivere, sviluppare software interessanti e viaggiare per il mondo (attraverso documentari).
Altro da Kadeisha KeanIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti