STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • 0
    • Sao chép

    HTML - Phần 8: Thẻ Form trong HTML

    Thẻ <form> - "khung nhập liệu" trong HTML điền thông tin ứng dụng trong đăng nhập, đăng ký, đăng bài viết, ...
    06/11/2015
    30/08/2020
    3 phút đọc
    HTML - Phần 8: Thẻ Form trong HTML

    Tổng quan về thẻ <form>

    Thẻ <form> trong HTML là một thẻ chứa các thành phần nhập liệu thẻ <input> nhằm lấy các thông tin từ người dùng nhập vào, và gửi đến server.

    Có thể ứng dụng trong nhiều trường hợp:

    • Mẫu đăng ký thành viên.
    • Mẫu đăng nhập.
    • Mẫu bình luật hoặc đăng bài.
    • Mẫu đặt hàng
    • ...

    Ví dụ về <form> đăng nhập

    <form id="loginForm">
        EMAIL<br />
    <input type="text" name="email" value="" /><br /> PASSWORD<br/>
    <input type="text" name="password" value="" /><br /> <button type="submit" form="loginForm" value="Submit">Đăng nhập</button> </form>

    EMAIL

    PASSWORD

    Cấu trúc của thẻ <form>

    Thẻ <form> trong HTML có cấu trúc như sau:

    <form name="..." action="..." method="...">
        ...
        Các thành phần của form
        ...
    </form>

    Các thuộc tính của form:

    • name: tên của form.
    • action: chỉ định action sẽ nhận dữ liệu từ khi form có sự kiện click button submit.
    • method: xác định phương thức truyền dữ liệu (POST, GET).

    Nguyên tắc hoạt động của form

    Form được thiết kế nhằm mục đích đưa dữ liệu từ người dùng nhập vào form một web page trên server bằng cấu hình đường dẫn thông qua action và cách gửi dữ liệu thông qua thuộc tính method:

    • Dữ liệu cần truyền phải nằm trong cặp thẻ <form></form>.
    • Dữ liệu cần truyền phải nhập vào các form field (các thẻ <input>).
    • Dữ liệu chỉ được truyền đi khi nhấn button submit.

    Ví dụ form đăng nhập đơn giản:

    <form action="https://training.stdio.vn/login" method="get">
        EMAIL<br />
    <input type="text" name="email" /><br />     PASSWORD<br />     <input type="password" name="password" /><br />     <input type="submit" value="Đăng nhập"> </form>

    Kết quả chạy trên trình duyệt.

    EMAIL

    PASSWORD

    Sau khi nhấn Đăng nhập (Submit) thì các dữ liệu được nhập trong các thẻ input text, password được gửi lên server với:

    • Đường dẫn từ server sẽ xử lý là: action="https://training.stdio.vn/login"
    • Phương thức nhập dữ liệu là: method="get"

    * Lưu ý: Việc xây dựng 1 đường dẫn hỗ trợ đăng nhập như https://training.stdio.vn/login sẽ là công việc của Back-end.

    Thuộc tính method của form quy định cách mà form sẽ gửi dữ liệu như thế nào, thông thường có hai giá trị là postget

    get

    Các dữ liệu truyền đi hiển thị rõ ràng trên đường dẫn, ví dụ nhập:

    • email: training@stdio.vn
    • password: 123456
    • Sau đó nhấn submit, đường dẫn gửi đầy đủ sẽ là: https://training.stdio.vn/login?email=training@stdio.vn&password=123456

    Phương thức gửi dạng GET không phù hợp với các yêu cầu đòi hỏi tính bảo mật dữ liệu, do đường dẫn trên sẽ hiển thị rất rõ ràng trên trình duyệt web.

    post

    Cũng giống như get là truyền dữ liệu từ form, nhưng với post các dữ liệu của form được truyền ngầm và chỉ sử dụng được 1 lần. Khi truyền đi, đường dẫn hiển thị sẽ là: https://training.stdio.vn/login

    Bài chung series

    0
    HTML Cheat Sheet

    HTML Cheat Sheet

    STDIO Training - Đào tạo lập trình Front-end.

    Khi bạn nhấn vào liên kết sản phẩm do STDIO đề xuất và mua hàng, STDIO có thể nhận được hoa hồng. Điều này hỗ trợ STDIO tạo thêm nhiều nội dung hữu ích.. Tìm hiểu thêm.

    Đề xuất

    HTML - Phần 6: Các Thẻ Input trong HTML
    Các loại thẻ <input> hỗ trợ nhập liệu chuỗi, số, mật khẩu, ... trong ...
    HTML - Phần 4: Các Thẻ Định Dạng Danh Sách
    Các thẻ định dạnh danh sách <ul>, <ol>, <li> trong HTML. Các thẻ danh ...

    Khám phá

    HTML - Phần 3: Thẻ Liên Kết trong HTML
    Thẻ liên kết <a href="...">...</a> được xem như là trái tim của 1 trang ...
    HTML - Phần 5: Các Thẻ Hình Ảnh, Video, Audio
    Âm thanh, hình ảnh, video clip làm cho trang web thêm tiện ích, đẹp và ...
    HTML - Phần 7: Thẻ Table Trong HTML
    Trình bày dữ liệu thống kê theo dòng và cột với thẻ <table>.
    HTML - Phần 1: Cơ Bản Về HTML
    Các kiến thức cơ bản về HTML trong thiết kế web và tạo trang web đầu ...
    HTML - Phần 2: Các Thẻ Định Dạng Văn Bản
    Giới thiệu và hướng dẫn sử dụng 1 số thẻ định dạng văn bản HTML.
    Validate Form Bằng Thư Viện Knockout-Validation trong Dự Án Durandaljs
    Bài viết hướng dẫn sử dụng thư viện Knockout-Validation để kiểm tra dữ ...
    Các Thẻ - Tag Thông Dụng trong HTML
    Liệt kê các loại thẻ (tag) thường dùng trong HTML để trình bày 1 trang ...
    HTML - Phần 0: Trang Web Đầu Tiên
    Hướng dẫn từng bước đầu tiên tạo trang web với HTML.
    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020