Hướng dẫn submit trong html

  • Khái niệm form HTML
  • Tạo form HTML đầu tiên
  • Nút bấm submit/reset
  • Các phần tử của form

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ểnVí dụ
Điều khiển nhập một dòng text (TextBox)
Đ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)
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:
... 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 đó.
  • Thuộc tính method trong form: thuộc tính để thiết lập HTTP Method, xem thêm HTTP Request Message thường có giá trị bằng get hoặc post. Nếu không viết thuộc tính này thì method mặc định của form là get

    Sử dụng method="get" thì khi submit dữ liệu được biểu diễn (encoding) thông qua URL (người dùng thấy rõ dữ liệu trên thanh địa chỉ trình duyệt khi nó gửi đi). Sử dụng method="post" thì khi submit biểu diễn trong nội dung của Http Request gửi đến Server và là ẩn với người dùng. Sử dụng post an toàn hơn.

Khi thông tin gửi tới địa chỉ máy chủ (địa chỉ trong thuộc tính action), thì dự liệu nhận được xử lý thế nào là việc của server, bạn sẽ thực hiện việc sử lý này khi lập trình backend với một ngôn ngữ lập trình nào đó như php, c# ... Ở đây, để nhanh chóng kiểm tra xem server nhận được dữ liệu FORM gửi đến như thế nào bạn có thể sử dụng httpbin hoặc gửi thẳng đến địa chỉ : https://httpbin.org/anything để kiểm tra FORM của mình

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.


    



(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)

Hướng dẫn submit trong html

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ạ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ẻ

Thẻ

Phần sau sẽ tìm hiểu các phần tử trong FORM (các phần tử để nhập liệu).

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ư: