Trong khi các yếu tố khác của HTML mang lại phong cách và ý nghĩa cho trang web của bạn, thì biểu mẫu HTML bổ sung tính tương tác. Biểu mẫu HTML xử lý các chức năng quan trọng như nhận đơn đặt hàng, khảo sát, đăng ký người dùng, v.v. Bạn sẽ khó tìm thấy một trang web nào không có biểu mẫu
Biểu mẫu HTML hoạt động như thế nào?
Một biểu mẫu web có hai phần. HTML 'giao diện người dùng' và bộ xử lý biểu mẫu phía sau. Phần giao diện người dùng HTML xử lý bản trình bày trong khi phần cuối xử lý các lần gửi biểu mẫu [như lưu các lần gửi biểu mẫu, gửi email, v.v.]. Tập lệnh xử lý biểu mẫu phía sau thường được viết bằng các ngôn ngữ như PHP, ASP hoặc Perl. Hình ảnh dưới đây minh họa khái niệm
- Một khách truy cập vào một trang web có chứa một biểu mẫu
- Trình duyệt web hiển thị dạng HTML
- Khách truy cập điền vào biểu mẫu và gửi
- Trình duyệt gửi dữ liệu biểu mẫu đã gửi đến máy chủ web
- Tập lệnh xử lý biểu mẫu chạy trên máy chủ web xử lý dữ liệu biểu mẫu
- Một trang phản hồi được gửi trở lại trình duyệt
Ngoài ra xem Cách xây dựng một video hướng dẫn biểu mẫu tại đây
Thẻ biểu mẫu HTML
Tất cả các yếu tố đầu vào phải được đặt trong các thẻ mở và đóng như thế này
Các yếu tố đầu vào ở đây…
Sau đây là các thuộc tính của thẻ biểu mẫu
action=“Liên kết tới tập lệnh xử lý biểu mẫu” Thuộc tính hành động trỏ đến tập lệnh phía máy chủ ['phần cuối'] xử lý việc gửi biểu mẫu. Thông thường, đây sẽ là một tập lệnh [PHP,ASP, Perl] hoặc chương trình CGI
Để biết thêm thông tin, xem. Chuyển đổi trường hành động biểu mẫu HTML một cách linh hoạt
phương pháp = nhận. post [ GET hoặc POST] Nói một cách đơn giản, nếu bạn sử dụng phương thức GET, các giá trị gửi biểu mẫu sẽ được chuyển như một phần của URL. Nếu là POST, thông tin được gửi đến máy chủ như một phần của nội dung dữ liệu và sẽ không hiển thị trong hộp URL trong trình duyệt của người dùng. Nếu bạn không chỉ định phương thức, GET sẽ được thực hiện theo mặc định
Giả sử trang xử lý biểu mẫu của bạn là tập lệnh Perl có tên formmail. làm ơn. mã biểu mẫu HTML sẽ là
................................
.....your input items here .....
................................
Đọc thêm về thẻ Biểu mẫu HTML tại đây và về các phương thức GET và Post tại đây
Các yếu tố đầu vào biểu mẫu
Bạn có thể có các loại phần tử đầu vào khác nhau trong một biểu mẫu. Ví dụ là. hộp kiểm, nút radio, hộp văn bản đơn giản, v.v.
Hãy để chúng tôi xem cách tạo các thành phần đầu vào cho một biểu mẫu
Hộp văn bản một dòng
Một hộp văn bản một dòng có thể được sử dụng để thu thập tên, email, số điện thoại, v.v. từ khách truy cập trang web của bạn
Đây là mã để tạo một hộp văn bản đơn giản
type=“text” thuộc tính 'type' cho trình duyệt biết rằng một hộp nhập văn bản một dòng sẽ được tạo
name=“FirstName” đặt tên cho trường. Tên được sử dụng để xác định trường ở phía máy chủ
Có một số thuộc tính khác mà bạn có thể sử dụng với hộp văn bản
value=“giá trị mặc định” Văn bản bạn cung cấp làm giá trị sẽ được hiển thị theo mặc định trong hộp văn bản. Ví dụ
maxlength=“maxChars” Chỉ định số ký tự tối đa mà người dùng có thể nhập vào hộp văn bản này
Hãy để chúng tôi mở rộng biểu mẫu HTML trước đây của chúng tôi với một số hộp văn bản
Name:
Email:
Có hai trường trong biểu mẫu này để thu thập tên và địa chỉ email của khách truy cập. Các
các thẻ là chia các phần tử đầu vào thành hai dòng
gửi nút
Sau khi nhập dữ liệu, người dùng nhấn nút gửi để kích hoạt trình duyệt gửi dữ liệu đến máy chủ. Bạn có thể thêm nút gửi vào biểu mẫu bằng cách sử dụng loại đầu vào 'gửi'
name = “gửi” Có thể có nhiều hơn một nút gửi trong một biểu mẫu. Về phía máy chủ, nút gửi được nhấn có thể được xác định bằng thuộc tính 'tên'
value=“Gửi” Chuỗi được cung cấp trong thuộc tính ‘value’ được hiển thị dưới dạng nhãn của nút Gửi