Thẻ form trong HTML
Trong bài này chúng ta sẽ tìm hiểu thẻ form trong HTML, đây là thẻ dùng để bao quanh các trường nhập liệu, giúp người có thể thông qua các thao tác nhập liệu, gửi dữ liệu lên server.
Hầu hết các website khi có các tính năng đăng ký, đăng nhập, liên hệ, đặt hàng, thanh toán giỏ hàng … tất cả những chức năng này đều phải sử dụng thẻ form.
1. Thẻ form trong HTML dùng để làm gì?
Thẻ form có chức năng tạo một mẫu HTML để người dùng nhập, sau đó gửi dữ liệu lên phía server bằng cách tạo ra một hành động submit form. Bên trong form có thể chứa các phần tử sau:
- <input>
- <textarea>
- <button>
Tùy vào mỗi giao diện mà bạn chọn thẻ cho phù hợp. Với HTML5, có cung cấp rất nhiều thẻ inpput, như chúng ta thấy ở ví dụ phía dưới, nhưng chúng sẽ đều là phần tử thẻ con của thẻ form ( cấu trúc thẻ form sẽ ôm toàn bộ cấu trúc input)
Cú pháp viết thẻ form:
<form method="" action=""></form>Trong đó:
- action – đường dẫn mà form sẽ gửi dữ liệu tới.
- method – phương thức gửi dữ liệu bao gồm: POST, GET.
Thẻ form trong html vẫn có các thuộc tính cơ bản như style, id, class. Tuy nhiên, id hay class chủ yếu sử dụng để style cho thẻ form nếu có, 2 thuộc tính quan trọng nhất của form là action và method
Tóm lại: nếu cần gửi giữ liệu từ phía máy khách lên máy chủ, cần phải sử dụng thẻ form kết hợp với các thẻ input để nhập liệu, thông qua hai phương thức POST hoặc GET.
2. Cách sử dụng thẻ form trong HTML
Ví dụ: Sử dụng thẻ form để tạo một giao diện nhập dữ liệu:
<!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\.-]+)\.([a-z\.]{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>
