Tạo form trong HTML với thẻ , thuộc tính action của form gán địa gửi gửi dữ liệu, thuộc tính method là phương thức gửi dữ liệu, các thẻ tạo phần tử điều khiển trong form như thẻ , ... Nút bấm submit để gửi dữ liệu trong HTML FORM.
Bạn đang xem: Form submit không cần load lại trình duyệt
Khái niệm web form
Biểu mẫu - web form - được tạo ra trong HTML là khu vực hình thành nên sự tương tác giữa người dùng và ứng dụng web. Các form cho phép người dùng nhập dữ liệu vào, sau đó gửi dữ liệu đó cho web server, hoặc nhập dữ liệu vào sử lý dữ liệu ngay tại client side.
form trong HTML được tạo ra bằng thẻ , bên trong form đó nó chứa một hoặc nhiều phần tử để nhập liệu gọi là các điều khiển (control), có nhiều loại điều khiển như:
| Điều khiển nhập một dòng text (Text Box) | |
| Điều khiển cho nhập nhiều dòng text (textarea) | |
| Điều khiển là các nút bấm (button) | Bấm vào đây |
| Các phần tử checkbox (hộp chọn) | Đã học HTML Đã học CSS |
| Các phần tử radio (chọn một): | Nam Nữ |
| Danh sách đổ xuống | Chọn cách sắp xếp: Giá tăng dần Giá giảm dần Bán chạy Mới nhất |
| ... và một số điều khiển khác ... |
Hầu hết các control (điều khiển) để người dùng nhập thông tin, dữ liệu được tạo ra bằng thẻ HTML và đi cùng nó thường là phần tử để tạo ra nhãn (tiêu đề) cho control.
Thẻ , tạo web form đầu tiên
Để tạo ra HTML Form thì dùng đến thẻ , sau đó nội dung trong thẻ trình bày các HTML và các phần tử là điều khiển (control) có trong form.
Thẻ cơ bản có hai thuộc tính cần lưu tâm là action và method:
Thuộc tính action trong form: thuộc tính để thiết lập URL sẽ nhận dữ liệu, là địa chỉ mà dữ liệu của form gửi đến (submit đến, post đến). Thiếu tham số này thì action bằng URL đang truy cập (tức gửi thông tin form đến server theo địa chỉ đang truy cập). Web server nhận được dữ liệu, xử lý và trả về nội dung nào đó.Ví dụ tạo form html
Ví dụ FORM HTML sau yêu cầu người dùng điền tên đăng nhập, password và bấm vào nút Đăng nhập để gửi đi.
Tên đăng nhập: Mật khẩu:
(Bạn có thể điền thông tin và bấm vào nút đăng nhập để kiểm tra dữ liệu gửi đến server)
Với FORM HTML trên, nó có ba điều khiển (control), đều được tạo ra từ thẻ chúng được đặt tên thông qua thuộc tính name gồm: name, pass, submit. Tên này coi như tên trường dữ liệu mà FORM sẽ gửi đi. Khi bấm gửi dữ liệu (submit dữ liệu) ở trên là nút (Đăng nhập) thì dữ liệu trong các control sẽ được gửi đi, khi gửi đi mỗi dữ liệu gồm tên và giá trị.
Giả sử bạn nhập vào tên là test, mật khẩu là abc rồi bấm vào Đăng nhập. Form trên gửi bằng phương thức get, do vậy dữ liệu trong FORM sẽ nằm trong cấu trúc URL gửi đến server. Bạn sẽ thấy ngay địa chỉ trình duyệt sẽ có dạng
https://httpbin.org/anything?name=test&pass=abc
Bạn thấy các dữ liệu trong thẻ input đã được biểu diễn bằng URL với tên dữ liệu tương ứng với tên của input là: name, pass
Trong trường hợp bạn chọn method là post thì sẽ không nhìn thấy dữ liệu biểu diễn qua URL như thế này mà dữ liệu được tích hợp vào cấu trúc của HTTP Request. Sẽ là ẩn với người dùng.
Sửa lại ví dụ trên (đổi sang phương thức post), bạn thử submit lại để kiểm tra:
FORM này gửi dữ liệu bằng phương thức POST (an toàn hơn)
Tên đăng nhập: Mật khẩu:Tạo nút bấm để gửi (submit) form HTML, reset form
Để có nút bấm submit, bấm vào đó dữ liệu của form được thu thập và gửi đi thì bạn có thể dùng thẻ hoặc thẻ :
Nút bấm bằng thẻ
Thẻ là thẻ rỗng (không có đóng thẻ), cú pháp là
Tạo nút bấm gửi (submit) thì cho thuộc tính type="submit", còn nhãn nút bấm thiết lập qua thuộc tính value="Text", Ví dụ:
Thẻ tạo ra nút bấm trình bày phức tạp hơn, do nó chứa được nội dung HTML
Các phần tử điều khiển trong FORM
Các phần tử điều khiển trong FORM là nơi mà người dụng nhập dữ liệu, lựa chọn dữ liệu, thông tin trong các điều khiển này sẽ được tập hợp lại để gửi đi, để tạo ra các điều khiển ta dùng các thẻ như: ...
Tất nhiên trong FORM có thể chứa bất kỳ nội dung HTML nào, nhưng chỉ để trình bày,còn các HTML tạo control mới có chức năng nhập liệu.
Ở đây chỉ trình bày nguyên tắc chính tạo control, còn chi tiết sử dụng từng loại thẻ xem ở các bài viết tương ứng cho từng thẻ đó.
Mỗi phần tử là control của form để người dùng nhập dữ liệu thì phần tử đó cần có thuộc tính name là tên của phần tử, cũng là tên trường dữ liệu cần nhập, tên trường dữ liệu FORM sẽ gửi đi. Như ví dụ:
Nó tạo ra một textbox, đặt tên là name, nó cũng là tên trường dữ liệu gửi đi. Trong control thiếu trường này, thì dù bạn nhập dữ liệu vào, thì nó cũng sẽ không được gửi đi.
Để thêm các control cụ thể vào HTML Form, hãy xem chi tiết tại:
| Nhãn điều khiển | Lời nhắc nhập nội dung | Label - Tạo nhãn |
| Text Box | Tạo Text Box | |
| Password | Nhập Password | |
| Radio | Nam Nữ Khác | Lựa chọn Radio |
| Check Box | Tôi thích PHP Tôi thích HTML Tôi thích CSS | Lựa chọn checkbox |
| Color | Chọn màu | |
| Date | Chọn ngày tháng | |
| Time | Chọn thời gian | |
| Nhập email | ||
| Search | Hộp tìm kiếm | |
| Phone Number | Nhập số điện thoại | |
| Number | Hộp nhập số | |
| Slider | Thanh trượt chọn giá trị | |
| File | Chọn file upload | |
| Url | Hộp nhập URL | |
| Multi-line text | Tôi đang học HTML.Tôi cũng học lập trình PHP nữa. | |
| Drop-down | --Bạn chọn ngôn ngữ nào-- C# C++ PHP Ruby Javascript Dart | Hộp thả xuống |
Bài viết này hướng dẫn cách submit form mà không tải lại trang tạo ra trải nghiệm liền mạch, đặc biệt là với các Web App.
Hướng dẫn cách submit HTML form không tải lại trangTại sao nên thiết kế form submit không cần tải lại trang
Xu hướng thiết kế website hiện nay là tạo ra trải nghiệm liền mạch, không có độ trễ, đặc biệt là với các Web App mong muốn đem lại trải nghiệm như Native App trên Smart phone. Phong cách website kiểu này gọi là Single Page Application.
Với thiết kế này, Server chỉ thực hiện nhiệm vụ xử lý và trao đổi dữ liệu với Client qua REST API. Việc render giao diện sẽ nằm ở Client với HTML5, CSS3 và các framework Java
Script như Angular
JS hay Vue.JS v.v… Như vậy là cũng giảm tải chút chút cho Server.
Single Page Application – Mọi tương tác giữa client và server chủ yếu là trao đổi dữ liệuGiải pháp trao đổi dữ liệu không tải lại trang ở đây là sử dụng AJAX để thực hiện request và nhận lại dữ liệu dưới dạng một data format nào đó dễ dàng xử lý bằng Java
Script, ví du JSON hoặc XML.
Cách dùng j
Query.ajax để submit form không tải lại trang
JQuery cung cấp 3 hàm cho phép chúng ta thực hiện AJAX request đó là $.ajax, $.get và $.post, trong đó $.get và $.post chính là wrapper của $.ajax dành riêng cho GET và POST method vì vậy tôi sẽ không dùng chúng.
Dưới đây là một ví dụ sử dụng $.ajax() để submit form mà không cần reload. Giả sử ta có một form như sau:
Đoạn mã Java
Script sau sử dụng $.ajax của thư viện j
Query để submit form này.
$(document).ready(function() { $("form").submit(function(event) { $.ajax({ method: $(this).attr("method"), url: $(this).attr("action"), data: $(this).serialize(), /* ... other AJAX settings ... */ }).done(function(response) { // Process the response here }); event.prevent
Default(); // Lưu ý, để ngăn tải lại trang, ta phải gọi event.prevent
Default() hoặc đơn giản là return false trong callback của $.submit().
Ở đây ta sử dụng hàm $.serialize để tách dữ liệu từ form thành Query String, phù hợp với Content
Type mặc định là application/x-www-form-urlencoded; charset=UTF-8.
Nếu form của chúng ta gửi có cấu trúc dữ liệu phức tạp thì hãy tham khảo giải pháp tạo HTML Form chứa object và array.
Upload file với j
Query.ajax và Form
Data
Để upload được file với AJAX, ta cần sự hỗ trợ của đối tượng Form
Data. Về cơ bản đối tượng Form
Data cho phép ta gửi dữ liệu kiểu key/value thông qua giao diện XMLHttp
Request giống như khi submit().
Ví dụ với form như sau có các trường thông tin thông thường và kèm với cả một trường lựa chọn file. Lưu ý định dạng encoding type cho form có file upload là multipart/form-data.
Phần xử lý form có chút thay đổi đó là thay vì dùng $.serialize() thì ta sử dụng Form
Data như sau:
Type: false, // prevent missing boundary string process
Data: false, // do not transform to query string timeout: 60000, xhr: function () { var xhr = $.ajax
Settings.xhr(); if (xhr.upload) { xhr.upload.add
Event
Listener("progress", progress
Handler, false); } return xhr; }, }).done(function(response) { // Process the response here }); event.prevent
Default(); }); // Handle file upload progress function progress
Handler(event) { var percent = 0; var position = event.loaded || event.position; var total = event.total; if (event.length
Computable) { percent = Math.ceil(position / total * 100); } // display the progress console.log("Uploading ", percent + "%"); }});Lưu ý thêm là ta cần bổ sung cấu hình sau cho $.ajax() nếu không request sẽ bị lỗi:cache: false – Ngăn trình duyệt không cache request này.content
Type: false – Không cho j
Query gửi Content Type, nếu không sẽ làm mất chuỗi Boundary trong request.process
Data: false – Không cho j
Query tự động xử lý data thành query string.
Xem thêm: Xem Và Giới Hạn Phạm Vi Các Thiết Bị Không Tương Thích Với Phiên Bản Này
P/S: Hàm xử lý trên có bonus thêm một phần xử lý upload progress là progress
Handler. Hãy thay đổi nội dung theo ý của bạn.