Il tag del modulo in HTML
In questo articolo impareremo il tag del modulo in HTML, questo è un tag utilizzato per circondare i campi di input, aiutare le persone attraverso le operazioni di input, inviare dati al server.
La maggior parte dei siti web ha le caratteristiche di registrazione, login, contatto, ordine, pagamento carrello… tutte queste funzioni devono utilizzare il form tag.
1. A cosa serve il tag del modulo in HTML?
Il tag del modulo crea un modulo HTML che l'utente può immettere, quindi invia i dati al server creando un'azione di invio del modulo. All'interno del modulo può contenere i seguenti elementi:
- <immissione>
- <area di testo>
- <pulsante>
A seconda di ciascuna interfaccia, scegli la carta appropriata. Con HTML5, sono forniti molti tag di input, come vediamo nell'esempio seguente, ma saranno tutti elementi di tag figlio del tag del modulo (la struttura del tag del modulo abbraccerà l'intera struttura di input).
Sintassi per scrivere il tag del modulo:
<form method="" action=""></form>in cui :
- azione : il percorso a cui il modulo deve inviare i dati.
- metodo – metodo per inviare dati tra cui: POST, GET.
Il tag del modulo in html ha ancora gli attributi di base come style, id, class. Tuttavia, l'id o la classe viene utilizzato principalmente per definire lo stile del tag del modulo, se presente, i due attributi più importanti del modulo sono action e method .
In breve : se è necessario inviare dati dal lato client al server, è necessario utilizzare il tag form in combinazione con i tag di input per inserire i dati, tramite metodi POST o GET.
2. Come utilizzare il tag del modulo in HTML
Esempio: utilizzo del tag form per creare un'interfaccia di immissione dati:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> </head> <body> <form method="GET" action=""> <div> <label for="inputvanban">text</label> <input id="inputvanban" name="vanban" type="text" placeholder="nhap van ban vao" required /> </div> <div> input text regex <input type="text" name="email" placeholder="nhap email vao" pattern="([a-z0-9_.-]+)@([da-z.-]+).([az.]{2,6})" required /> </div> <div> input number <input type="number" /> </div> <div> input link <input type="url" autofocus /> </div> <div> input email <input type="email" required /> </div> <div> input range <input type="range" min="0" max="100" /> </div> <div> input date <input name="ngaythang" type="date" min="2022-03-06"/> </div> <div> input date <input type="week"/> </div> <div> input month <input type="month"/> </div> <div> input time <input type="time"/> </div> <div> input date time <input type="datetime-local"/> </div> <div> input date time <input type="color"/> </div> <h4>Nhap lua chon radio</h4> <input id="opt1" name="monhoc" type="radio" value="html"/> <label for="opt1">html</label> <input id="opt2" name="monhoc" type="radio" value="css"/> <label for="opt2">css</label> <input id="opt3" name="monhoc" type="radio" value="js"/> <label for="opt1">js</label> <h4>Check box</h4> <input type="checkbox" value="fb" name="channel" /> <label for="opt1">facebook</label> <input type="checkbox" value="inst" name="channel" /> <label for="opt1">insta</label> <input type="checkbox" value="utb" name="channel" /> <label for="opt1">youtube</label> <input type="checkbox" value="twt" name="channel" /> <label for="opt1">twitter</label> <textarea name="vanbannhieudong">sdfsdfsdfsdfsdf sdfsdfsdfsdff </textarea> <input type="submit" value="gửi dữ liệu" /> </form> <script> document.addEventListener("keyup", function(e){ var data = e.target.value; console.log(data); }); document.querySelector('input[type=range]').addEventListener("change",function(e){ var data = e.target.value; console.log(data); }); </script> </body> </html> 
