Das Formular-Tag in HTML
In diesem Artikel lernen wir das Form-Tag in HTML kennen. Dies ist ein Tag, das verwendet wird, um Eingabefelder zu umgeben, Menschen bei Eingabevorgängen zu helfen und Daten an den Server zu senden.
Die meisten Websites haben die Funktionen Registrierung, Anmeldung, Kontakt, Bestellung, Warenkorbzahlung … alle diese Funktionen müssen das Form-Tag verwenden.
1. Wofür wird das Formular-Tag in HTML verwendet?
Das Form-Tag erstellt ein HTML-Formular, das der Benutzer eingeben kann, und sendet dann die Daten an den Server, indem es eine Aktion „Formular senden“ erstellt. Innerhalb des Formulars können die folgenden Elemente enthalten sein:
- <Eingabe>
- <Textbereich>
- <Schaltfläche>
Je nach Schnittstelle wählen Sie die passende Karte aus. Mit HTML5 werden viele Eingabe-Tags bereitgestellt, wie wir im Beispiel unten sehen, aber sie sind alle untergeordnete Tag-Elemente des Formular-Tags (die Formular-Tag-Struktur umfasst die gesamte Eingabestruktur).
Syntax zum Schreiben des Formular-Tags:
<form method="" action=""></form>Darin :
- action – der Pfad, an den das Formular Daten senden soll.
- Methode – Methode zum Senden von Daten, einschließlich: POST, GET.
Das Form-Tag in HTML hat immer noch die grundlegenden Attribute wie Stil, ID, Klasse. Die ID oder Klasse wird jedoch hauptsächlich verwendet, um das Formular-Tag zu formatieren, falls vorhanden, die beiden wichtigsten Attribute des Formulars sind action und method .
Kurz gesagt : Wenn Sie Daten von der Clientseite an den Server senden müssen, müssen Sie das Form-Tag in Kombination mit Input-Tags verwenden, um Daten entweder über die POST- oder die GET-Methode einzugeben.
2. Verwendung des Form-Tags in HTML
Beispiel: Verwenden des form-Tags zum Erstellen einer Dateneingabeschnittstelle:
<!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> Bài viết liên quan:
Dịch vụ thiết kế Wesbite
