Hướng dẫn form action 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
• Thẻ
• Thẻ
• Thẻ

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

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ủ [tham số 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 với địa chỉ gửi đến là: //httpbin.org/anything

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]

Bên trong FORM trê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. Khi bấm nút gửi đi thi dữ liệu trong các control này 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 thì với form sử dụng phương thức get, nên bấm vào đăng nhập thì thông tin sẽ mô tả bởi URL và nhìn vào thanh địa chỉ trình duyệt sẽ có dạng

//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 dữ liệu HTTP Request.

Sửa lại ví dụ trên, 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:

    


    

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

Tạo nút bấm để gửi form HTML, submit form, reset form

Để submit [gửi] form, thường tạo ra một nút bấm từ phần tử và chỉ ra thuộc tính type="submit", khi bấm vào đó dữ liệu form sẽ gửi đi.

Thẻ không có đóng thẻ, cú pháp là

Để tạo ra nút bấm, bấm vào đó toàn bộ dữ liệu đang nhập trong FORM bị xóa đi để nhập lại thì thuộc tính type thiết lập bằng reset

Chú ý, nếu nút bấm bạn cho thêm thuộc tính name, ví dụ name="submit" thì dữ liệu [value] của nút bấm cũng được gửi đi theo tên đó.

Sử dụng thẻ tạo nút bấm

Ngoài cách tạo nút bấm dùng thẻ như trên, bạn có thể dùng [thẻ này có đóng thẻ]

Gửi
Nhập lại

Kết quả tương tự

Các phần tử trong FORM

Các phần tử trong FORM là nơi mà người dụng nhập dữ liệu, lựa chọn dữ liệu, các phần tử dữ liệu hay dùng trong form có thể kể đến là:

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 loại dữ liệu cần nhập, tên này được submit kèm dữ liệu

Thẻ trong form HTML

Thẻ là thẻ cơ bản trong form, thẻ này tạo ra các loại điều khiển tùy vào giá trị thiết lập bởi thuộc tính type. Thẻ trong html chỉ có phần mở thẻ.

Trong form người ta cũng thường dùng thẻ để cho biết tiêu đề của control tạo ra bởi

Cú pháp chính với là:

Thẻ trong HTML: được dùng để tạo nhãn cho phần tử form, phối hợp với input thì thường là:

Tiêu đề phần tử

Nếu id của control là idcontrol thì lable của nó phải có thuộc tính for="idcontrol". Tất nhiên bạn có thể dùng các phần tử HTML khác nhau để tạo nhãn như

    Họ:

    

    Tên:

    

  Tên:

  

  Mật khẩu:

  
 

    
Chọn giới tính
     Nam

     Nữ

     Khác

    
Chọn nơi sinh
     Hà Nội

     Nam Định

     Khác
    Gửi

     Tôi thích PHP

     Tôi thích HTML

     Tôi thích CSS

    Gửi

    Chọn màu yêu thích
    

    Gửi

    Nhập email
    

    Gửi

            

    Nhập văn bản

    
        Tôi đang học HTML
    

    Gửi

Gửi thông tin