Thẻ form trong html

Thẻ form trong html là gì

Thẻ form trong html là một cặp thẻ <form></form> trong html dùng để tạo ra một biểu mẫu để thu thập dữ liệu khách hàng hoặc là tạo ra một form đăng ký, đăng nhập cho website.

Thẻ form chỉ khai báo cho trình duyệt biết rằng các bạn sẽ tạo ra một biểu mẫu cho người dùng nhập vào, phần tử đi cùng với thẻ form là thẻ input.

Các thuộc tính trong thẻ form

Thẻ form chỉ khai báo cho trình duyệt biết mình sẽ tạo ra một biểu mẫu nhưng trong thẻ form cần có một số thuộc tính gửi dữ liệu đi để xử lý.

  1. Thuộc tính <form action=”duong-dan-den-file-xu-ly-du-lieu.php”> thuộc tính action cho phép bạn gửi dữ liệu đến file cần xử lý dữ liệu nhập vào. Thường thì file xử lý dữ liệu là file function.php.
  2. Thuộc tính <form method=”post”> phương thức gửi dữ liệu, có 2 phương thức gửi dữ liệu với giá trị là post và get ( phương thức gửi dữ liệu bằng post sẽ bảo mật tốt hơn).
  3. Thuộc tính <form name=”tenform”> dùng để đặt tên cho from, các bạn nên viết không dấu và tên form không có khoảng cách.

Thẻ input trong html

Thẻ input trong html rất đặc biệt vì chỉ có thẻ mở không có thẻ đóng, cấu trúc của thẻ input là <input> rất đặc biệt đúng không nào. Mặc định thẻ input sẽ nằm trong thẻ from nên các bạn lưu ý kỹ nhé.

Có rất nhiều thuộc tích đi theo thẻ input nên mình sẽ liệt kê toàn bộ thuộc tính có trong thẻ input cho các bạn hiểu sâu hơn.

Tổng hợp các thuộc tính thẻ input

Mình sẽ lựa chọn ra những thẻ input hay dùng trong thiết kế website bằng mã nguồn html cho các bạn.

  1. Thuộc tính <input type=”text” /> xác định trường nhập văn bản
  2. Thuộc tính <input type=”password” /> xác định trường nhập mật khẩu
  3. Thuộc tính <input type=”submit” /> xác định trường gửi dữ liệu đi sử lý
  4. Thuộc tính <input type=”reset” /> đặt lại dữ liệu nhập
  5. Thuộc tính <input type=”radio” /> tạo nút tròn nhỏ cho phép người dùng tùy chọn
  6. Thuộc tính <input type=”checkbox” /> tạo một khung cho phép người dùng nhập văn bản, thường dùng làm hộp comments
  7. Thuộc tính <input type=”button” /> tạo một nút cho người dùng click vào, dạng như nút đăng ký, đăng nhập
  8. Thuộc tính <input type=”date” /> tạo trường nhập dữ liệu ngày tháng
  9. Thuộc tính <input type=”email” /> tạo trường nhập địa chỉ email
  10. Thuộc tính <input type=”month” /> tạo trường nhập tháng năm
  11. Thuộc tính <input type=”number” /> tạo trường nhập dữ liệu số

Cách tạo thẻ form trong html

các bạn đã học xong lý thuyết về tạo thẻ form trong html rồi vậy bây giờ các bạn bắt đầu thiết kế một thẻ form đăng nhập đơn giản bằng html.

các bạn cần phải tạo thẻ from trong html theo như ảnh minh họa:

cách tạo thẻ form trong html
cách tạo thẻ form trong html

Mình đã thiết kế một thẻ form đơn giản rồi nếu như các bạn nào chưa làm được thì hãy xem lại code của mình.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	
	
<form metod="post" action="#" name="dangky">
  Họ và Tên:
  <input type="text" name="hoten">
  Mật Khẩu:
  <input type="password" name="password">
    <input type="submit" name="submit" value="Đăng ký">

</form>

</body>
</html>

Lời kết : bây giờ các bạn đã biết cách tạo thẻ form trong html cũng như là đã học được thêm một thẻ nữa đó là form trong html.

-

Trả lời