Trong Bootstrap 5, Form Layout (bố cục biểu mẫu) giúp bạn dễ dàng sắp xếp các thành phần của biểu mẫu theo các kiểu bố cục khác nhau như bố cục ngang, dọc, hoặc bố cục theo cột. Điều này giúp biểu mẫu trông gọn gàng, dễ sử dụng và phù hợp với mọi loại thiết bị. Trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách tạo các loại bố cục biểu mẫu phổ biến với Bootstrap 5, bao gồm form ngang, form cột, form dọc, và một số tùy chỉnh nâng cao.

1. Form dọc (Vertical Form)

Form dọc là kiểu bố cục biểu mẫu mặc định, nơi các thành phần được sắp xếp theo chiều dọc, tức là mỗi ô nhập liệu nằm dưới nhãn của nó.

Ví dụ Form dọc

html
Thử online
<form>
    <div class="mb-3">
        <label for="email" class="form-label">Địa chỉ Email</label>
        <input type="email" class="form-control" id="email" placeholder="Nhập email của bạn">
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Mật khẩu</label>
        <input type="password" class="form-control" id="password" placeholder="Nhập mật khẩu">
    </div>
    <button type="submit" class="btn btn-primary">Đăng nhập</button>
</form>

Trong ví dụ này:

  • Các phần tử được xếp theo chiều dọc, tạo nên một form gọn gàng và dễ sử dụng trên cả thiết bị di động và màn hình lớn.

2. Form ngang (Horizontal Form)

Bố cục form ngang giúp bạn đặt nhãn và ô nhập liệu cạnh nhau, tiết kiệm không gian và thường được dùng trong các biểu mẫu ngắn. Để tạo form ngang, bạn sử dụng row và col để đặt các nhãn và ô nhập liệu trên cùng một dòng.

Ví dụ Form ngang

html
Thử online
<div class="container">
    <form>
        <div class="row mb-3">
            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3">
            </div>
        </div>
        <div class="row mb-3">
            <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3">
            </div>
        </div>
        <fieldset class="row mb-3">
            <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
            <div class="col-sm-10">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1"
                           checked>
                    <label class="form-check-label" for="gridRadios1">
                        First radio
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
                    <label class="form-check-label" for="gridRadios2">
                        Second radio
                    </label>
                </div>
                <div class="form-check disabled">
                    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3"
                           disabled>
                    <label class="form-check-label" for="gridRadios3">
                        Third disabled radio
                    </label>
                </div>
            </div>
        </fieldset>
        <div class="row mb-3">
            <div class="col-sm-10 offset-sm-2">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="gridCheck1">
                    <label class="form-check-label" for="gridCheck1">
                        Example checkbox
                    </label>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Đăng Ký</button>
    </form>
</div>

Trong ví dụ này:

  • col-sm-2 và col-sm-10 dùng để tạo khoảng cách giữa nhãn và ô nhập liệu, giúp bố cục trông cân đối và dễ đọc.

3. Form dạng Inline (Inline Form)

Form dạng inline giúp các thành phần được xếp theo chiều ngang, tiết kiệm không gian và thường dùng khi biểu mẫu ngắn, như thanh tìm kiếm hoặc đăng ký nhanh. Để tạo form inline, thêm class form-inline vào biểu mẫu và sắp xếp các thành phần trên cùng một dòng.

Ví dụ Form dạng Inline

html
Thử online
<form class="d-flex">
    <input class="form-control me-2" type="search" placeholder="Tìm kiếm" aria-label="Search">
    <button class="btn btn-outline-success" type="submit">Tìm kiếm</button>
</form>

Trong ví dụ này:

  • Class d-flex được sử dụng để tạo form inline với các thành phần sắp xếp theo chiều ngang.
  • me-2 tạo khoảng cách giữa ô nhập liệu và nút, giúp form trông gọn gàng hơn.

4. Form cột (Column Form)

Bạn có thể sử dụng Column Form khi muốn chia các thành phần của biểu mẫu thành nhiều cột. Điều này thường được sử dụng trong các biểu mẫu phức tạp, nơi có nhiều trường nhập liệu cần hiển thị trên cùng một dòng.

Ví dụ Form cột

html
Thử online
<div class="container">
    <form>
        <div class="row">
            <div class="col">
                <label for="firstName" class="form-label">Tên</label>
                <input type="text" class="form-control" id="firstName" placeholder="Nhập tên">
            </div>
            <div class="col">
                <label for="lastName" class="form-label">Họ</label>
                <input type="text" class="form-control" id="lastName" placeholder="Nhập họ">
            </div>
        </div>
        <button type="submit" class="btn btn-primary mt-3">Gửi</button>
    </form>
</div>

Trong ví dụ này:

  • row và col được sử dụng để tạo hai cột cho các ô nhập liệu, giúp tiết kiệm không gian và tạo nên một bố cục biểu mẫu gọn gàng.

5. Bố cục biểu mẫu với các khoảng cách và căn chỉnh

Bootstrap 5 cho phép bạn dễ dàng điều chỉnh khoảng cách và căn chỉnh các phần tử trong form để phù hợp với thiết kế giao diện của bạn. Sử dụng các class tiện ích như mb-3, text-center, và align-items-center để kiểm soát bố cục.

Ví dụ với khoảng cách và căn chỉnh

html
Thử online
<div class="container">
    <form class="text-center">
        <div class="mb-3">
            <label for="centeredEmail" class="form-label">Email</label>
            <input type="email" class="form-control mx-auto" id="centeredEmail" style="max-width: 300px;" placeholder="Email">
        </div>
        <div class="mb-3">
            <label for="centeredPassword" class="form-label">Mật khẩu</label>
            <input type="password" class="form-control mx-auto" id="centeredPassword" style="max-width: 300px;" placeholder="Mật khẩu">
        </div>
        <button type="submit" class="btn btn-primary">Đăng nhập</button>
    </form>
</div>

Trong ví dụ này:

  • text-center giúp căn giữa các thành phần trong form.
  • mx-auto cùng với style="max-width: 300px;" giúp các ô nhập liệu luôn căn giữa màn hình với chiều rộng tối đa là 300px.

6. Bố cục form trong Modal

Bạn cũng có thể sử dụng Form Layout trong Modal (cửa sổ bật lên) của Bootstrap, cho phép người dùng nhập liệu mà không cần rời khỏi trang chính. Điều này rất hữu ích cho các biểu mẫu đăng nhập, đăng ký, hoặc gửi phản hồi.

Ví dụ form trong Modal

html
Thử online
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Mở biểu mẫu</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Đăng nhập</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="modalEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="modalEmail" placeholder="Email">
                    </div>
                    <div class="mb-3">
                        <label for="modalPassword" class="form-label">Mật khẩu</label>
                        <input type="password" class="form-control" id="modalPassword" placeholder="Mật khẩu">
                    </div>
                    <button type="submit" class="btn btn-primary">Đăng nhập</button>
                </form>
            </div>
        </div>
    </div>
</div>

Trong ví dụ này:

  • Modal chứa form đăng nhập đơn giản, cho phép người dùng nhập dữ liệu mà không cần rời khỏi trang hiện tại.

Kết luận

Form Layout trong Bootstrap 5 giúp bạn dễ dàng tạo và tùy chỉnh bố cục biểu mẫu theo nhiều cách khác nhau, từ form dọc, form ngang, form inline đến các bố cục phức tạp hơn như form cột. Sử dụng các tùy chỉnh bố cục này giúp bạn xây dựng biểu mẫu thân thiện, thẩm mỹ và dễ sử dụng, phù hợp với mọi loại thiết bị. Hãy áp dụng các ví dụ từ bài viết này để tạo các biểu mẫu chuyên nghiệp cho trang web của bạn!