Trong bài này chúng ta sẽ tìm hiểu thẻ form trong HTML, đây là thẻ dùng để bao quanh các biểu mẫu, giúp client có thể gửi dữ liệu lên server.

Nếu bạn lướt trên các trang web trên internet thì sẽ thấy nhiều website có các phần liên hệ, đặt hàng, thanh toán giỏ hàng … tất cả những chức năng này đều phải sử dụng thẻ form đấy các bạn.

1. Thẻ form trong HTML dùng để làm gì?

Thẻ form có chức năng tạo một mẫu HTML để người dùng nhập, sau đó gửi dữ liệu lên phía server bằng cách tạo ra một hành động submit form. Bên trong form có thể chứa các phần tử sau:

  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>

Tùy vào mỗi giao diện mà bạn chọn thẻ cho phù hợp. Ví dụ, nếu bạn muốn hiển thị một danh sách các tùy chọn thì nên sử dụng thẻ select hoặc input type=radio. Còn nếu bạn muốn thu thập dữ liệu mà người dùng nhập vào thì dùng input type=text.

Bài viết này được đăng tại [free tuts .net]

Cú pháp
<form method="" action=""></form>

Trong đó:

  • action – đường dẫn mà form sẽ gửi dữ liệu tới.
  • method – phương thức gửi dữ liệu bao gồm: POST, GET.

Thẻ form trong html vẫn có các thuộc tính cơ bản như style, id, class. Tuy nhiên, thông thường thì chúng ta chỉ quan tâm đến hai thuộc tính mà mình đã liệt kê ở trên.

Xem Thêm:   Overriding và Overloading trong Java

Tóm lại: Nếu bạn cần lấy dữ liệu từ những người dùng truy cập vào website thì phải sử dụng thẻ form, thông qua hai phương thức POST hoặc GET.

2. Cách sử dụng thẻ form trong HTML

Ví dụ: Sử dụng thẻ form để tạo một vùng nhập dữ liệu đơn giản:

CodeRUN
<!DOCTYPE html>
<html>
    <head>
        <title>Học lập trình miễn phí tại freetuts.net</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Học lập trình miễn phí tại freetuts.net</h1>

        <form action="/action_page.php">
            First name: <input type="text" name="FirstName"><br>
            Last name:  <input type="text" name="LastName"><br>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

Kết quả:

html form JPG

3. Trình duyệt hỗ trợ thẻ form

  • Chrome
  • Firefox
  • IE
  • Safari
  • Opera

Tham khảo: w3schools.com

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *