Khi chúng ta tiến hành xây dựng giao diện cho 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 mình tự tin nói vậy thì các bạn sẽ có câu trả lời đó là vi Bootstrap 3.
Các website thường sử dụng ba kiểu form như sau.
- 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…
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Vertical Form Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.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>
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 classform-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 labelcho 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)
Để 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Vertical Form Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.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>
Trong ví dụ này tôi sử dụng định dạng col-xs-10có 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 3 Inline Form Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.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>
Kiểu form này khá là đơn giản chỉ cần gán vào tag form classform-inline thì có ngay một form đẹp mắt rồi đấy.
4. 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 mình nhé hoặc mình sẽ hướng dẫn trong phần project.
