Trong hướng dẫn này, bạn sẽ học cách tạo form trong HTML để thu thập thông tin của người dùng.
Form HTML là gì?
HTML form để thu thập các thông tin đầu vào khác nhau của người dùng, chẳng hạn như tên, địa chỉ email, số điện thoại hoặc thông tin thẻ tín dụng, v.v.
Form chứa các phần tử đặc biệt gọi là các loại điều khiển như inputbox, checkbox, nút radio, nút gửi, v.v. Người dùng thường hoàn thành form bằng cách sửa đổi các thông tin, ví dụ: nhập văn bản, chọn mục, v.v. và gửi biểu mẫu này đến máy chủ web để xử lý thêm.
Thẻ <form> được sử dụng để tạo một form HTML. Dưới đây là một ví dụ đơn giản về form đăng nhập:
Phần sau đây mô tả các loại điều khiển khác nhau mà bạn có thể sử dụng trong form của mình.
Thẻ Input
Đây là phần tử được sử dụng phổ biến nhất trong các form HTML.
Nó cho phép bạn chỉ định nhiều loại trường nhập của người dùng, tùy thuộc vào type . Phần tử đầu vào có thể là trường văn bản, mật khẩu, checkbox, nút radio, nút gửi, nút reset, hộp chọn tệp, cũng như một số kiểu input mới được giới thiệu trong HTML5.
Các loại input được sử dụng thường xuyên nhất được mô tả bên dưới.
Trường văn bản
Trường văn bản là một vùng cho phép người dùng nhập văn bản.
Các điều khiển nhập văn bản dòng đơn được tạo bằng <input> , có type có giá trị là văn bản. Dưới đây là ví dụ về kiểu nhập văn bản dòng đơn được sử dụng để lấy tên người dùng:
Output của ví dụ trên sẽ giống như sau:
Lưu ý: Thẻ <label> được sử dụng để xác định nhãn cho <input> . Nếu bạn muốn người dùng của mình nhập nhiều dòng, bạn nên sử dụng <textarea> thay thế.
Trường mật khẩu
Các trường mật khẩu tương tự như trường văn bản. Sự khác biệt duy nhất là các ký tự trong trường mật khẩu được che đi, tức là chúng được hiển thị dưới dạng dấu hoa thị hoặc dấu chấm.
Điều này là để ngăn người khác đọc mật khẩu trên màn hình. Đây cũng là điều khiển nhập văn bản dòng đơn được tạo bằng <input> có type có giá trị là mật khẩu.
Dưới đây là một ví dụ về input mật khẩu dòng đơn được sử dụng để lấy mật khẩu của người dùng:
– Đầu ra của ví dụ trên sẽ giống như sau:
Các nút radio
Các nút radio được sử dụng để người dùng chọn chính xác một tùy chọn từ một nhóm tùy chọn được xác định trước. Cách tạo là sử dụng <input> có type có giá trị là radio.
Dưới đây là một ví dụ về các nút radio được sử dụng để thu thập thông tin giới tính của người dùng:
– Kết quả của ví dụ trên sẽ giống như sau:
Checkbox
Checkbox cho phép người dùng chọn một hoặc nhiều tùy chọn từ một nhóm tùy chọn được xác định trước. Cách tạo là sử dụng <input> có type có giá trị là checkbox.
Dưới đây là ví dụ về checkbox được sử dụng để thu thập thông tin về sở thích của người dùng:
– Kết quả của ví dụ trên sẽ giống như sau:
Lưu ý: Nếu bạn muốn chọn nút radio hoặc checkbox theo mặc định, bạn có thể thêm thuộc tính đã đánh dấu vào phần tử input, chẳng hạn như <input type = “checkbox” đã chọn>.
Hộp chọn file
Các trường file cho phép người dùng tìm file và gửi file đó dưới dạng tệp đính kèm với dữ liệu form. Các trình duyệt web như Google Chrome và Firefox hiển thị trường input chọn tệp bằng nút Duyệt cho phép người dùng điều hướng đến ổ cứng máy và chọn file.
Điều này cũng được tạo bằng cách sử dụng <input> , có type được đặt thành file.
– Output của ví dụ trên sẽ giống như sau:
Khu vực nhập văn bản
Textarea là một điều khiển nhập văn bản cho phép người dùng nhập nhiều hơn một dòng văn bản. Các điều khiển nhập văn bản nhiều dòng được tạo bằng <textarea> :
– Kết quả của ví dụ trên sẽ giống như sau:
Hộp lựa chọn
Hộp lựa chọn là danh sách tùy chọn thả xuống cho phép người dùng chọn một hoặc nhiều lựa chọn từ danh sách này. Hộp lựa chọn được tạo bằng <select> và phần tử <option> .
Các <option> trong <select> xác định từng mục danh sách.
– Output của ví dụ trên sẽ giống như sau:
Nút Submit và Reset
Nút gửi được sử dụng để gửi dữ liệu form đến máy chủ web. Khi nhấp vào nút gửi, dữ liệu form được gửi đến tệp được chỉ định trong action để xử lý dữ liệu đã gửi.
Nút reset sẽ đặt lại tất cả các điều khiển form về các giá trị mặc định. Hãy xem thử ví dụ sau:
Lưu ý: Bạn cũng có thể tạo các nút bằng cách sử dụng <button> . Các nút được tạo bằng <button> có chức năng giống các nút tạo bằng phần tử input, nhưng chúng cung cấp khả năng hiển thị phong phú hơn bằng cách cho phép nhúng các phần tử HTML khác.
Nhóm các điều khiển form
Bạn cũng có thể nhóm các điều khiển và nhãn liên quan một cách hợp lý trong một form web bằng cách sử dụng <legend> . Nhóm các điều khiển form trở thành các danh mục giúp người dùng dễ dàng xác định vị trí điều khiển, điều này làm cho form thân thiện hơn với người dùng.
Hãy thử ví dụ sau để xem nó hoạt động như thế nào:
Thuộc tính form sử dụng thường xuyên
Bảng sau liệt kê các thuộc tính của phần tử form được sử dụng thường xuyên nhất:
| Thuộc tính | Mô tả |
| name | Chỉ định tên của form |
| action | Chỉ định URL của chương trình hoặc tập lệnh trên máy chủ web sẽ được sử dụng để xử lý thông tin được gửi qua form. |
| method | chỉ định phương thức HTTP được sử dụng để gửi dữ liệu đến máy chủ web bằng trình duyệt. Giá trị có thể là get (mặc định) và post |
| target | Chỉ định nơi hiển thị phản hồi nhận được sau khi gửi form. Các giá trị có thể có là _blank, _self, _parent và _top. |
| enctype | Chỉ định cách dữ liệu form sẽ được mã hóa khi gửi form đến máy chủ. Chỉ áp dụng khi giá trị của method là post. |
Lưu ý: Thuộc tính name đại diện cho tên của form trong bộ sưu tập form. Giá trị của nó phải là duy nhất trong số các form trong tài liệu và không được trống.
Nguồn bài viết: tutorialrepublic.com
