[HTML/HTML5] Phần 30: Form (biểu mẫu) trong HTML

Phần tử form
Phần tử form định nghĩa 1 form (mẫu) được dùng để thu thập dữ liệu từ người dùng.

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

Một HTML form chứa nhiều phần tử form bên trong. Phần tử form có nhiều loại khác nhau như các dạng phần tử input, miền văn bản (text field), checkbox, nút radio, nút submit,… Trong bài này, website dammio.com sẽ giới thiệu với các bạn lần lượt các phần tử form.

Phần tử input
Từ “input” trong tiếng Anh có nghĩa là đầu vào. Phần tử input là phần tử sẽ nhận dữ liệu vào đầu vào, theo nhiều cách khác nhau, tùy theo dạng input. Một số dạng phần tử input như sau:

• <input type=”text”>: Định nghĩa trường nhập liệu văn bản 1 dòng.
• <input type=”radio”>: Định nghĩa nút radio, một nút tròn cho phép chọn 1 trong nhiều lựa chọn.
• <input type=”submit”>: Định nghĩa nút submit, dùng để submit (gửi) form.

Input dạng văn bản
Nếu bạn muốn tạo một trường input chỉ với 1 dòng, bạn có thể dùng <input type=”text”>.

<form>
  <h3>Biểu mẫu đăng ký --- dammio.com</h3>
  Họ:<br>
  <input type="text" name="firstname"><br>
  Tên:<br>
  <input type="text" name="lastname">
</form>

Lưu ý: phần tử form sẽ không hiển thị trên giao diện và trường văn bản (text field) có độ rộng mặc định là 20 ký tự.

Input dạng nút radio
Với <input type=”radio”> định nghĩa 1 nút radio. Nút này cho phép người dùng chọn 1 trong nhiều lựa chọn.

<form>
  <h3>Hãy chọn thành phố nơi bạn sinh sống --- dammio.com</h3>
  <input type="radio" name="city" value="hanoi" checked> Hà Nội<br>
  <input type="radio" name="city" value="danang"> Đà Nẵng<br>
  <input type="radio" name="city" value="saigon"> Sài Gòn<br>
  <input type="radio" name="city" value="khac"> Khác
</form>

Trong ví dụ trên, bạn lưu ý các điểm. Để tạo 1 nhóm nút radio mà cho phép bạn chọn 1 trong các lựa chọn thì bạn phải đặt thuộc tính name của nhóm nút này giống nhau (trong ví dụ name=”city”). Thuộc tính checked dùng để chọn 1 nút mặc định ban đầu. Thuộc tính value dùng để định nghĩa giá trị của nút radio khi được chọn.

Nút submit
Đoạn mã <input type=”submit”> định nghĩa một nút để khi nhấn vào đó sẽ gửi dữ liệu form đến 1 xử lý form (form-handler). Xử lý form thông thường là 1 trang ở server với mã kịch bản để xử lý dữ liệu input. Xử lý form được mô tả bằng thuộc tính action.

<form action="xuly.php">
  <h3> Đăng ký học HTML/HTML5 --- dammio.com </h3>
  Họ:<br>
  <input type="text" name="ho" value="Helmi"><br>
  Tên:<br>
  <input type="text" name="ten" value="Dammio"><br><br>
  <input type="submit" value="Submit">
</form>

Trong ví dụ trên, chúng ta tạo 1 form đăng ký với 2 trường input tên và họ kiểu text. Sau khi điền thông tin, người dùng có nhấn nút submit để gửi dữ liệu đến tập tin xuly.php xử lý. Tạm thời, chúng ta chưa học về PHP cho nên phần xử lý này tạm để lại. Bạn có thể học về PHP ở: https://www.dammio.com/category/lap-trinh-web-voi-php.

Thuộc tính action
Thuộc tính này định nghĩa hành động (action) được thực thi khi form được gửi đi. Thông thường, dữ liệu form được gửi đến 1 trang web trên server khi người dùng nhấn nút submit. Trong ví dụ trên, dữ liệu form sẽ được gửi đến trang xuly.php ở server. Trang này chứa 1 số đoạn kích bản để xử lý dữ liệu form.

<form action="xuly.php">

Nếu thuộc tính action bị trống (khuyết), thì giá trị của thuộc tính là sẽ thiết lập là trang hiện tại chứa form.

Thuộc tính target
Thuộc tính target (đích) mô tả khi kết quả được gửi đi sẽ mở ra 1 tab trình duyệt mới, 1 frame hay trong cửa sổ hiện tại.

Giá trị mặc định là “_self“, nghĩa là form sẽ được gửi trong cửa sổ hiện tại. Để tạo kết quả form mở ra trong 1 tab trình duyệt mới, dùng giá trị “_blank“.

<form action="xuly.php" target="_blank">

Các giá trị hợp lệ của thuộc tính target là “_parent”, “_top” hoặc tên của 1 iframe.

Thuộc tính method
Thuộc tính method mô tả phương thức HTTP (GET hoặc POST) được dùng khi gửi dữ liệu form.

<h3> Form dùng GET --- dammio.com</h3>
<form action="xuly.php" method="get">
  <h4> Đăng ký học HTML/HTML5 --- dammio.com </h4>
  Họ:<br>
  <input type="text" name="ho" value="Helmi"><br>
  Tên:<br>
  <input type="text" name="ten" value="Dammio"><br><br>
  <input type="submit" value="Submit">
</form>

<h3> Form dùng POST --- dammio.com</h3>
<form action="xuly.php" method="post">
  <h4> Đăng ký học HTML/HTML5 --- dammio.com </h4>
  Họ:<br>
  <input type="text" name="ho" value="Helmi"><br>
  Tên:<br>
  <input type="text" name="ten" value="Dammio"><br><br>
  <input type="submit" value="Submit">
</form>

Khi nào dùng GET?
Phương thức mặc định khi gửi dữ liệu form là GET. Khi dùng GET, dữ liệu form sẽ hiển thị trên địa chỉ URL, ví dụ như:

https://www.dammio.com/…/xuly.php?ho=Helmi&ten=Dammio

Các lưu ý:

• Cặp thuộc tính name/value tương ứng ở form sẽ hiển thị ở URL, chẳng hạn như (name/ho) và (value/Helmi).
• Chiều dài của URL tối đa khoảng 3000 ký tự.
• Không dùng GET để gửi dữ liệu nhạy cảm (ví dụ số tài khoản ngân hàng, mật khẩu)
• Dùng GET hữu ích khi người dùng muốn bookmark kết quả.
• GET dùng tốt hơn cho dữ liệu không cần bảo mật, như các chuỗi truy vấn ở Google.

Khi nào dùng POST
Nếu bạn có 1 form chứa các dữ liệu nhạy cảm hoặc cần bảo mật, hãy dùng POST. Phương thức POST không hiển thị ở địa chỉ URL. POST không có giới hạn kích thước gửi đi và có thể dùng để gửi lượng lớn dữ liệu. Tuy nhiên, form dùng POST không thể bookmark (đánh dấu URL để lưu trữ).

Thuộc tính name
Mỗi trường input đều có 1 thuộc tính name. Nếu thuộc tính name bị khuyết, dữ liệu sẽ không gửi đi. Ví dụ form sau chỉ submit duy nhất trường “Họ”.

URL khi gửi đi: /xuly.php?ho=Helmi

<form action="xuly.php">
  Tên:<br>
  <input type="text" value="Dammio"><br>
  Họ:<br>
  <input type="text" name="ho" value="Helmi"><br><br>
  <input type="submit" value="Submit">
</form>

Gom nhóm dữ liệu form với fieldset
Phần tử fieldset dùng để gom nhóm các dữ liệu liên quan trong 1 form. Phần tử legend dùng để định nghĩa nhãn cho phần tử fieldset.

<form action="xuly.php">
  <fieldset>
    <legend>Thông tin cá nhân: --- dammio.com</legend>
    Tên:<br>
    <input type="text" name="ten" value="Dammio"><br>
    Họ:<br>
    <input type="text" name="họ" value="Helmi"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Kết luận: Bài viết đã hướng dẫn các bạn về tạo form cơ bản ở HTML. Mời bạn theo dõi bài tiếp theo để có thể biết thêm nhiều phần tử trong form và cách tạo form phong phú hơn.