The form tag in HTML

24-07-2022
Trung Minh
0 Comments

In this article, we will learn the form tag in HTML, this is a tag used to surround input fields, helping people through input operations, send data to the server.

Most websites have the features of registration, login, contact, order, cart payment … all of these functions must use the form tag.

1. What is the form tag in HTML used for?

The form tag creates an HTML form for the user to enter, and then sends the data to the server by creating a submit form action. Inside the form can contain the following elements:

<input>
<textarea>
<button>

Depending on each interface, you choose the appropriate card. With HTML5, there are many input tags provided, as we see in the example below, but they will all be child tag elements of the form tag (the form tag structure will embrace the entire input structure).

Syntax to write form tag:

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

In which :

action – the path the form should send data to.
method – method to send data including: POST, GET.

The form tag in html still has the basic attributes like style, id, class. However, the id or class is mainly used to style the form tag if any, the two most important attributes of the form are action and method .

In short : if you need to send data from the client side to the server, it is necessary to use the form tag in combination with input tags to input data, through either POST or GET methods.

2. How to use the form tag in HTML

Example: Using the form tag to create a data entry interface:

 <!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>