Hướng dẫn checkbox bootstrap

Nội dung bài viết

Giới thiệu nội dung bài viết

Như các bạn có thể nhận thấy, hầu hết các trang website sẽ có mục để cho khách hàng nhập input vào hoặc để tìm kiếm các thông tin hoặc để nhập thông tin cá nhân như tên người dùng, password,…để truy cập hay đăng kí, đăng nhập một trang web nào đó.

Trong bài viết hôm nay anh sẽ chia sẻ về chủ đề thuộc tính Input trong lập trình web để giúp các bạn hiểu hơn về thuộc tính này. Trước hết chúng ta sẽ cùng tìm hiểu Input trong Bootstrap 4 là gì? Sau đó cùng lần lượt đi qua những hướng dẫn để thao tác với thuộc tính Input gồm textarea, checkbox, radio, select list trong Bootstrap 4. Cũng như hướng dẫn cách làm để tăng kích thước cho input trong form, và cách để tạo input group, cách kết hợp input group với checkbox hay input group với button.

Hi vọng với những chia sẻ dưới đây, các bạn sẽ nắm bắt và áp dụng được vào quá trình làm với các dự án lập trình web, và góp phần tạo ra các trang web hoàn thiện nhất cho người dùng.

1. Input trong Bootstrap 4

Bootstrap hỗ trợ các loại Input HTML5 như text, password, datetime, date, month, time, week, number, email, url, tel, và color.

Ví dụ như ta muốn input có type là text (nhập đoạn text vào input) hoặc nhập vào input là dạng password thì ta chỉ định vào trong thuộc tính type của thẻ input như sau.

1
2
3
4
5
6
7
8

   class="form-group">
   for="usr">Name:
   type="text" class="form-control" id="usr">

 class="form-group">
 for="pwd">Password:
 type="password" class="form-control" id="pwd">

Chúng ta sử dụng .form-control để input có chiều rộng full màn hình.

2. Textarea trong Bootstrap 4

Để tạo Textarea chúng ta sử dụng thẻ textarea như sau.

1
2
3
4

 class="form-group">
   for="comment">Comment:
   class="form-control" rows="5" id="comment">

3. Checkbox trong Bootstrap 4

Chúng ta sử dụng type là checkbox để tạo các checkbox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  class="form-check">
   class="form-check-label">
     type="checkbox" class="form-check-input" value="">Option 1
  

 class="form-check">
 class="form-check-label">
 type="checkbox" class="form-check-input" value="">Option 2


 class="form-check">
 class="form-check-label">
 type="checkbox" class="form-check-input" value="" disabled>Option 3

• Nếu chúng ta mong muốn các check box nằm trên cùng 1 hàng. thì chúng ta dùng class .form-check-inline.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  class="form-check-inline">
   class="form-check-label">
     type="checkbox" class="form-check-input" value="">Option 1
  

 class="form-check-inline">
 class="form-check-label">
 type="checkbox" class="form-check-input" value="">Option 2


 class="form-check-inline">
 class="form-check-label">
 type="checkbox" class="form-check-input" value="" disabled>Option 3

4. Radio trong Bootstrap 4

• Chúng ta sử dụng type là radio để tạo các radio button như sau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  class="form-check">
   class="form-check-label">
     type="radio" class="form-check-input" name="optradio">Option 1
  

 class="form-check">
   class="form-check-label">
     type="radio" class="form-check-input" name="optradio">Option 2
  

 class="form-check disabled">
   class="form-check-label">
     type="radio" class="form-check-input" name="optradio" disabled>Option 3
  
 

• Nếu chúng ta muốn các radio button cùng nằm trên 1 dòng thì sử dụng class .form-check-inline.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  class="form-check-inline">
   class="form-check-label">
     type="radio" class="form-check-input" name="optradio">Option 1
  

 class="form-check-inline">
   class="form-check-label">
     type="radio" class="form-check-input" name="optradio">Option 2
  

 class="form-check-inline disabled">
   class="form-check-label">
     type="radio" class="form-check-input" name="optradio" disabled>Option 3
  
 

5. Select list trong Bootstrap 4

Để tạo ra select list chúng ta dùng thẻ select và option như sau.

1
2
3
4
5
6
7
8
9

  class="form-group">
   for="sel1">Select list:
   class="form-control" id="sel1">
    1
    2
    3
    4
  
 

6. Tăng kích thước cho input trong form

Chúng ta có thể tạo ra những input to nhỏ và trung bình bằng cách sử dụng class form-control-sm hoặc .form-control-lg như hình bên dưới.

1
2
3

 type="text" class="form-control form-control-sm">
 type="text" class="form-control form-control">
 type="text" class="form-control form-control-lg"> 

7. Input Group

Chúng ta có thể thêm icon text hoặc button trong input bằng cách sử dụng class .input-group-prepend hoặc .input-group-append.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 

   class="input-group mb-3">
     class="input-group-prepend">
       class="input-group-text">@
    
     type="text" class="form-control" placeholder="Username">
  

   class="input-group mb-3">
     type="text" class="form-control" placeholder="Your Email">
     class="input-group-append">
       class="input-group-text">@example.com
    
  
 

8. Input Group và Checkbox

Chúng ta có thể kết hợp Input Group và checkbox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    class="input-group mb-3">
   class="input-group-prepend">
     class="input-group-text">
       type="checkbox">
    
  
   type="text" class="form-control" placeholder="Some text">


 class="input-group mb-3">
   class="input-group-prepend">
     class="input-group-text">
       type="radio">
    
  
   type="text" class="form-control" placeholder="Some text">
 

9. Input Group và Button

Chúng ta có thể kết hợp Input Group và Button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  class="input-group mb-3">
   class="input-group-prepend">
     class="btn btn-outline-primary" type="button">Basic Button
  
   type="text" class="form-control" placeholder="Some text">


 class="input-group mb-3">
   type="text" class="form-control" placeholder="Search">
   class="input-group-append">
     class="btn btn-success" type="submit">Go
  


 class="input-group mb-3">
   type="text" class="form-control" placeholder="Something clever..">
   class="input-group-append">
     class="btn btn-primary" type="button">OK
     class="btn btn-danger" type="button">Cancel
  
 

10. Video demo

11. Thực hành và Source code

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây