Chủ đề nổi bật
03/08/2018, 09:42

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

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.

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

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.

  • 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>                                     



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>                                     



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.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan
Mới nhất

Twitter Bootstrap 3

BÀI KẾ SAU BÀI KẾ TIẾP

Twitter Bootstrap 4

BÀI KẾ SAU BÀI KẾ TIẾP

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ỗ trợ của bootstrap 3, đây là các class sẽ giúp các bạn trong việc tạo ra ...

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 ta, và với bootstrap nó cũng được hỗ trợ một cách tốt nhất để người ...

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 lập trình trở nên đơn giản và thống nhất với nhau. Nhưng bạn có nghĩ trong ...

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ề navs và trong bài học ngày hôm nay thì chúng ta sẽ tiếp tục tìm hiểu về một ...

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 bootstrap 3 , nghe tới cái tên list chắc hẳn các bạn đã hình dung ra ...

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 theo chúng ta sẽ thực hành và tạo ra những mẫu layout với những kiến thức ...

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ì tabs cũng là dạng danh sách nằm ngang được phân làm từng khối riêng biệt. ...