Sử dụng thẻ đầu vào để gửi biểu mẫu
Biểu mẫu HTML là một trong những cách cơ bản nhất để thêm tương tác vào trang web của bạn. Bạn có thể đặt câu hỏi và thu hút câu trả lời từ người đọc, cung cấp thêm thông tin từ cơ sở dữ liệu, thiết lập trò chơi và hơn thế nữa. Có một số phần tử HTML mà bạn có thể sử dụng để tạo biểu mẫu của mình. Và khi bạn đã xây dựng biểu mẫu của mình, có rất nhiều cách khác nhau để gửi dữ liệu đó đến máy chủ hoặc chỉ bắt đầu hành động biểu mẫu đang chạy.
Đây là một số cách bạn có thể gửi biểu mẫu của mình:
-
- Đây là phương pháp phổ biến nhất để nhận dữ liệu đến máy chủ, nhưng nó có thể rất đơn giản.
-
- Sử dụng một hình ảnh làm cho nó rất dễ dàng để làm cho nút gửi của bạn phù hợp với phong cách của trang web của bạn. Nhưng một số người có thể không nhận ra nó như là một nút gửi.
-
- Nút INPUT của nút cung cấp nhiều tùy chọn giống như thẻ INPUT của hình ảnh, nhưng trông giống như loại gửi tiêu chuẩn. Nó yêu cầu JavaScript để kích hoạt.
-
- Phần tử COMMAND là mới trong HTML5 và nó cung cấp một cách để kích hoạt các tập lệnh và biểu mẫu với các hành động liên quan. Nó được kích hoạt bằng JavaScript.
Yếu tố INPUT
Phần tử INPUT là cách phổ biến nhất để gửi biểu mẫu, tất cả những gì bạn làm là chọn một loại (nút, hình ảnh hoặc trình) và nếu cần thêm một số tập lệnh để gửi cho hành động biểu mẫu.
Phần tử có thể được viết như thế. Nhưng nếu bạn làm thế, bạn sẽ có kết quả khác nhau trong các trình duyệt khác nhau. Hầu hết các trình duyệt tạo một nút có nội dung “Gửi” nhưng Firefox tạo nút có nội dung “Gửi truy vấn”. Để thay đổi nút mà bạn nói, bạn nên thêm thuộc tính:
value = "Gửi biểu mẫu">
Phần tử này được viết như thế, nhưng nếu bạn bỏ qua tất cả các thuộc tính khác, tất cả những gì sẽ hiển thị trong trình duyệt là một nút màu xám trống. Để thêm văn bản vào nút, hãy sử dụng thuộc tính giá trị. Nhưng nút này sẽ không gửi biểu mẫu trừ khi bạn sử dụng JavaScript.
onclick = "submit ();">
Điều này tương tự như loại nút, cần một kịch bản để gửi biểu mẫu. Ngoại trừ thay vì giá trị văn bản, bạn cần thêm URL nguồn hình ảnh.
src = "submit.gif">
Phần tử BUTTON
Phần tử BUTTON yêu cầu cả thẻ mở và thẻ đóng Khi bạn sử dụng, bất kỳ nội dung nào bạn đính kèm bên trong thẻ sẽ được đính kèm trong một nút. Sau đó, bạn kích hoạt nút bằng tập lệnh.
Gửi biểu mẫu
Bạn có thể bao gồm hình ảnh trong nút của bạn hoặc kết hợp hình ảnh và văn bản để tạo ra một nút thú vị hơn.
Gửi biểu mẫu
Phần tử COMMAND
Phần tử COMMAND là mới với HTML5. Nó không yêu cầu MẪU được sử dụng, nhưng nó có thể hoạt động như một nút gửi cho một biểu mẫu. Phần tử này cho phép bạn tạo nhiều trang tương tác hơn mà không yêu cầu biểu mẫu trừ khi bạn thực sự cần biểu mẫu. Nếu bạn muốn lệnh để nói điều gì đó, bạn viết thông tin trong thuộc tính label.
label = "Gửi biểu mẫu">
Nếu bạn muốn lệnh của bạn được đại diện bởi một hình ảnh, bạn sử dụng thuộc tính icon.
icon = "submit.gif">
Bài viết này là một phần của Hướng dẫn Biểu mẫu HTML. Đọc qua hướng dẫn đầy đủ để tìm hiểu cách sử dụng biểu mẫu HTML.
Các biểu mẫu HTML có nhiều cách khác nhau để gửi, như bạn đã học ở trang trước. Hai trong số các phương thức đó là thẻ INPUT và thẻ BUTTON. Có lý do chính đáng để sử dụng cả hai yếu tố này.
Yếu tố INPUT
Thẻ là cách dễ nhất để gửi biểu mẫu. Nó không đòi hỏi gì ngoài chính thẻ, thậm chí không phải là một giá trị. Khi khách hàng nhấp vào nút, nó sẽ tự động gửi. Bạn không cần thêm bất kỳ tập lệnh nào, trình duyệt biết gửi biểu mẫu khi thẻ INPUT gửi được nhấp.
Vấn đề là nút này rất xấu xí và đơn giản. Bạn không thể thêm hình ảnh vào nó. Bạn có thể tạo kiểu cho nó giống như bất kỳ phần tử nào khác, nhưng nó vẫn có thể cảm thấy giống như một nút xấu xí.
Sử dụng phương thức INPUT khi biểu mẫu của bạn phải được truy cập ngay cả trong các trình duyệt đã tắt JavaScript.
Phần tử BUTTON
Phần tử BUTTON cung cấp nhiều tùy chọn hơn để gửi biểu mẫu. Bạn có thể đặt bất kỳ thứ gì bên trong phần tử BUTTON và biến thành nút gửi. Hầu hết mọi người thường sử dụng hình ảnh và văn bản. Nhưng bạn có thể tạo ra một DIV và làm cho toàn bộ điều đó một nút gửi nếu bạn muốn.
Hạn chế lớn nhất đối với phần tử BUTTON là nó không tự động gửi biểu mẫu. Điều này có nghĩa là cần phải có một số loại kịch bản để kích hoạt nó. Và vì vậy nó ít truy cập hơn so với phương pháp INPUT. Bất kỳ người dùng nào không bật JavaScript sẽ không thể gửi biểu mẫu chỉ với phần tử BUTTON để gửi.
Sử dụng phương pháp BUTTON trên các biểu mẫu không quan trọng. Ngoài ra, đây là một cách tuyệt vời để thêm các tùy chọn gửi bổ sung trong một biểu mẫu.
Bài viết này là một phần của Hướng dẫn Biểu mẫu HTML . Đọc nó để tìm hiểu thêm về cách sử dụng biểu mẫu HTML