HTML
HTML5
CANVAS
HEADING TAGS
FORM TAGS
LIST TAGS
PARAGRAPH TAGS
p br pre
COMMON TAGS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Các thẻ HTML tạo form thu thập dữ liệu

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é.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.

huong dan tao contact form don gian voi css jpg

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 methodaction. 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.

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

Kết quả:

form 1 JPG

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.

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

textarea JPG

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.

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

submit JPG

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é.

Demo RUN
<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>

select jpg

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é.

3. Tạo một form thu thập dữ liệu đơn giản bằng HTML

Chúng ta sẽ tạo một form feedback nhé các bạn. Ta cần thu thập các thông tin như sau:

  • Tên người gửi thông tin: (Dùng thẻ input type="text")
  • Địa chỉ email của họ: (Dùng thẻ input type="text")
  • Nội dung gửi feedback là gì? (Dùng thẻ textarea)
  • Gửi đến phòng ban nào? (Dùng thẻ input type="submit")

Như vậy ta sẽ cần 4 ô dữ liệu và một nút submit nhé.

<form method="post" action="url">
    <table>
        <tr>
            <td>Tên của bạn</td>
            <td>
                <input type="text" value="" name="name"/>
            </td>
        </tr>
        <tr>
            <td>Email của bạn</td>
            <td>
                <input type="text" value="" name="email"/>
            </td>
        </tr>
        <tr>
            <td>Nội dung</td>
            <td>
                <textarea cols="30" rows="10" name="content"></textarea>
            </td>
        </tr>
        <tr>
            <td>Gửi đến</td>
            <td>
                <select name="department">
                    <option>Phòng kế hoạch</option>
                    <option>Phòng tài chính</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Gửi feedback"/>
            </td>
        </tr>
    </table>
</form>

feedback 1 JPG

4. Thêm một chút CSS để form trông đẹp hơn

Mình sẽ thêm một chút CSS để giúp giao diện trông đẹp hơn xíu nhé. Các bạn hãy thêm đoạn code sau vào thẻ head.

Demo RUN
<style>
    table td{
        padding: 5px 10px;
    }
    input, textarea, select{
        border: solid 1px #ddd;
        padding: 5px 20px;
        width: 100%;
    }
    select{
        width: 180px;
    }
    input[type="submit"]{
        width: auto;
        background: red;
        color:#fff;

    }
</style>

Mình sẽ giải thích một chút:

  • input, textarea, select là style cho các thẻ đó.
  • input[type="submit"] là style cho thẻ input có type = submit.
  • select là style cho thẻ select.
  • table td là style cho các thẻ td trong table.

Xem thêm trong bài viết CSS selector nhé.

Chạy lên ta có kết quả như sau:

form feedback 2 JPG

Như vậy là mình đã hướng dẫn xong cách tạo form trong HTML, qua đó bạn cũng biết được các thẻ HTML tạo form thường sử dụng nhất rồi phải không nào. Chào các bạn, hẹn gặp lại ở bài tiếp theo.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Thẻ select trong HTML

Thẻ select trong HTML

Cách sử dụng thẻ html ...

Top