🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Hôm nay cafedev chia sẻ về Form trong HTML. Form là nơi được sử dụng để thu thập đầu vào của người dùng. Đầu vào người dùng sau đó có thể được gửi đến một máy chủ(server) để xử lý.

Ví dụ:

Ví dụ về Forms trong HTML






If you click the “Submit” button, the form-data will be sent to a page called “/action_page.php”.

1. Phần tử <form>

Phần tử<form> được sử dụng để tạo một biểu mẫu HTML để nhận đầu vào của người dùng:

<form>
.
form elements
.
</form>

Các phần tử biểu mẫu(form) gồm các loại phần tử đầu vào khác nhau, như: text fields, checkboxes, radio buttons, submit buttons,..v.v.

Sau đây cafedev chia sẻ cho ace một số các phần tử cơ bản này.

2. Text fields(Nơi nhập văn bản)

<input type="text"> định nghĩa trường nhập một dòng cho nhập văn bản.

Ví dụ: Một biểu mẫu(form) có hai trường nhập văn bản:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<h2>Ví dụ về Text fields trong HTML</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Xuan"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="David"><br><br>
</form> 

</body>
</html>

Copy and chạy code

Lưu ý: Bản thân form không hiển thị. Cũng lưu ý rằng độ dài mặc định của trường nhập(Text fields) là 20 ký tự.

3. Phần tử <label>

Lưu ý việc sử dụng phần tử <label> trong ví dụ trên.

Thẻ <label> định nghĩa nhãn cho nhiều thành phần trong biểu mẫu(form).

Phần tử <label> hữu ích cho người dùng đọc và hiểu về form đó, khi đọc màn hình người dùng sẽ đọc nhãn(label) trước vì nó ở đầu.

Phần tử <label> cũng giúp người dùng gặp khó khăn khi nhấp vào các vùng rất nhỏ (chẳng hạn như nút radio hoặc hộp kiểm) – bởi vì khi người dùng nhấp vào văn bản trong phần tử <label>, nó sẽ tắt, bật nút / checkbox.

Thuộc tính for của thẻ <label> phải bằng thuộc tính id của phần tử <input> để liên kết chúng lại với nhau.

4. Radio Buttons

<input type="radio"> định nghĩa một radio button.

Các nút radio cho phép người dùng chọn MỘT trong số các lựa chọn có sẳn.

Ví dụ về Một form với các nút radio:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<body>

<h2>Cafedev Demo about Radio Buttons</h2>

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form> 

</body>
</html>

Copy and chạy code

5. Nút submit trong Form

<input type="submit"> định nghĩa một nút để gửi dữ liệu của biểu mẫu(form) đến trình xử lý biểu mẫu(form).

Trình xử lý biểu mẫu(form-handler) thường là một trang trên máy chủ có tập lệnh để xử lý dữ liệu đầu vào.

Trình xử lý biểu mẫu(form-handler) được chỉ định trong thuộc tính action của biểu mẫu.

Ví dụ về biểu mẫu có nút gửi(submit):

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<h2>Submit Demo within Forms</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Xuan"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="David"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

Copy and chạy code

6. Thuộc tính action

Thuộc tính action xác định hành động sẽ được thực hiện khi biểu mẫu được gửi.

Thông thường, dữ liệu biểu mẫu được gửi đến một trang trên máy chủ khi người dùng nhấp vào nút gửi.

Trong ví dụ trên, dữ liệu biểu mẫu được gửi đến một trang trên máy chủ có tên “/action_page.php”. Trang này chứa tập lệnh phía máy chủ xử lý dữ liệu biểu mẫu đó:

<form action="/action_page.php">

Nếu thuộc tính action bị bỏ qua, hành động được đặt thành trang hiện tại.

7. Thuộc tính Target

Thuộc tính target chỉ định nếu kết quả được gửi sẽ mở trong tab trình duyệt mới, khung(frame) hoặc trong cửa sổ hiện tại.

Giá trị mặc định là “_self” có nghĩa là biểu mẫu sẽ được gửi trong cửa sổ hiện tại.

Để làm cho kết quả biểu mẫu mở trong tab trình duyệt mới, hãy sử dụng giá trị “_blank“.

Ví dụ: Tại đây, kết quả đã gửi sẽ mở trong tab trình duyệt mới:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<h2>Cafedev - The form target attribute</h2>

<p>When submitting this form, the result will be opened in a new browser tab:</p>

<form action="/action_page.php" target="_blank">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Xuan"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="David"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Copy and chạy code

Các giá trị khác là “_parent”, “_top” hoặc tên đại diện cho tên của iframe.

8. Thuộc tính Method

Thuộc tính method chỉ định phương thức HTTP (GET hoặc POST) sẽ được sử dụng khi gửi dữ liệu biểu mẫu lên server.

Ví dụ sử dụng phương thức GET:

<!DOCTYPE html>
<html>
<body>

<h2>The method = GET Attribute</h2>

<p>This form will be submitted using the GET method:</p>

<form action="/action_page.php" target="_blank" method="get">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="David"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Xuan"><br><br>
  <input type="submit" value="Submit">
</form>

<p>After you submit, notice that the form values is visible in the address bar of the new browser tab.</p>

</body>
</html>

Copy and chạy code

Ví dụ sử dụng phương thức POST:

 <form action="/action_page.php" method="post">

9. Khi nào nên sử dụng GET?

Phương thức HTTP mặc định khi gửi dữ liệu biểu mẫu sẽ dùng GET.

Tuy nhiên, khi GET được sử dụng, dữ liệu biểu mẫu sẽ hiển thị trong trường địa chỉ của trang:

/action_page.php?firstname=David&lastname=Xuan

Ghi chú về GET:

  • Nối dữ liệu biểu mẫu vào URL theo cặp tên / giá trị
  • Độ dài của URL bị giới hạn (2048 ký tự)
  • Không bao giờ sử dụng GET để gửi dữ liệu nhạy cảm(như password)! (sẽ hiển thị trong URL)
  • Hữu ích cho việc gửi biểu mẫu trong đó người dùng muốn đánh dấu kết quả(bookmarked)
  • GET tốt hơn cho dữ liệu không an toàn, như chuỗi truy vấn trong Google

10. Khi nào nên sử dụng POST?

Luôn sử dụng POST nếu dữ liệu biểu mẫu chứa thông tin nhạy cảm hoặc thông tin cá nhân. Phương thức POST không hiển thị dữ liệu biểu mẫu trong trường địa chỉ trang.

Ghi chú trên POST:

  • POST không có giới hạn kích thước và có thể được sử dụng để gửi một lượng lớn dữ liệu.
  • Gửi mẫu với POST không thể được đánh dấu(bookmarked)

11. Thuộc tính Name

Mỗi trường đầu vào phải có một thuộc tính name được gửi.

Nếu thuộc tính name bị bỏ qua, dữ liệu của trường đầu vào đó sẽ không được gửi đi.

Ví dụ này sẽ không gửi giá trị của trường nhập “First name”:

<!DOCTYPE html>
<html>
<body>

<h2>Demo for The name Attribute</h2>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="David"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

<p>Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute.</p>

</body>
</html>

Copy and chạy code

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM