Bài trước: Web front-end (18) - HTML - Table 2
-----
1.1 Form
Tới đây, chúng ta
đã biết cách sử dụng các phần tử HTML để tổ chức trang nội dung và thêm ngữ
nghĩa cho tài liệu HTML. Trang nội dung bao gồm văn bản, hình ảnh, bảng dữ liệu,
các liên kết. Tuy nhiên, đó vẫn là các nội dung tĩnh, người dùng chỉ có thể đọc
các thông tin có sẵn mà không thể tương tác với trang web, cụ thể là không thể
nhập dữ liệu, bấm nút, hay đánh dấu chọn.
Trong phần này,
chúng ta sẽ tìm hiểu thêm các phần tử HTML khác, nó cho phép người dùng tương
tác với trang web. Ví dụ, người dùng có thể nhập thông tin vào một biểu mẫu để mua
hàng, tìm kiếm, đặt vé, đăng kí khóa học, hoặc tạo một bài viết.
Form (biểu mẫu)
chính là đối tượng được sử dụng để xử lý các tương tác giữa người dùng và trang
web. Từ trang web tĩnh, nhờ có form, người lập trình có thể tạo ra trang web động
hay ứng dụng web. HTML5 cung cấp rất nhiều các điều khiển (control), các thuộc
tính mới, giúp người lập trình dễ dàng tạo ra các giao diện tương tác, và tạo
thuận lợi cho người dùng trong việc nhập thông tin và thực hiện các giao dịch
trên web.
Phần này sẽ tìm
hiểu về các khái niệm, cách hoạt động, cách tạo ra các web form, đồng thời cũng
tìm hiểu về cách thiết kế web form.
Lưu ý, trong phần
này, hai khái niệm form và web form được coi là tương đương và có thể sử dụng
thay thế cho nhau.
1.1.1 Tổng quan về Form
Form làm việc như thế nào?
Hoạt động của form gồm hai phần: phần hiển thị và phần xử
lý.
Phần hiển thị là những gì người dùng nhìn thấy ở trên giao
diện trang web, phần này được tạo ra bằng các phần tử HTML. Form thường chứa các
nút (button), các trường nhập liệu (input field), các mục xổ chọn (drop-down
menu), gọi chung là các điều khiển (form control). Form sử dụng các điều khiển
để lấy thông tin từ người dùng. Form cũng có thể chứa văn bản (text) và các phần
tử khác. Trình duyệt có nhiệm vụ tập hợp các thông tin người dùng đã nhập, đóng
gói và gửi về phía web server để xử lý.
Phần xử lý là một chương trình/ứng dụng hoặc đoạn mã xử lý
(script) đặt tại máy web server, nó sẽ xử lý các thông tin thu được từ người
dùng và trả về kết quả tương ứng. Phần này chúng ta sẽ tìm hiểu trong phần lập
trình phía back-end.
Để dễ hiểu hơn về cách thức làm việc của form, chúng ta cùng
theo dõi một ví dụ đơn giản: đăng kí để nhận thông báo định kì qua email (mailing
list).
Xem hình minh họa,
Diễn giải hình trên,
1. Bạn Tèo mở trang web, sẽ thấy trên giao diện có form gồm
hai ô nhập liệu (Tên, Email), và nút Đăng ký
2. Để nhận được thông báo định kì vào email của mình, Tèo cần
phải đăng ký bằng cách nhập họ tên và địa chỉ email, sau đó gửi các thông tin
này về server (submit) bằng cách bấm vào nút Đăng ký
3. Trình duyệt tập hợp các thông tin mà Tèo vừa nhập, mã hóa
(encoding) và gửi chúng tới Ứng dụng web trên server
4. Ứng dụng web nhận thông tin và xử lý, ở ví dụ này, Ứng dụng
web sẽ lưu thông tin của Tèo vào cơ sở dữ liệu
5. Ứng dụng web trả kết quả xử lý về cho trình duyệt
(response), trong ví dụ này, kết quả là thông báo việc đăng ký đã thành công và
lời cám ơn. Trong thực tế, kết quả trả về cũng có thể là thông tin cập nhật
trên form, hoặc chuyển người dùng tới form liên quan khác, hoặc thông báo lỗi
(nếu có).
|
Mã hóa dữ liệu của form |
|
Dữ liệu của form sẽ được
mã hóa tương tự như mã hóa URL, nghĩa là các khoảng trắng và các kí tự không
được phép gửi trực tiếp về server sẽ được chuyển sang dạng giá trị hệ 16
(hexadecimal) tương ứng. Ví dụ, khoảng trắng
sẽ được chuyển thành %20, dấu xuyệt (/) sẽ là %2F. Lập trình viên không cần
quan tâm tới việc mã hóa này, vì trình duyệt sẽ thực hiện tự động. |
Sử dụng phần tử form
để thêm một form vào trang web. Phần tử form chứa toàn bộ nội dung của form,
bao gồm: các điều khiển (form control) như các ô nhập liệu, các nút; các phần tử
khối (block element) như h1, p, danh sách. Phần tử form không thể chứa phần tử form khác, hay nói cách khác không được
lồng form.
Ví dụ, đoạn mã HTML của form Đăng ký nhận tin,
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Đăng
ký nhận tin</title>
</head>
<body>
<h1>Đăng ký nhận
tin</h1>
<form
action="/dang-ky.php" method="post">
<fieldset>
<legend>Gửi
thông tin của bạn cho chúng tôi</legend>
<p>Đăng ký để
nhận được các thông tin định kì về giá nông sản</p>
<ol>
<li><label
for="ho-ten">Tên:</label>
<input
type="text" name="ten" id="ho-ten"></li>
<li><label
for="email">Email:</label>
<input
type="text" name="email"
id="email"></li>
</ol>
<input
type="submit" value="Đăng ký">
</fieldset>
</form>
</body>
</html>
Giải thích thêm về đoạn mã HTML ở trên: sử dụng phần tử fieldset để nhóm các control có liên
quan với nhau thành một nhóm, đặt nhóm này trong một khung, thông tin chú thích
cho nhóm được đặt trong phần tử legend,
mỗi control được đặt trong một phần tử ol/li,
vì chưa học về CSS, nên tạm thời cứ để các số thứ tự trước mỗi control. Hoặc
để đơn giản, chúng ta cũng có thể bỏ đi các thẻ ol/li, dùng thẻ <br> để
ngắt dòng mỗi ô nhập liệu. Ví dụ,
<label for="ho-ten">Tên:</label>
<input type="text"
name="ten" id="ho-ten">
<br>
<label for="email">Email:</label>
<input type="text"
name="email" id="email">
<br>
<input type="submit"
value="Đăng ký">
Ngoài vai trò là thùng chứa các control, để giao tiếp/làm việc
với ứng dụng web tại server, form còn có thêm một số thuộc tính đi kèm.
Thuộc tính action
Thuộc tính action
cho biết địa chỉ (URL) của ứng dụng/chương trình hoặc đoạn mã (tại máy web
server) sẽ xử lý thông tin do form gửi về. Như ở ví dụ trên, thông tin của form
sẽ được gửi tới đoạn mã nằm trong tập tin dang-ky.php
để xử lý. Tập tin dang-ky.php nằm
trong thư mục gốc của ứng dụng web (hoặc website) (/).
<form action="/dang-ky.php"
method="post">
Phần mở rộng của tập tin là .php cho biết: ứng dụng trên web server để xử lý form được viết bằng
ngôn ngữ PHP. Người lập trình có thể sử dụng một trong các ngôn ngữ sau để viết
các đoạn mã xử lý tại web server, ví dụ:
– PHP
– C#
– Python
– Golang
– JavaScript
– Java
– Ruby
Mẹo:
để không bị chuyển trang khi bấm nút submit, bạn có thể thiết lập giá trị cho
action là "#". Ví dụ, <form action="#"
method="post">
Thuộc tính method
Thuộc tính method
được sử dụng để xác định cách thức gửi dữ liệu của form về web server. Ví dụ, từ dữ liệu lấy được của form gồm:
ten = Nguyễn Văn Tèo
email =
nguyenvanteo@gmail.com
Sau khi được
trình duyệt mã hóa, dữ liệu sẽ có dạng:
ten=Nguyễn%20Văn%20Tèo&email=nguyenvanteo%40gmail.com
Hai phương thức
thường được dùng để gửi dữ liệu về web server là GET và POST. Thuộc tính method
là không bắt buộc (option), nghĩa là có thể không cần khai báo thuộc tính này
trong thẻ <form>, khi đó trình duyệt sẽ tự động sử dụng phương thức GET để
gửi dữ liệu về web server.
– Phương thức
POST: nếu thuộc tính method được thiết
lập là POST, trình duyệt sẽ tạo một request riêng để gửi về web server, dữ liệu
của form được đặt phần body của request, do vậy có tính bảo mật cao, chiều dài
của dữ liệu không bị hạn chế.
– Phương thức
GET: nếu thuộc tính method được thiết
lập là GET, dữ liệu sau khi được mã hóa sẽ được gắn luôn vào cuối URL (trên
thanh địa chỉ), sử dụng dấu “?” để
ngăn cách giữa URL và dữ liệu gửi về web server, chiều dài của dữ liệu bị hạn
chế theo kích thước của URL. Ví dụ,
…dang-ky.php?ten=Nguyễn%20Văn%20Tèo&email=nguyenvanteo%40gmail.com
Khi gửi yêu cầu để
lấy tài nguyên về trình duyệt thì sử dụng phương thức GET, khi tạo mới/cập nhật
tài nguyên trên web server thì sử dụng phương thức POST.
Vì không phân biệt
chữ hoa và chữ thường, nên chúng ta có thể viết GET và POST ở dạng viết hoa
toàn bộ hoặc viết thường toàn bộ (get, post), tùy theo quy ước đặt tên của mỗi
nhóm, mỗi công ty.
Web form sử dụng nhiều control khác nhau để người dùng có thể
nhập thông tin và thực hiện các lựa chọn.
Các control được chia thành nhiều loại, như: ô nhập văn bản
(text entry fields), nút (buttons), trình đơn (menus), và các control đặc biệt
khác.
Lập trình viên cần phải hiểu rõ từng control để lựa chọn cho
phù hợp, vừa giúp việc lập trình dễ dàng, vừa tạo cảm giác thoải mái cho người
dùng.
Thuộc tính name
Lập trình viên sẽ sử dụng các control trong form để lấy
thông tin từ người dùng. Như ở ví dụ trên, chúng ta đã sử dụng hai ô nhập văn bản
để lấy về họ tên và email của người dùng. Trong thuật ngữ chuyên môn, người ta
gọi ten và email là hai biến (variable), tạm hiểu là hai vùng trống để chứa
thông tin, ở đây, nó được dùng để chứa nội dung/dữ liệu do người dùng nhập vào.
Ví dụ, giá trị của biến ten là “Nguyễn
Văn Tèo”, giá trị của biến email là “nguyenvanteo@gmail.com”.
Thuộc tính name được
sử dụng để tạo ra các biến cho mỗi control, giá trị của thuộc tính name chính là tên của biến.
Ví dụ,
<textarea name="nhan-xet" rows="4"
cols="45" placeholder="Để lại nhận xét của bạn tại
đây!"></textarea>
Đoạn mã trên đã tạo ra một ô nhập văn bản, với một biến đi
kèm là nhan-xet, khi người dùng nhập dữ
liệu (ví dụ “Cuốn sách này rất bổ ích.”) và bấm nút “Gửi”, dữ liệu sẽ được gửi
về web server dưới định dạng theo cặp: tên-biến/giá-trị
(name/value, hay variable/content), ví dụ,
nhan-xet= Cuốn%20sách%20này%20rất%20bổ%20ích.
Mỗi control của form đều phải có thuộc tính name đi kèm, nhờ đó các chương trình/ứng
dụng xử lý form tại web server mới có thể nhận diện và thu thập được thông tin.
Cách đặt tên cho các
biến
Việc thiết lập giá trị cho thuộc tính name (hay đặt tên cho biến) không nên làm một cách tùy tiện. Các
chương trình/ứng dụng web xử lý các form này thường đã được thiết kế với
các tên biến cụ thể. Vì vậy, nếu thiết kế form cho các chương trình/ứng dụng đã
có sẵn, thì cần phải xác định chính xác tên các biến tương ứng đã được dùng
trong chương trình/ứng dụng, có thể tự đọc tài liệu của ứng dụng, khảo sát ứng
dụng đang có, hỏi người lập trình ứng dụng, hoặc hỏi người quản trị hệ thống.
Nếu thiết kế form mới hoàn toàn thì cần đặt tên biến sao cho
đơn giản, đúng quy ước, có ý nghĩa, phản ánh được một phần nội dung mà nó sẽ chứa.
Tên biến phải là duy nhất, với tên biến gồm nhiều từ thì nên
sử dụng dấu gạch nối (-) (hyphen) hoặc dấu gạch chân ( _ )(underline,
underscore) để nối giữa các từ.
-----
-----