6 Form
Tới đây đã biết cách sử dụng các phần tử HTML để tổ chức và thêm ngữ nghĩa cho nội dung, tuy nhiên, nội dung trang web vẫn còn khá đơn sơ, nó chỉ cho phép người dùng đọc nội dung. Phần này sẽ tìm hiểu tiếp các phần tử khác, cho phép người dùng có khả năng tương tác với trang web, ví dụ, người dùng có thể mua hàng, tìm kiếm, đặt vé, đăng kí, tạo 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.
2.6.1 Cách thức làm việc của form
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.
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 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.
Để dễ hiểu hơn về cách thức làm việc của form, cùng theo dõi một ví dụ đơn giản: người dùng đăng kí để nhận được thông tin định kì vào hộp thư của mình (mailing list).
Xem hình minh họa,
Diễn giải hình trên,
1. Người dùng tê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. |
2.6.2 Phần tử form
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.
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ã sẽ xử lý thông tin do form gửi về. Ví dụ, ở đoạn mã 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 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 server, ví dụ:
– PHP (.php) là ngôn ngữ lập trình kịch bản (script), mã nguồn mở, được sử dụng phổ biến trên các web server Apache
– ASP.NET (Active Server Pages) (.asp) là môi trường lập trình cho web server IIS (Internet Information Server) của Microsoft. ASP.NET Core là môi trường lập trình đa nền tảng. Sử dụng ngôn ngữ C#.
– Ruby on Rails là một framework (khung làm việc), dùng để phát triển các ứng dụng web, mã nguồn mở, được phát triển dựa trên ngôn ngữ lập trình Ruby. Ruby on Rails cũng hay được gọi tắt là Rails
– JavaServer pages (.jsp) còn có tên khác là Java Scripting Preprocessor, là công nghệ phát triển các ứng dụng web dựa trên nền tảng Java
– Python là ngôn ngữ kịch bản đang được dùng nhiều cho các ứng dụng web và ứng dụng server
– NodeJS là một nền tảng phát triển ứng dụng web dựa trên JavaScript Engine (V8 Engine). Sử dụng ngôn ngữ JavaScript.
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ề 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ề 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ề 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ề 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ề 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 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 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 khi lập trình, 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.
2.6.3 Biến và nội dung
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ư: trường 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, đã sử dụng hai trường 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 trường nhập văn bản, với một biến đi kèm, có tên là nhan-xet, khi người dùng nhập nhận xét vào trường nhập văn bản (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ề server dưới dạng cặp tên-biến/giá-trị (name/value, hay variable/content):
nhan-xet= Cuốn%20sách%20này%20rất%20bổ%20ích.
Mỗi phần tử 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 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ý cho các form này thường đã được thiết kế với các tên biến cụ thể.
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ừ, chứ không nên để khoảng trắng.
.jpg)
.jpg)
0 Nhận xét