Cách tạo nhãn và đầu vào trên cùng một dòng trong bootstrap 4

Bootstrap hỗ trợ tất cả các loại đầu vào HTML5. văn bản, mật khẩu, ngày giờ, datetime-local, ngày, tháng, thời gian, tuần, số, email, url, tìm kiếm, điện thoại và màu sắc

Ghi chú. Đầu vào sẽ KHÔNG được tạo kiểu đầy đủ nếu loại của chúng không được khai báo đúng

Ví dụ sau chứa ba nút radio. Tùy chọn đầu tiên được chọn theo mặc định và tùy chọn cuối cùng bị tắt

Bootstrap hỗ trợ tất cả các loại đầu vào HTML5. văn bản, mật khẩu, ngày giờ, datetime-local, ngày, tháng, thời gian, tuần, số, email, url, tìm kiếm, điện thoại và màu sắc

Ghi chú. Đầu vào sẽ KHÔNG được tạo kiểu đầy đủ nếu loại của chúng không được khai báo đúng

Ví dụ sau chứa hai yếu tố đầu vào; . Như chúng tôi đã đề cập trong chương Biểu mẫu, chúng tôi sử dụng lớp .form-control để định kiểu đầu vào với độ rộng đầy đủ và phần đệm phù hợp, v.v.

Thí dụ

  Tên.
 

  Mật khẩu.
 

Bootstrap Textarea

Ví dụ sau chứa một vùng văn bản

Thí dụ

  Nhận xét.
 

Hộp kiểm Bootstrap

Các hộp kiểm được sử dụng nếu bạn muốn người dùng chọn bất kỳ số lượng tùy chọn nào từ danh sách các tùy chọn đặt trước

Ví dụ sau có ba hộp kiểm. Tùy chọn cuối cùng bị vô hiệu hóa

Thí dụ

 
    Tùy chọn 1
 

 
    Tùy chọn 2
 

 
    Tùy chọn 3
 

Ví dụ giải thích

Sử dụng phần tử bao bọc có class="form-check" để đảm bảo lề thích hợp cho nhãn và hộp kiểm

Thêm lớp .form-check-label vào các phần tử nhãn và hộp kiểm .form-check-input vào kiểu đúng cách bên trong vùng chứa .form-check

Hộp kiểm nội tuyến

Sử dụng lớp .form-check-inline nếu bạn muốn các hộp kiểm xuất hiện trên cùng một dòng

Thí dụ

 
    Tùy chọn 1
 

 
    Tùy chọn 2
 

 
    Tùy chọn 3
 

Nút radio Bootstrap

Các nút radio được sử dụng nếu bạn muốn giới hạn người dùng chỉ trong một lựa chọn từ danh sách các tùy chọn đặt trước

Ví dụ sau chứa ba nút radio. Tùy chọn cuối cùng bị vô hiệu hóa

Thí dụ

 
    Tùy chọn 1
 

 
    Tùy chọn 2
 

 
    Tùy chọn 3
 

Đối với các hộp kiểm, hãy sử dụng lớp .form-check-inline nếu bạn muốn các nút radio xuất hiện trên cùng một dòng

Thí dụ

 
    Tùy chọn 1
 

 
    Tùy chọn 2
 

 
    Tùy chọn 3
 

Danh sách chọn Bootstrap

Danh sách chọn được sử dụng nếu bạn muốn cho phép người dùng chọn từ nhiều tùy chọn

Ví dụ sau chứa danh sách thả xuống (danh sách chọn)

Thí dụ

  Chọn danh sách.
               

Kích thước kiểm soát biểu mẫu

Thay đổi kích thước của điều khiển biểu mẫu bằng .form-control-sm hoặc type="password"0

Thí dụ

Kiểm soát biểu mẫu với văn bản thuần túy

Sử dụng type="password"1 nếu bạn muốn tạo kiểu cho trường nhập dưới dạng văn bản thuần túy

Phạm vi và tệp điều khiển biểu mẫu

Thêm lớp type="password"2 vào type="password"3 hoặc type="password"4 đến type="password"5 để tạo kiểu cho điều khiển phạm vi hoặc trường tệp có chiều rộng đầy đủ

Có một số cách tiếp cận để làm cho một phần tử đầu vào giống như nhãn của nó. Vài cách tiếp cận được thảo luận ở đây. CSS cơ bản để gắn nhãn, mở rộng và đầu vào để có đầu ra rõ ràng

Sử dụng thuộc tính float và tràn. Tạo một nhãn và tạo kiểu cho nó với thuộc tính float. Bây giờ đặt nhãn nổi (vị trí) trái hoặc phải theo yêu cầu của bạn. Điều này sẽ căn chỉnh nhãn của bạn cho phù hợp. Thuộc tính tràn cho đầu vào được sử dụng ở đây để cắt phần tràn và hiển thị phần còn lại

• Thí dụ

  
  

  
  
  

  type="password"6

  type="password"7type="password"8 type="password"9.form-control0.form-control1.form-control2

  .form-control3

  type="password"7____25.form-control2

  .form-control3

  type="password"72type="password"7type="password"74.form-control2

  type="password"76type="password"77

  type="password"78type="password"79

  type="password"76type="password"81

  type="password"82

  type="password"76type="password"84

  type="password"78type="password"86

  type="password"76type="password"81

  type="password"82

  type="password"76type="password"91

  type="password"78type="password"93

  type="password"78type="password"95

  type="password"78type="password"97

  type="password"76type="password"81

  type="password"82

  type="password"76.form-control02

  type="password"78.form-control04

  type="password"76type="password"81

  type="password"72.form-control08type="password"74.form-control2

  .form-control08.form-control5.form-control2

  .form-control3

  type="password"7____216____22

  type="password"72type="password"7.form-control20.form-control21.form-control20.form-control2

  type="password"72type="password"7.form-control26 .form-control27.form-control0.form-control29.form-control30.form-control26.form-control2

  type="password"72type="password"7.form-control35.form-control2

  type="password"76type="password"7.form-control39 type="password"70.form-control0.form-control29 type="password"73.form-control0.form-control29

  type="password"76type="password"77______20type="password"79 .form-control50.form-control0.form-control52.form-control53

  type="password"72.form-control08.form-control35.form-control2

  .form-control08.form-control16____22

  .form-control3

  .form-control08type="password"8.form-control2

• đầu ra
  
  

Sử dụng thuộc tính ô của bảng trong thuộc tính hiển thị. Tạo nhãn bên trong div và cung cấp thuộc tính hiển thị. Để làm cho phần tử đầu vào và khoảng cách được đặt bằng nhau, hãy sử dụng thuộc tính ô bảng trong các thẻ đó. Thuộc tính này làm cho phần tử hoạt động như một phần tử td. Bất kỳ mục nào được tạo gần đó, thuộc tính ô bảng sẽ thực hiện việc đó

• Thí dụ

  
  

  
  
  

  type="password"6

  type="password"7type="password"8 type="password"9.form-control0.form-control1.form-control2

  .form-control3

  type="password"7____25.form-control2

  .form-control3

  type="password"72type="password"7type="password"74.form-control2

  type="password"76type="password"77

  type="password"78type="password"79

  type="password"76type="password"81

  type="password"82

  type="password"76type="password"729

  type="password"78type="password"731

  type="password"78type="password"733

  type="password"76type="password"81

  type="password"82

  type="password"76type="password"84

  type="password"78type="password"740

  type="password"78type="password"742

  type="password"78type="password"744

  type="password"76type="password"81

  type="password"82

  type="password"76type="password"91

  type="password"78type="password"740

  type="password"78type="password"753

  type="password"76type="password"81

  type="password"82

  type="password"76.form-control02

  type="password"78.form-control04

  type="password"76type="password"81

  type="password"72.form-control08type="password"74.form-control2

  .form-control08.form-control5.form-control2

  .form-control3

  type="password"7____216____22

  type="password"72type="password"7.form-control20.form-control21.form-control20.form-control2

  .form-control3

  type="password"72type="password"7type="password"783 type="password"784.form-control0type="password"786.form-control2

  type="password"76type="password"7.form-control26 .form-control27.form-control0.form-control29.form-control30.form-control26.form-control2

  type="password"76type="password"7.form-control35type="password"800.form-control39 type="password"70.form-control0.form-control29 type="password"73.form-control0.form-control29

  type="password"808type="password"77.form-control0type="password"79

  type="password"808.form-control50.form-control0.form-control52 .form-control53

  type="password"76.form-control08.form-control35.form-control2

  type="password"72.form-control08type="password"783.form-control2

  .form-control08.form-control16____22

  .form-control3

  .form-control08type="password"8.form-control2

• đầu ra

HTML là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách cấu trúc các trang web và ứng dụng web. Bạn có thể học HTML từ đầu bằng cách làm theo Hướng dẫn HTML và Ví dụ về HTML này

CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này

Làm cách nào để đặt nhãn và đầu vào trên cùng một dòng trong Bootstrap 5?

Đầu vào có nên có nhãn không?

Làm cách nào để căn chỉnh nút radio và văn bản trong cùng một dòng Bootstrap?

Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong Bootstrap?