Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Component Form Và Input Trong Bootstrap (Phần 7)

Component Form Và Input Trong Bootstrap (Phần 7)


Ngày 31 Tháng 3 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component Form và Input trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Component Form:

Form HTML là một phần không thể thiếu trong một trang web như form đăng kí, form đăng nhập... Đa số việc thết kế bố cục, style(kiểu) cho form chỉ bằng HTMl, CSS thì thật sự hơi khó và nhàm chán. Do đó Bootstrap giúp chúng ta thực hiện những việc trên đơn giản hơn rất nhiều bằng một số class được xác định trước.

Đầu tiên ta sẽ tạo một Form có bố cục theo chiều dọc bằng cách gọi thẻ form như HTML thông thường sau đó tạo các thẻ div với class form-group có chức năng chia nhỏ Form thành nhiều phần. Và trong mỗi thẻ div với class form-group sẽ chứa label và các loại ô nhập, ô chọn như input, textarea, select.... Các ô nhập này thì chúng ta phải thiết lập class form-control để tạo style chung cho các thành phần trong Form. Để hiểu rõ hơn bạn xem ví dụ bên dưới nhé:

Form Theo Chiều Dọc

See the Pen Form Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Mình có lưu ý nhỏ là các ô nhập mà được thiết lập class form-control thì sẽ có độ rộng bằng 100% của thẻ cha chứa nó. Tiếp theo chúng ta sẽ đi vào tạo một form có bố cục theo chiều ngang với các thành phần y chang ví dụ trên nhưng mình sẽ thêm một class là row vào thẻ div class form-group để sử dụng hệ thống lưới Bootstrap. Với các thành phần con trong thẻ div class form-group row thì ta sẽ chia thành các cột với độ rộng tùy vào mục đích sử dụng của mình. Để nắm rõ hơn các bạn xem ví dụ sau đây nhé:

Form Theo Chiều Ngang

See the Pen form horizontal by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để thấy sự thay đổi thì các bạn chuyển sang chế độ 0.5x, 0.25 để xem kết quả nhé. Nhiều khi bạn muốn các tiêu đề(label), ô nhập hây ô chọn, button cùng nằm trên một dòng để thu gọn bố cục, đơn giản nhất có thể thì Bootstrap cung cấp một class tên là form-inline. Nó được đặt trong thẻ form và chỉ hiển thị với các màn hình có độ rộng lớn hơn 576px. Để nắm rõ hơn hãy cùng mình xem ví dụ sau đây nhé:

Class form-inline:

See the Pen form-inline by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như bạn thấy thì mình ẩn các label trên tất cả màn hình bằng class sr-only ngoại trừ màn hình screen reader. Nếu các bạn mơ hồ về screen reader thì tìm hiểu ở đây nhé Screen Reader. Và mình sử dụng class mr-2 thiết lập margin-right cho đối tượng (cái này mình sẽ giải thích ở các bài phía sau).

Tiếp theo nếu bạn muốn trong Form có giá trị mặc định nghĩa là chỉ đọc chứ không thể thay đổi hay nhập vào bất cứ thứ gì cả (Kiểu read-only). Thì chúng ta sẽ sử dụng class form-control-plaintext thay cho class form-control. Để nắm rõ hơn các bạn xem ví dụ sau đây nhé:

Class form-control-plaintext:

See the Pen form-control-plaintext by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để không cho sửa thì bạn thiết lập thuộc tính readonly cho ô nhập mà mình muốn nhé.

Những loại ô chọn và ô nhập khác trong form:

Checkbox và radio cũng có cấu trúc như ở trên nhưng để thiết lập bố cục theo chiều dọc cho các checkbox hay radio thì chúng ta sẽ sử dụng class d-block cho thẻ label. Để hiểu cách gọi và sử dụng hai thành phần này trong Bootstrap thì bạn hãy xem đoạn code dưới đây nhé:

Checkbox và Radio:

See the Pen radio and checkbox by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thẻ select cũng giống như cấu trúc trong HTML và cách gọi trong Form của Bootstrap cũng y chang như các ví dụ trên nhé. Để hiểu rõ hơn các bạn xem ví dụ sau đây nha:

Thẻ Select:

See the Pen select form Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Có lưu ý nhỏ là khi với component select thông thường thì nó chỉ hiển thị một kết quả và khi ta nhấp vào thì nó mới sổ xuống các lựa chọn khác. Còn nếu nó mà có thuộc tính multiple thì nó sẽ sử dụng thanh cuộn để hiển thị những lựa chọn có trong thẻ select.

Như các componet khác thì Bootstrap cũng cung cấp cho ta những class để điều chỉnh kích thước của ô nhập hay ô chọn với class form-control-sm kích thước nhỏ và form-control-lg kích thước lớn. Để nắm rõ hơn bạn xem đoạn code dưới đây nhé:

Kích thước form-control:

See the Pen Size form-control Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Đôi khi bạn muốn người dùng có thêm thông tin để điền vào form cho đúng ví dụ như ô nhập tên không được chứa các kí hiệu đặc biệt, ô nhập email không quá 50 kí tự... Cái này thường sẽ sử dụng Javascript để xử lý và hiện lỗi nếu người dùng nhập sai nhưng ban đầu thì chúng ta có thể sử dụng class form-text dùng để hiển thị thông tin thêm về cách nhập dữ liệu. Để hiểu rõ các bạn xem ví dụ dưới đây nhé:

Class form-text:

See the Pen form-text Bootstrap by haycuoilennao19 (@haycuoilennao19) on CodePen.

Component Input Groupt:

Input group được tạo thành bởi thẻ div với class input-group dùng để chứa ô nhập(input) và các thành phần đi chung với nó như icon, tiền tệ... Sẽ có hai class để xác định vị trí nó với ô input là input-group-prepend được dặt phía trước và input-group-append được đặt phía sau ô input. Và để hiển thị được icon hay chữ thì ta phải bọc nó lại bằng thẻ span với class là input-group-text. Để hiễu rõ hơn bạn xem ví dụ sau đây nhé:

Class input-group:

See the Pen Input group by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây mình sử dụng Font Awesome để hiện thị icon. Nếu bạn gặp khó khăn trong việc mà tải và sử dụng Font Awesome thì mình sẽ đặt đường dẫn CDN ở dưới và bạn chỉ cần copy, đặt nó nằm trong thẻ head là có thể sử dụng được nhé.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Tiếp theo chúng ta sẽ đi vào cách tạo nhiều phần cộng thêm(chữ, icon) với một ô input và nhiều ô input với một phần cộng thêm. Nghe hơi khó hiểu nên bạn xem ví dụ để nắm rõ hơn nhé:

Thành phần cộng thêm input:

See the Pen input extra by haycuoilennao19 (@haycuoilennao19) on CodePen.

Như các componet khác thì Bootstrap cũng cung cấp cho ta những class để điều chỉnh kích thước của input group với class input-group-sm kích thước nhỏ và input-group-lg kích thước lớn. Để nắm rõ hơn bạn xem đoạn code dưới đây nhé:

Kích thước input group:

See the Pen Size input group by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các bạn nắm được component Form và Input Group trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!