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
Name:
Password:
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
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
Option 1
Option 2
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
Option 1
Option 2
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
Option 1
Option 2
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
Option 1
Option 2
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
Select list:
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
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
@
@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
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
Basic Button
Go
OK
Cancel
10. Video demo
11. Thực hành và Source code