Hướng Dẫn Tạo Form HTML và Xử Lý Dữ Liệu Form với PHP
Form HTML (hay biểu mẫu HTML) được dùng trong thiết kế website với mục đích cho phép người dùng có thể gửi dữ liệu tới máy chủ web server. Bài viết này sẽ hướng dẫn bạn cách tạo một form biểu mẫu HTML dùng để tìm kiếm các bài viết và đồng thời cũng hướng dẫn bạn cách xử lý dữ liệu form gửi từ biểu ...
Form HTML (hay biểu mẫu HTML) được dùng trong thiết kế website với mục đích cho phép người dùng có thể gửi dữ liệu tới máy chủ web server. Bài viết này sẽ hướng dẫn bạn cách tạo một form biểu mẫu HTML dùng để tìm kiếm các bài viết và đồng thời cũng hướng dẫn bạn cách xử lý dữ liệu form gửi từ biểu mẫu tới web server.
Lưu ý: Để có thể làm theo chi tiết các bước được đề cập trong bài viết này bạn nên cài đặt một web server trên máy tính. Nếu máy tính bạn chưa được cài đặt web server bạn có thể tham khảo một trong các bài việt sau:
- Hướng dẫn cài đặt XAMPP trên Windows với máy tính chạy hệ điều hành Windows.
- Hướng dẫn cài đặt MAMP trên Mac OS X với máy tính chạy hệ điều hành Mac OSX.
- Hướng dẫn cài đặt LAMP trên Linux với máy tính chạy hệ điều hành Linux.
Bài viết này cũng sử dụng PHP là ngôn ngữ lập trình chạy trên web server để xử lý dữ liệu gửi tới server. Trong hầu hết các trường hợp thì sau khi cài đặt XAMP, MAMP hoặc LAMP thì PHP cũng sẽ được cài đặt cùng.
Tạo Form HTML - Thẻ <form>
Một form biểu mẫu HTML được tạo nhờ sử dụng thẻ <form>. Đoạn code HTML để tạo một form dùng để tìm kiếm bài viết như sau:
<form action="http://localhost/search.php" method="GET"> </form>
Trong form trên bạn lưu ý hai thuộc tính là action và method:
- Thuộc tính action dùng để quy định địa chỉ trang web mà dữ liệu gửi đi sẽ được chuyển tới đó (và xử lý bởi trang này). Thuộc tính này có giá trị là một đường dẫn URL, có thể là đường dẫn tuyệt đối như trong ví dụ trên http://localhost/search.php hoặc cũng có thể là một đường đẫn tương đối ví dụ như /search.php. Chúng ta sẽ tạo tập tin này sau.
- Thuộc tính method dùng để quy định phương thức HTTP được sử dụng để gửi dữ liệu tới địa chỉ trang web đích quy định trong thuộc tính action ở phía trên. Các phương thức HTTP thường được sử dụng phổ biến là GET, POST, PUT và DELETE.
Trong 4 phương thức HTTP method phổ biến trên thì chúng ta nên chọn:
- Sử dụng phương thức GET với các form thực hiện hành động lấy về một nội dung nào đó như danh sách các bài viết (với form tìm kiếm) chẳng hạn.
- Sử dụng phương thức POST nên được sử dụng với các form thực hiện hành động tạo mới một nội dung nào đó ví dụ như tạo một bài viết mới (form tạo bài viết), tạo tài khoản (form đăng ký tài khoản)...
- Sử dụng phương thức PUT với các form dùng để thực hiện hành động cập nhật nội dung ví dụ như cập nhật một bài viết, thông tin tài khoản người dùng...
- Sử dụng phương thức DELETE với các form dùng để thực hiện hành động xoá một nôi dung nào đó ví dụ như xoá bài viết, xoá hình ảnh....
Chúng ta sẽ bắt đầu bằng việc tạo một tập tin search.html trong thư mục gốc của web server trên máy tính bạn (với XAMPP chạy trên hệ điều hành Windows địa chỉ của thư mục này thường là C:xampphtdocs) với nội dung như sau:
<!DOCTYPE html>
<html>
<body>
<form action="http://localhost/search.php" method="GET">
</form>
</body>
</html>
Như vậy với việc tạo một form để tìm kiếm (bài viết) thì chúng ta sẽ sử dụng phương thức GET.
Thêm Trường Nhập Dữ Liệu vào Form với Thẻ <input>
Sau khi tạo form thì để người dùng dữ liệu chúng ta cần thêm vào các trường nhập dữ liệu thông qua sử dụng các thẻ trong HTML. Có nhiều thẻ HTML khác nhau dùng để tạo trường nhập dữ liệu trong form ví dụ như thẻ <input>, thẻ <textarea> hay <option>... Tuỳ vào mục đích sử dụng mà chúng ta chọn loại thẻ nào cho phù hợp. Tuy nhiên trong hầu hết các trường hợp bạn có thể sử dụng thẻ <input> hoặc <textarea> để cho phép người dùng nhập dữ liệu. Sự khác biệt giữa hai loại thẻ này đó là input dùng với văn bản có nội ngắn còn textarea sử dụng với văn bản có nội dung dài.
...
<form action="http://localhost/search.html" method="GET">
<div>
<input type="text" name="keyword" placeholder="Nhập từ khoá tìm kiếm...">
</div>
</form>
...
<html>
Ở trên chúng ta đã thêm một trường nhập dữ liệu vào form sử dụng thẻ <input>, trong thẻ này bạn cần lưu ý:
- Thuộc tính type="name" dùng để quy định rằng thẻ input này là văn bản. Ngoài văn bản thì HTML còn hỗ trợ các dạng dữ liệu sử dụng trong form khác như type="file" để upload tập tin, hoặc type="password" dùng để nhập mật khẩu (thực chất cũng là văn bản nhưng trình duyệt sẽ ẩn các ký tự nhập vào để đảm bảo người xung quyanh không nhìn thấy được)
- Thuộc tính name="keyword" dùng để quy định tên cho trường nhập dữ liệu giúp phân biệt các trường nhập dữ liệu khác nhau. Ví dụ nếu form của bạn có hai trường nhập dữ liệu là trường tên đăng nhập và trường mật khẩu thì trong thẻ <input> bạn sẽ cần đặt giá trị cho thuộc tính name khác nhau và tương ứng với các trường này.
- Thuộc tính placeholder=".." dùng để thêm các ký tự giữ chỗ (placeholder) cho trường nhập dữ liệu. Bạn có thể bỏ qua nếu muốn.
Tới đây chúng ta đã tạo form và thêm trường nhập dữ liệu vào form. Mở trình duyệt và truy cập tới địa chỉ trang http://locahost/search.html bạn sẽ thấy kết quả như sau:
Bước tiếp theo chúng ta cần làm đó là thêm vào trong form một nút gửi dữ liệu để người dùng có thể nhấp vào đó và thực hiện việc gửi dữ liệu tới web server.
Tạo Nút Gửi Dữ Liệu trong Form
Để tạo nút gửi dữ liệu form chúng ta có thể sử dụng thẻ <button> hoặc thẻ <input type="submit">. Bạn có thể tuỳ chọn một trong hai cách.
Đoạn code HTML tạo nút gửi dữ liệu sử dụng thẻ <button> như sau:
...
<form action="/search.php" method="GET">
<div>
<input type="text" name="keyword" placeholder="Nhập từ khoá tìm kiếm...">
</div>
<button>Gửi</button>
</form>
...
Đoạn code HTML tạo nút gửi dữ liệu sử dụng thẻ <input> như sau:
...
<form action="/search.php" method="GET">
<div>
<input type="text" name="keyword" placeholder="Nhập từ khoá tìm kiếm...">
</div>
<input type="submit" value="Gửi">
</form>
...
Tới đây bạn đã hoàn tất việc tạo một form biểu mẫu HTML dùng để tìm kiếm bài viết. Mở trình duyệt và truy cập tới địa chỉ trang http://locahost/search.html bạn sẽ thấy kết quả như sau:
Bước tiếp theo chúng ta cần làm đó là tạo tập tin search.php trên server để xử lý dữ liệu biểu mẫu gửi bởi người dùng.
Xử Lý Dữ Liệu Form HTML
Bây giờ chúng ta sẽ tạo một tập tin search.php trên web server để xử lý dữ liệu gửi lên. Vẫn cùng ở thư mục gốc của web server trên máy tính, bạn tiếp tục tạo một tập tin search.php trong thư mục này với nội dung như sau:
<?php echo "Từ khoá tìm kiếm: " . $_GET['keyword']; ?>
Sau đó lưu lại.
Kiểm Tra
Bước cuối cùng bạn cần làm là kiểm tra hoạt động của form trên. Để làm điều này bạn mở trình duyệt và đi truy cập địa chỉ trang http://localhost/search.html. Trong trang được hiển thị trên trình duyệt bạn nhập vào một từ khoá bất kỳ sau đó bấm nút gửi đi. Nếu thực hiện đúng các bước trên bạn sẽ thấy trình duyệt chuyển tiếp bạn tới trang đích tại địa chỉ http://localhost/search.php với nội dung hiển thị từ khoá bạn đã nhập vào.
