Hình thức bootstrap 5

Khi bạn tiến hành xây dựng website thì form chính là thành phần bắt buộc phải có trong mỗi website chuyên nghiệp hiện nay

Thông thường thì người ta sẽ mất rất nhiều thời gian cho việc canh lề thẻ nhãn canh chỉnh lề & đệm cho form. Nhưng từ khi mà bootstrap 3 ra đời thì nó đã giúp quá trình tạo form để website trở nên dễ dàng hơn. Vậy hình thức bootstrap là gì? . Mời các bạn cùng tham khảo tại bài viết dưới đây

Bootstrap form là gì?

Hiện trang web này sẽ sử dụng 3 dạng thông tin ứng dụng như

  • Vertical Form (form dọc)
  • Biểu mẫu ngang (dạng ngang)
  • Inline Form (form thường)

Cách sử dụng form bootstrap

dạng đứng

Đây chính là 1 dạng form phổ biến mà các lập trình viên thường sử dụng để xây dựng trang web giao diện cho các trang như liên hệ, đặt hàng …

Mã Html ví dụ





Bootstrap 3 Vertical Form Layout










Vertical Form



















Kết quả sẽ như hình bên dưới

Hình thức bootstrap 5
dạng đứng

At the vertical Form format, will be around by the pair tag form and side in it will be class form-group. Ở bên trong thành phần đầu vào sẽ được định nghĩa bằng điều khiển biểu mẫu lớp, khi đó lớp này sẽ có tác dụng áp dụng biểu định kiểu cho thẻ đầu vào

Nếu bạn bỏ lớp này ra thì đầu vào sẽ trở nên giống thẻ đầu vào html thông thường không còn hiệu ứng phác thảo khi bạn nhấp chuột vào nữa. Khi đó mọi thành phần thuộc dạng html đều phải khai báo lớp này nếu bạn muốn xây dựng biểu mẫu bằng framework bootstrap

Dạng ngang

Loại biểu mẫu này sẽ phức tạp hơn 1 chút và nó sẽ kết hợp với Hệ thống lưới để bố trí kích thước của biểu mẫu và nhãn thẻ cho hợp lý nhất. Để có thể làm việc tốt với hình thức này, các bạn chú ý đến các lớp dưới đây

  • nhãn kiểm soát. bạn phải khai báo lớp này ở nhãn thẻ thì mới có thể gán lớp được col-xs-x
  • dạng ngang. định dạng định dạng ngang
  • col-xs-offset-2. định dạng canh lề trái

Code html ví dụ





Bootstrap 3 Vertical Form Layout










Horizontal Form

























Kết quả như ảnh dưới

Hình thức bootstrap 5
dạng nằm ngang

Ở ví dụ trên thì chúng tôi sử dụng định dạng col-xs-10 có nghĩa là phần lớp sẽ hỗ trợ kích thước màn hình nhỏ nhất để có thể minh họa, col-xs-offset-2 sẽ giúp chúng tôi canh trái

biểu mẫu nội tuyến

Loại biểu mẫu thứ 3 cũng là loại biểu mẫu đơn giản nhất mà các bạn thường gặp trong quá trình thiết kế website. Và để hiển thị được kiểm tra biểu mẫu nội tuyến thì tôi đang làm vd cơ bản ở bên dưới, bạn có thể tham khảo thử

Code html ví dụ





Bootstrap 3 Vertical Form Layout










Inline Form

















Kết quả như hình bên dưới

Hình thức bootstrap 5
biểu mẫu nội tuyến

Đây là form tôi thấy đơn giản nhất và bạn chỉ cần gán vào tag form class form-inline thì sẽ có ngay 1 form hoàn chỉnh

Hi vọng với những chia sẻ trên kiến ​​thức bootstrap hay kiến ​​thức về form trong bootstrap sẽ giúp bạn có thêm thông tin về các form trong bootstrap nhé. Chúc các bạn thành công