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

Tại sao cần xây dựng form với Redux Form ?

Bài viết được dịch từ bài Why build your forms with Redux Form của tác giả Guilherme Gonçalves Để đọc bài viết này, bạn cần có một chút kiến thức căn bản về ReactJs Tiếp đó bạn cần tìm hiểu cơ bản về Redux Form, có thể tham khảo tại: Bắt đầu với Reactjs- Phần 5, Tìm hiểu về ...

Hoàng Hải Đăng viết 18:22 ngày 12/08/2018

Bài 19 - Tạo Collapse và Accordion với Bootstrap 3

Chào các bạn! Đã lâu rồi, hôm nay mình mới quay trở lại với đề tài về bootstrap. Thật là một thiếu sót lớn khi mình giới thiệu về các component hữu dụng của bootstrap 3 nhưng lại bỏ qua collapse và accordion . Vậy nên bài này mình xin phép được bổ sung về cách tạo collapse và accordion ...

Hoàng Hải Đăng viết 17:46 ngày 12/08/2018

Bài 8 - Sử dụng Popover trong bootstrap

1. Khái niệm về Popover Popover Boostrap là một dạng tooltip (Xem bài viết về Tooltip) trong Bootstrap hỗ trợ hiện thị thông tin ghi chú khá đẹp, không chỉ hỗ trợ hiện thị nội dung dưới dạng text mà còn cho phép hiện thị nội dung với cấu trúc html phức tạp mang lại hiệu quả và tính thẩm mỹ cao ...

Bùi Văn Nam viết 15:27 ngày 12/08/2018

Xây dựng form Multiple File Upload sử dụng gem cocoon và CarrierWave

Lời mở đầu Ở Tutorial này mình sẽ hướng dẫn các bạn xây dựng form upload 1 lúc nhiều ảnh sử dụng kỹ thuật nested attributes . Ích lợi của tutorial này : Upload nhiều file cùng lúc Thêm hoặc remove input fields một cách thoải mái Xem các ảnh trước khi được upload Khi xảy ra lỗi có thể ...

Bùi Văn Nam viết 14:43 ngày 12/08/2018

xây dựng API với Napa

Hiện nay Việc xây dựng API dường như đã quá quen thuộc với mỗi lập trình viên. Bằng ngôn ngữ Ruby chúng ta có rất nhiều cách để viết API. Và để hỗ trợ viết API nhanh và tiện nhất thì hiện nay có một framework giúp ta thực hiện điều đó. Đó là Napa. Cài đặt gem install napa chú ý là napa chỉ ...

Tạ Quốc Bảo viết 13:18 ngày 12/08/2018
0