In questo articolo, introdurrò alcuni tag HTML utilizzati per creare il modulo di immissione dati più comunemente utilizzato. Questi tag li ho introdotti molto in questa categoria di apprendimento HTML e CSS.

Prima di iniziare, devi capire qual è il concetto di form data? Perché abbiamo bisogno di usare i moduli e quando dovremmo usarli? Quali tag di input devono essere utilizzati durante la creazione del modulo? Dai, cominciamo.

1. Che cosa sono i dati del modulo?

Il sito Web è considerato un software che aiuta a connettersi con tutti gli utenti del mondo. Tutti i dati che vedi sul sito web vengono inviati da un indirizzo IP reale che esiste su Internet.

Quando visiti un sito web, significa che hai inviato una richiesta per l'indirizzo IP corrispondente per quel dominio ( lo chiamiamo server ). Il server ti restituirà una serie di dati in formato HTML. E la domanda è cosa succede se il lato server ha bisogno di ottenere le tue informazioni? Molto semplicemente, l'HTML ci fornisce una serie di tag che aiutano il server a ottenere i dati dall'utente, che sono i tag del gruppo di moduli .

Quindi, i dati del modulo sono un modulo costituito da un insieme di codici HTML appartenenti al gruppo di moduli come: modulo di contatto, modulo di commento, modulo d'ordine … Utilizza tag come: input, seleziona, opzione, area di testo, pulsante per consentire agli utenti per inserire i dati e inviarli al server.

2. Tag HTML che formano moduli più comunemente usati

Ora introdurrò prima i tag, quindi creeremo un modulo nella terza parte.

Usa il tag del modulo per circondare i moduli

Tutti i moduli devono iniziare con un tag modulo, che circonda tutti gli altri tag. Ha due proprietà importanti: method e action . Anche se stai facendo l'interfaccia, dovresti anche seguire questa regola. Quanto al suo utilizzo, lo scopriremo più avanti.

 <form method="post" action="url"> </form>

Utilizzare il tag di input per creare una casella di input

Il tag di input viene utilizzato più spesso. È disponibile in vari formati come:

• Una casella di inserimento dati
• Caselle di controllo
• Scatole radiofoniche

Per specificare il tipo, utilizziamo l'attributo type. Vedere l'esempio seguente per una migliore comprensione.

 <form method="post" action="url"> Input: <input type="text" value=""/> <br/> Radio: <input type="radio" value=""/> <br/> Checkbox: <input type="checkbox" value=""/> </form>

Usa il tag textarea per ottenere big data

Il tag textarea funziona come il tag input type=text . Tuttavia, in termini di visualizzazione, sarà più ampio e invece dei dati visualizzati su una riga, verranno visualizzati su più righe.

 <form method="post" action="url"> <textarea cols="20" rows="10"></textarea> </form>

Usa il tag di input per creare il pulsante di invio

Il pulsante di invio è molto importante, aiuta il browser a sapere quando iniziare a inviare dati al server. Per creare un pulsante di invio, utilizziamo il tag di input come segue.

 <form method="post" action="url"> <input type="submit" value="Liên hệ"/> </form>

Usa il tag select per creare una casella combinata

Questo è il formato finale di questa lezione. Per creare un elenco a discesa di opzioni, utilizzare il tag select.

 <form method="post" action="url"> <select> <option> -- Hãy chọn -- </option> <option>Tùy chọn 1</option> <option>Tùy chọn 2</option> <option>Tùy chọn 3</option> <option>Tùy chọn 4</option> </select> </form>

Sopra c'è una raccolta di tutti i tag HTML più comunemente usati. Ora facciamo un piccolo esercizio insieme.