Khóa học HTML - Bài 22 - Xử lý FORM

Các thuộc tính của thẻ <form>:

Thuộc tính	Mô tả
accept-charset	Xác định bộ ký tự sử dụng trong form submit (mặc định: bộ ký tự của trang).
action	Xác định 01 địa chỉ (url) nơi form sẽ được gửi tới (mặc định: trang chứa form submit).
autocomplete	Xác định thuộc tính autocomplete của form (mặc định: on).
enctype	Xác định việc mã hóa của dữ liệu submit (mặc định: url-encoded).
method	Xác định giao thức HTTP dùng khi gửi form (mặc định: GET).
name	Xác định tên dùng để định danh form (dùng truy cập DOM: document.forms.name).
novalidate	Xác định trình duyệt không kiểm tra giá trị của form.
target	Xác định địa chỉ mục tiêu trong thuộc tính action (mặc định: _self).

Bạn sẽ học nhiều hơn về các thuộc tính forrm trong bài tiếp theo.lf »

---

Thẻ <form>

Thẻ HTML <form> xác định 01 biểu mẫu được dùng để thu thập dữ liệu người dùng:

<form>
.
Các phần tử form
.
</form>

01 HTML form chứa các phần tử form.

Các phần tử form có nhiều loại khác nhau ví dụ kiểu text fields, kiểu checkbox, kiểu nút radio , kiểu nút submit, và các kiểu khác.

---

Phần tử <input>

Phần tử <input> là phần tử quan trọng nhất trong thẻ form.

Phần tử <input> có thể hiển thị nhiều kiểu, tùy thuộc tính type.

Sau đây là 01 vài ví dụ:

Kiểu	Mô tả
<input type="text">	Xác định thẻ nhập text.
<input type="radio">	Xác định 01 nút radio (chọn 01 trong các lựa chọn)
<input type="submit">	Xác định 01 nút submit (dùng submit form)

Bạn sẽ học thêm về nhiều kiểu nhập liệu trong các bài sau.

---

Kiểu Text

<input type="text"> hiển thị kiểu nhập text 01 dòng:

Ví dụ:

<form>
  Họ:<br>
  <input type="text" name="ho"><br>
  Tên:<br>
  <input type="text" name="ten">
</form>

Trên trình duyệt nó sẽ hiển thị như thế này:

Ghi chú: Thẻ form sẽ không hiển thị và chiều rộng mặc định của text field là 20 ký tự.

---

Kiểu nút Radio Button

<input type="radio"> hiển thị 01 nút radio.

Nút Radio buttons cho phép người dùng chọn MỘT trong 01 số giới hạn các chọn lựa.

Ví dụ:

<form>
  <input type="radio" name="gioitinh" value="nam" checked> Nam<br>
  <input type="radio" name="gioitinh" value="nu"> Nữ<br>
  <input type="radio" name="gioitinh" value="khac"> Khác</form>

Thực tế trên trình duyệt sẽ hiển thị như sau:

Nút Submit

<input type="submit"> hiển thị 01 nút submit dữ liệu form đến 01 trang xử lý form.

Trang xử lý form thông thường sẽ là 01 trang chạy trên server với 01 đoạn mã xử lý dữ liệu nhập vào.

Trang xử lý form được xác định trong thuộc tính action:

Ví dụ:

<form action="action_page.php">
  Họ:<br>
  <input type="text" name="ho" value="Nguyễn"><br>
  Tên:<br>
  <input type="text" name="ten" value="Tèo"><br><br>
  <input type="submit" value="Gửi">
</form>

Hình ảnh thực tế trên trình duyệt :

Thuộc tính Action

Thuộc tính action xác định hành động được thực thi khi form được submit.

Thông thường, dữ liệu form được gửi đến 01 trang web đặt trên máy chủ khi người dùng bấm nút submit.

Trong ví dụ trên, dữ liệu form gửi đến 01 trang web trên máy chủ gọi là "action_page.php". Trang này chứa 01 đoạn mã chạy trên máy chủ xử lý dữ liệu của form:

<form action="action_page.php">

Nếu bỏ trống thuộc tính action, thì mặc định giá trị của action là trang hiện hành.

---

Thuộc tính Method

Thuộc tính method xác định phương thức HTTP (GET hoặc POST) được dùng khi submit dữ liệu form:

<form action="action_page.php" method="get">

hoặc:

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

---

Khi nào sử dụng GET?

Phương thức mặc định khi submit dữ liệu form là GET.

Tuy nhiên khi sử dụng phương thức GET, dữ liệu form đã submit sẽ hiển thị trên thanh địa chỉ của trình duyệt:

action_page.php?ho=Nguyen&lastname=Teo

Ghi chú: GET KHÔNG ĐƯỢC SỬ DỤNG khi gửi dữ liệu nhạy cảm! GET cực kỳ thích hợp cho dữ liệu ngắn, không nhạy cảm, 01 con số, hơn nữa kích thước cũng bị giới hạn.

---

Khi nào sử dụng POST?

Luôn sử dụng POST nếu dữ liệu form chứa nội dung 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 form được submit trên thanh địa chỉ của trình duyệt.

POST không giới hạn kích thước, và có thể được sử dụng để gửi 01 lượng lớn dữ liệu.

---

Thuộc tính Name

Mỗi phần tử input phải có 01 thuộc tính name được submit.

Nếu thuộc tính name bị lược bỏ, dữ liệu của input field đó sẽ không được gửi đi.

Ví dụ sau sẽ chỉ submit phần tử "ten" :

<form action="action_page.php">
  Họ:<br>
  <input type="text" value="Nguyễn"><br>
  Tên:<br>
  <input type="text" name="ten" value="Tèo"><br><br>
  <input type="submit" value="Gửi">
</form>

---

Nhóm dữ liệu Form với thẻ <fieldset>

Phần tử <fieldset> dùng để nhóm dữ liệu liên quan trong form.

Phần tử <legend> hiển thị tiêu đề của phần tử <fieldset>.

Ví dụ:

<form action="action_page.php">
  <fieldset>
    <legend>Thông tin cá nhân:</legend>
    Họ:<br>
    <input type="text" name="ho" value="Nguyễn"><br>
    Tên:<br>
    <input type="text" name="ten" value="Tèo"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Hình ảnh thật trên trình duyệt:

---

Gửi mail bằng FORM

<!DOCTYPE html>

<html>

<body>

<h2>Gửi e-mail đến ntm@lophocvitinh.com</h2>

<form action="mailto:ntm@lophocvitinh.com" method="post" enctype="text/plain">

Họ Tên:<br>

<input type="text" name="ten"><br>

E-mail:<br>

<input type="text" name="mail"><br>

Nội dung:<br>

<input type="text" name="noidung" size="50"><br><br>

<input type="submit" value="Gửi">

<input type="reset" value="Reset">

</form>

</body>

</html>

Hình ảnh thực tế:

Tác giả: #drM

Nguồn: Sưu Tầm