Trong bài này mình sẽ giới thiệu một số thẻ HTML dùng để tạo form nhập dữ liệu thường dùng nhất. Những thẻ này mình đã giới thiệu rất nhiều trong chuyên mục học HTML và CSS này.

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là gì? Tại sao chúng ta cần sử dụng form và khi nào thì sử dụng? Nên sử dụng các thẻ input nào trong quá trình tạo form? Nào, ta hãy bắt đầu nhé.

1. Form dữ liệu là gì?

Website được xem là một phần mềm giúp kết nối với tất cả người dùng trên thế giới. Toàn bộ dữ liệu mà bạn thấy trên trang web đều được gửi đến từ một địa chỉ IP thực tồn tại trên internet.

Khi bạn truy cập vào một trang web nào đó thì tức là bạn đã gửi yêu cầu địa chỉ IP tương ứng cho domain đó (ta gọi là server nhé). Server sẽ trả về cho bạn một tập hợp dữ liệu dưới định dạng HTML. Và câu hỏi đặt ra là nếu phía server cần lấy thông tin của bạn thì làm thế nào? Rất đơn giản, HTML cung cấp cho chúng ta một số thẻ giúp server có thể lấy được dữ liệu từ người dùng, đó là các thẻ thuộc nhóm form.

Vậy, form dữ liệu là một form gồm tập hợp các mã HTML thuộc nhóm form như: Form liên hệ, form bình luận, form đặt hàng … Nó sử dụng các thẻ như: input, select, option, textarea, button để giúp người dùng có thể nhập dữ liệu vào và gửi lên server.

2. Các thẻ HTML tạo form thường dùng nhất

Bây giờ mình sẽ giới thiệu các thẻ trước, sau đó chúng ta sẽ làm một form ở phần thứ 3 nhé.

Dùng thẻ form bao quanh các form lại

Tất cả các form đều phải bắt đầu bằng một thẻ form, đây là thẻ bao quanh tất cả các thẻ còn lại. Nó có hai thuộc tính quan trọng gồm method và action. Mặc dù bạn đang làm giao diện nhưng cũng nên tuân thủ quy tắc này nhé. Còn về công dụng của nó thì sau này chúng ta sẽ tìm hiểu.

<form method="post" action="url">
 
</form>

Dùng thẻ input để tạo một ô nhập dữ liệu

Thẻ input được sử dụng thường xuyên nhất. Nó có nhiều định dạng khác nhau như:

• Một ô nhập dữ liệu
• Các checkbox
• Các radio box

Để xác định loại nào thì chúng ta sử dụng thuộc tính type. Hãy xem ví dụ dưới đây để hiểu rõ hơn.

<form method="post" action="url">
    Input: <input type="text" value=""/> <br/>
    Radio: <input type="radio" value=""/> <br/>
    Checkbox: <input type="checkbox" value=""/>
</form>

Dùng thẻ textarea để lấy dữ liệu lớn

Thẻ textarea có công dụng như thẻ input type=text. Tuy nhiên, về cách hiển thị thì nó sẽ rộng hơn, và thay vì dữ liệu hiển thị trên một hàng thì nó sẽ hiển thị trên nhiều hàng.

<form method="post" action="url">
    <textarea cols="20" rows="10"></textarea>
</form>

Dùng thẻ input để tạo button submit

Nút submit rất quan trọng, nó giúp trình duyệt biết khi nào thì bắt đầu gửi dữ liệu lên server. Để tạo nút submit thì ta sử dụng thẻ input như sau.

<form method="post" action="url">
    <input type="submit" value="Liên hệ"/>
</form>

Dùng thẻ select để tạo dạng combobox

Đây là định dạng cuối cùng trong bài học này. Để tạo một danh sách các tùy chọn dạng xổ xuống thì bạn hãy sử dụng thẻ select nhé.

<form method="post" action="url">
    <select>
        <option> -- Hãy chọn -- </option>
        <option>Tùy chọn 1</option>
        <option>Tùy chọn 2</option>
        <option>Tùy chọn 3</option>
        <option>Tùy chọn 4</option>
    </select>
</form>

Trên là tập hợp tất cả những thẻ HTML thường sử dụng nhất. Bây giờ hãy cùng mình làm một bài tập nho nhỏ nhé.