TWITTER BOOTSTRAP 3
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 9: Xây dựng form với bootstrap 3

Khi các bạn tiến hành xây dựng giao diện một website thì form chính là thành phần không thể thiếu đối với website của bạn. Đối với Css thông thường khi stylesheet một form thì chúng ta thường bị mất nhiều thời gian vào các việc như là canh lề cho thẻ label canh chỉnh margin & padding cho khung form. Nhưng từ khi bootstrap ra đời thì những điều đó không còn đáng lo ngại nửa, vì sao tôi tự tin nói vậy thì các bạn sẽ có câu trả lời sau khi đọc hết bài viết này.

Các website thường sử dụng ba kiểu form như là.

  • Vertical Form (Form dọc)
  • Horizontal Form (Form Ngang)
  • Inline Form (Form Thường).

Chúng ta sẽ lần lượt tìm hiểu thông qua từng kiểu form.

test php

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. Định dạng Vertical form

Đây là một dạng kiểu form phổ biến mà chúng ta thường dùng khi xây dựng giao diện website cho các trang liên hệ, đặt hàng..vvv

Ví du: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Vertical Form Layout</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<style type="text/css">
    .example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="example">
<div class="container">
    <div class="row">
    <h2>Vertical Form</h2>
        <form>
        <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
            <label>Mật Khẩu</label>
            <input type="password" class="form-control" placeholder="Password">
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> Ghi Nhớ</label>
        </div>
        <button type="submit" class="btn btn-primary">Đăng Nhập</button>
    </form>
    </div>
</div>
    
</div>
</body>
</html>                                     


vertical form bootstrap 3 png
Vertical Form

Mọi thành phần bên trong form đều được bao quanh bởi cặp thẻ form và bên trong nó là class form-group và bên trong thành phần input được định nghĩa bằng class form-control, class này có tác dụng stylesheet cho thẻ input. Nếu bạn bỏ class này ra thì thẻ input sẽ trở nên giống thẻ input html thông thường không còn hiệu ưng ouline khi click chuột vào nửa.Hầu như mọi thành phần thuộc form html đều phải khải báo class này nếu như bạn xây dựng form bằng bootstrap.

2. Horizontal Form trong bootstrap 3

Kiểu form này định dạng hơi phức tạp một xíu và nó có kết hợp với Grid system để bố cục kích thước của form và tag label cho hợp lý. Để có thể làm việc tốt với kiểu form này tôi cần các bạn chú ý các class sau.

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

  • control-label (Khai báo class này ở tag label mới có thể gán class col-xs-x vào được)
  • form-horizontal (Định dạng kiểu form ngang)
  • col-xs-offset-2 (Canh lề trái)

Ok, để có cái nhìn trực quan hơn với kiểu form này thì tôi có một ví dụ nhỏ như sau.

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Vertical Form Layout</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <style type="text/css">
        .example{
            margin: 20px;
        }

    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Horizontal Form</h2>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-xs-2">Email</label>
                        <div class="col-xs-10">
                            <input type="email" class="form-control" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-2">Mật Khẩu</label>
                        <div class="col-xs-10">
                            <input type="password" class="form-control" placeholder="Password">
                        </div>   
                    </div>
                    <div class="form-group">
                        <div class="col-xs-offset-2 col-xs-10">    
                            <button type="submit" class="btn btn-primary">Đăng Nhập</button>
                        </div>
                    </div>    
                </form>
            </div>
        </div>
    </div>
</body>
</html>                                     


horizontal form png
Hình ảnh horizontal form

Trong ví dụ này tôi sử dụng định dạng col-xs-10 có nghĩa là phần class hỗ trợ kích thước màn hình nhỏ nhất để minh họa, col-xs-offset-2 giúp chúng ta canh lề trái cho cột.

3. Inline form trong bootstrap 3

Đây là kiểu form đơn giản nhất mà các bạn thường gặp trong thiết kế website. Để hiển thị kiểu form inline thì tôi có ví dụ nhỏ để minh họa trực quan hơn là cứ nói suông.

Ví dụ: Xem demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Vertical Form Layout</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <style type="text/css">
        .example{
            margin: 20px;
        }

    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Inline Form</h2>
                <form class="form-inline">
                    <div class="form-group">
                            <input type="email" class="form-control" placeholder="Email">
                    </div>
                    <div class="form-group">
                            <input type="password" class="form-control" placeholder="Password">
                    </div>
                    <div class="form-group">
                            <button type="submit" class="btn btn-primary">Đăng Nhập</button>
                    </div>    
                </form>
            </div>
        </div>
    </div>
</body>
</html>                                     


inline form png
Hình ảnh inline form

Kiểu form này khá là đơn giản chỉ cần gán vào tag form class form-inline thì có ngay một form đẹp mắt rồi đấy.

Lời kết:

Form được bootstrap hỗ trợ khá nhiều chứ không hẳn dừng lại ở 3 kiểu form như vậy. Các bạn có thể lên trang chủ bootstrap tìm hiểu thêm về nó, còn bạn nào lười đọc tiếng anh thì chờ bài form nâng cao của tôi nhé hoặc tôi sẽ hướng dẫn trong phần project.

Cùng chuyên mục:

Download Bootstrap 4 và nhúng Bootstrap 4 vào website

Download Bootstrap 4 và nhúng Bootstrap 4 vào website

Chào các bạn, hôm nay chúng ta tiếp tục tìm hiểu về cách nhúng bootstrap…

Bootstrap4 là gì?

Bootstrap4 là gì?

Chào các bạn, nếu các bạn đang tìm hiểu về Bootstrap4 thì các bạn đã…

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Twitter Bootstrap la gi? Tìm hiểu Bootstrap CSS

Hiện nay PHP có rất nhiều Framework và CMS hỗ trợ giúp cho công việc…

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Bài 21: Xây dựng layout blog cơ bản với bootstrap 3

Sau khi kết thúc series bootstrap 3 lý thuyết thì ở bài này tôi sẽ…

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Bài 20: Jumbotron, well, progress bar trong bootstrap 3

Đây là bài lý thuyết cuối cùng trong series bootstrap 3, ở các bài tiếp…

Bài 19: Helper classes trong bootstrap 3

Bài 19: Helper classes trong bootstrap 3

Trong bài viết này thì chúng ta sẽ tìm hiểu về các helper classes hỗ…

Bài 18: Tạo Tabs trong bootstrap 3

Bài 18: Tạo Tabs trong bootstrap 3

Bài viết này cũng có một mối liên quan mật thiết với component navs vì…

Bài 17: Dropdown menu trong bootstrap 3

Bài 17: Dropdown menu trong bootstrap 3

Thuật ngữ dropdown menu đã trở nên quá quen thuộc trong mỗi người của chúng…

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Bài 16: Navigation và thuộc tính hỗ trợ trong bootstrap 3

Như vậy sau khi kết thúc bài trước thì xem như chúng ta đã tìm…

Bài 15: Navigation trong bootstrap 3

Bài 15: Navigation trong bootstrap 3

Như vậy, kết thúc bài trước chúng ta đã tìm hiểu xong khái niệm về…

Bài 14: Navs menu trong bootstrap 3

Bài 14: Navs menu trong bootstrap 3

Như vậy sau khi kết thúc bài viết trước thì các bạn cùng với tôi…

Bài 13: Glyphicons trong bootstrap 3

Bài 13: Glyphicons trong bootstrap 3

Trong bài học ngày hôm nay các bạn sẽ cùng với tôi tìm hiểu về…

Bài 12: Button group bootstrap 3

Bài 12: Button group bootstrap 3

Để có thể hiểu rõ bài viết này thì tôi cần các bạn phải xem…

Bài 11: List group trong bootstrap 3

Bài 11: List group trong bootstrap 3

Trong bài này chúng ta sẽ cùng nhau tìm hiểu khái niệm List Group trong…

Bài 10: Tạo button trong bootstrap 3

Bài 10: Tạo button trong bootstrap 3

Như vậy kết thúc 9 bài trước thì các bạn cũng phần nào cảm nhận…

Bài 8: Định dạng Typography bootstrap 3

Bài 8: Định dạng Typography bootstrap 3

Trong bài viết này, các bạn sẽ tìm hiểu về các phong cách và định…

Bài 7: Panel & Labels trong bootstrap 3

Bài 7: Panel & Labels trong bootstrap 3

Trong bài hôm nay chúng ta sẽ cùng tìm hiểu hai thuộc tính khác mà…

Bài 6: Pagination trong bootstrap 3

Bài 6: Pagination trong bootstrap 3

Pagination là một thuật ngữ không quá xa lạ đối với dân lập trình web,…

Bài 5: Breadcrumbs  & Images trong bootstrap 3

Bài 5: Breadcrumbs & Images trong bootstrap 3

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết…

Bài 4: Tạo table trong bootstrap 3

Bài 4: Tạo table trong bootstrap 3

Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần…

Top