Bài 13: Form trong Bootstrap 4

0
289

Xin chào các bạn, trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo Form trong Bootstrap 4. Chúng ta sẽ lần lượt tìm hiểu từng loại input và các class mẫu trong Form Bootstrap nhé.

Bootstrap Form

Về mặt bố cục layout, Bootstrap có 3 cách để bố trí các phần tử form trên giao diện:

  • Sử dụng lớp .form-group để bố trí các phần tử theo hướng thẳng đứng
  • Sử dụng lớp .form-inline để bố trí các phần tử theo hướng nằm ngang.
  • Đặt các phần tử Form trên 1 hệ thống lưới và khi đó các phần tử sẽ hiển thị theo quy tắc hệ thống lưới Grid System của Bootstrap.

.form-group

Để bố trí các phần tử nằm theo hướng thẳng đứng thì bạn cần bao boc chúng bởi khối thẻ <div> với class .form-group như sau:

Các phần tử này sẽ có chiều rộng lấp đầy phần tử cha.

Ví dụ:

Hiển thị:

.form-inline

Để bố trí các phần tử hiển thị trên 1 hàng bạn có thể bao bọc chúng bởi thẻ <div class=”form-inline”>. Tuy nhiên chúng có thể nằm trên các dòng khác nhau nếu phần tử cha có chiều rộng quá bé.

Ví dụ:

Form trong Hệ thống lưới Grid System

Hệ thống lưới (Grid System) là một hệ thống mạnh mẽ để bố trí các phần tử trên giao diện, và bạn hoàn toàn có thể sử dụng nó để áp dụng cho Form.

Grid

Dưới đây là một ví dụ sử dụng hệ thống lưới để bố trí các phần tử trên giao diện.

Chú ý: Lớp .row và .form-row làm việc giống nhau, nhưng lời khuyên là bạn nên sử dụng .form-row để phù hợp với ngữ cảnh.

Grid + .form-group

Ví dụ kết hợp Grid và lớp .form-group:

Form nâng cao

Kết hợp các lớp .form-group, .form-row, .form-inline,.. để có được một Form với bố trí phức tạp, như sau:

Code ví dụ trên:

HTML Input Types

Phần tử <input> là một trong các thành phần tham gia vào một Form, trước HTML5 có 9 loại <input> là button, checkbox, file, hidden, image, password, radio, reset, submit, text. Tháng 10 năm 2014, HTML5 ra đời, nó giới thiệu thêm 12 kiểu khác của <input> là color, date, datetime-local, email, month, number, range, search, tel, time, url, week. Tất cả các loại này đều được Bootstrap hỗ trợ, và được tạo sẵn các lớp để áp dụng, như bảng sau:

Bootstrap ClassKiểu (Type)Mô tả
.btnbuttonĐịnh nghĩa một nút có thể nhấn (clickable)
resetĐịnh nghĩa một nút reset (Reset button), để thiết lập lại (reset) các giá trị của Form.
submitĐịnh nghĩa nút submit.
.form-check-input
.form-check-label
checkboxĐịnh nghĩa một checkbox.
radioĐịnh nghĩa một radio button.
.form-controltext(Kiểu mặc định). Định nghĩa một trường (field) để nhập vào một dòng văn bản.
passwordĐịnh nghĩa một trường để nhập vào mật khẩu.
emailĐịnh nghĩa một trường để nhập địa chỉ email.
searchĐịnh nghĩa một trường văn bản để nhập vào từ khóa tìm kiếm.
urlĐịnh nghĩa một trường để nhập vào một URL.
telĐịnh nghĩa một trường để nhập vào số điện thoại.
numberĐịnh nghĩa một trường để nhập vào một con số.
.form-controlcolorĐịnh nghĩa một color picker (Bộ chọn mầu)
.form-control-filefileĐịnh nghĩa một trường hiển thị file được chọn, và một nút “Browse” để chọn file.
hiddenĐịnh nghĩa một trường ẩn.
imageĐịnh nghĩa một image như là một nút submit.
 .form-control-rangerangeĐịnh nghĩa một control để chọn một giá trị trong một phạm vi (range) (Giống như slider)
.form-controldateĐịnh nghĩa một control để chọn ngày tháng (năm, tháng , ngày, không bao gồm thời gian)
timeĐịnh nghĩa một control để chọn thời gian (Không bao gồm múi giờ)
datetime-localĐịnh nghĩa một control để chọn ngày tháng năm và thời gian (năm, tháng, ngày, thời gian, không bao gồm múi giờ (timezone))
monthĐịnh nghĩa một control để chọn tháng và năm.
weekĐịnh nghĩa một control để chọn tuần và năm (Không bao gồm múi giờ).

button, reset, submit

Các phần tử <input type=”button|reset|submit”> thực tế là một button, Bootstrap sử dụng lớp .btn để áp dụng cho chúng. Bạn có thể xem chi tiết trong bài học về Bootstrap Button.

text, password, email, search, url, tel, number

Phần tử <input> với các kiểu ở trên là một trường (field) để người dùng nhập vào dữ liệu dạng văn bản (textual). Bootstrap sử dụng lớp .form-control để áp dụng cho các phần tử này.

color

Bootstrap sử dụng lớp .form-control để áp dụng cho <input type=”color”>.

checkbox, radio

Với Bootstrap một thành phần checkbox (hoặc radio) đầy đủ bao gồm 2 phần tử <input> và<label> được bao bọc bởi <div class=”form-check”>Bootstrap sử dụng lớp .form-check-input để áp dụng cho <input>, và sử dụng lớp .form-check-label để áp dụng cho <label>.

Sử dụng thuộc tính disabled áp dụng cho phần tử <input type=”checkbox|radio”> để vô hiệu hóa nó, người dùng sẽ không thể tương tác với phần tử này, đồng thời nó cũng vô hiệu hóa các phần tử <label> trong cùng một .form-check với <input> nói trên, như sau:

range

<input type=”range”> được đưa vào HTML từ phiên bản 5, nó cho phép người dùng lựa chọn một giá trị trong một phạm vi. Bootstrap sử dụng lớp .form-control-range để áp dụng cho phần tử này.

file

<input type=”file”> cho phép người dùng lựa chọn một file để upload. Bootstrap sử dụng lớp .form-control-file để áp dụng cho phần tử này.

date, time, datetime-local, week, month

Phiên bản HTML5 đưa vào một số kiểu cho <input> cho phép người dùng nhập vào thông tin liên quan ngày tháng và thời gian. Bootstrap sử dụng lớp .form-control để áp dụng cho các kiểu này.

Form Textarea, Select

Phần tử <textarea> được sử dụng để tạo ra một vùng cho phép người dùng nhập vào dữ liệu văn bản trên một hoặc nhiều dòng. Bootstrap sử dụng lớp .form-control để áp dụng cho phần tử này.

Phần tử <select> được sử dụng để tạo ra một danh sách các lựa chọn, và người dùng có thể lựa chọn một hoặc nhiều trong số đó.

Kết luận

Bài viết đã giúp các bạn hiểu các thông số mặc định của form ở Bootstrap 4, đồng thời cách tạo bố cục form theo 3 kiểu: form theo hàng dọc, form trên 1 dòng, và form theo hàng ngang.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây