Các thành phần biểu mẫu Bootstrap

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
 class="form-group">
 class="sr-only" for="exampleInputPassword3">Password
 type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">

 class="checkbox">

 type="checkbox"> Remember me


 type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
 class="form-group">
 class="sr-only" for="exampleInputPassword3">Password
 type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">

 class="checkbox">

 type="checkbox"> Remember me


 type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

Địa chỉ email

Mật khẩu

đầu vào tập tin

Ví dụ văn bản trợ giúp cấp khối tại đây

Kiểm tra tôi

   class="form-group">
     for="exampleInputEmail1">Email address
     type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  
   class="form-group">
     for="exampleInputPassword1">Password
     type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  
   class="form-group">
     for="exampleInputFile">File input
     type="file" id="exampleInputFile">
     class="help-block">Example block-level help text here.


 class="checkbox">

 type="checkbox"> Check me out


 type="submit" class="btn btn-default">Submit

Không trộn các nhóm biểu mẫu với các nhóm đầu vào

Không trộn trực tiếp các nhóm biểu mẫu với các nhóm đầu vào. Thay vào đó, hãy lồng nhóm đầu vào bên trong nhóm biểu mẫu

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

Thêm

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

Có thể yêu cầu chiều rộng tùy chỉnh

Đầu vào và lựa chọn có

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

Luôn thêm nhãn

Trình đọc màn hình sẽ gặp sự cố với các biểu mẫu của bạn nếu bạn không bao gồm nhãn cho mọi thông tin nhập vào. Đối với các biểu mẫu nội tuyến này, bạn có thể ẩn nhãn bằng lớp

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Tên

E-mail

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Địa chỉ email

Mật khẩu

nhớ tôi

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Số tiền (bằng đô la)

$

00

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

dạng ngang

Sử dụng các lớp lưới được xác định trước của Bootstrap để căn chỉnh nhãn và nhóm điều khiển biểu mẫu theo bố cục ngang bằng cách thêm

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

E-mail

Mật khẩu

nhớ tôi

Đăng nhập

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

điều khiển được hỗ trợ

Ví dụ về các điều khiển biểu mẫu chuẩn được hỗ trợ trong bố cục biểu mẫu mẫu

đầu vào

Kiểm soát biểu mẫu phổ biến nhất, các trường nhập dựa trên văn bản. Bao gồm hỗ trợ cho tất cả các loại HTML5.

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Yêu cầu khai báo kiểu

Đầu vào sẽ chỉ được tạo kiểu đầy đủ nếu

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Nhóm đầu vào

Để thêm văn bản hoặc nút tích hợp trước và/hoặc sau bất kỳ

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

vùng văn bản

Điều khiển biểu mẫu hỗ trợ nhiều dòng văn bản. Thay đổi thuộc tính

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Hộp kiểm và radio

Các hộp kiểm dùng để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio dùng để chọn một tùy chọn từ nhiều tùy chọn

Hộp kiểm hoặc radio có thuộc tính

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

Mặc định (xếp chồng)

Tùy chọn một là cái này và cái kia—hãy chắc chắn bao gồm lý do tại sao nó tuyệt vời

Tùy chọn hai bị vô hiệu hóa

Tùy chọn một là cái này và cái kia—hãy chắc chắn bao gồm lý do tại sao nó tuyệt vời

Tùy chọn hai có thể là một cái gì đó khác và chọn nó sẽ bỏ chọn tùy chọn một

Tùy chọn ba bị vô hiệu hóa

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

Hộp kiểm nội tuyến và radio

Sử dụng các lớp

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

1 2 3
1 2 3

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

Hộp kiểm và radio không có văn bản nhãn

Nếu bạn không có văn bản nào trong

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

chọn

Lưu ý rằng nhiều menu chọn gốc—cụ thể là trong Safari và Chrome—có các góc được bo tròn không thể sửa đổi thông qua thuộc tính

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Đối với các điều khiển

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

kiểm soát tĩnh

Khi bạn cần đặt văn bản thuần bên cạnh nhãn biểu mẫu trong một biểu mẫu, hãy sử dụng lớp

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

E-mail

email@ví dụ. com

Mật khẩu

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

E-mail

email@ví dụ. com

Mật khẩu

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

trạng thái lấy nét

Chúng tôi xóa các kiểu

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

Nhà nước demo

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

52

Ví dụ đầu vào ở trên sử dụng các kiểu tùy chỉnh trong tài liệu của chúng tôi để thể hiện trạng thái

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

trạng thái bị vô hiệu hóa

Thêm thuộc tính boolean

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

bộ trường bị vô hiệu hóa

Thêm thuộc tính

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

Hãy cẩn thận về chức năng liên kết của

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

81

Theo mặc định, các trình duyệt sẽ coi tất cả các điều khiển biểu mẫu gốc (các phần tử ______06,

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

Khả năng tương thích giữa các trình duyệt

Mặc dù Bootstrap sẽ áp dụng các kiểu này trong tất cả các trình duyệt, Internet Explorer 11 trở xuống không hỗ trợ đầy đủ thuộc tính

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

đầu vào bị vô hiệu hóa

Đã tắt menu chọn

Không thể kiểm tra điều này

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

trạng thái chỉ đọc

Thêm thuộc tính boolean

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

trạng thái xác thực

Bootstrap bao gồm các kiểu xác thực cho các trạng thái lỗi, cảnh báo và thành công trên các điều khiển biểu mẫu. Để sử dụng, hãy thêm

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Truyền đạt trạng thái xác thực cho các công nghệ hỗ trợ và người dùng mù màu

Việc sử dụng các kiểu xác thực này để biểu thị trạng thái của điều khiển biểu mẫu chỉ cung cấp chỉ báo dựa trên màu sắc, trực quan, sẽ không được chuyển đến người dùng công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình - hoặc người dùng mù màu

Đảm bảo rằng một dấu hiệu trạng thái thay thế cũng được cung cấp. Chẳng hạn, bạn có thể bao gồm gợi ý về trạng thái trong chính văn bản

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Nhập liệu thành công

Đầu vào có cảnh báo

Đầu vào có lỗi

Hộp kiểm thành công

Hộp kiểm có cảnh báo

Hộp kiểm có lỗi

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Với các biểu tượng tùy chọn

Bạn cũng có thể thêm các biểu tượng phản hồi tùy chọn bằng cách thêm

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Biểu tượng phản hồi chỉ hoạt động với các yếu tố văn bản

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

Biểu tượng, nhãn và nhóm đầu vào

Cần định vị thủ công các biểu tượng phản hồi cho các đầu vào không có nhãn và cho các nhóm đầu vào có tiện ích bổ sung ở bên phải. Bạn được khuyến khích cung cấp nhãn cho tất cả các đầu vào vì lý do tiếp cận. Nếu bạn muốn ngăn nhãn hiển thị, hãy ẩn chúng bằng lớp

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputAmount">Amount (in dollars)
     class="input-group">
       class="input-group-addon">$
       type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
       class="input-group-addon">.00
    
  
   type="submit" class="btn btn-primary">Transfer cash

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in

 class="form-inline">
   class="form-group">
     class="sr-only" for="exampleInputEmail3">Email address
     type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  
   class="form-group">
     class="sr-only" for="exampleInputPassword3">Password
     type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  
   class="checkbox">
    
       type="checkbox"> Remember me
    
  
   type="submit" class="btn btn-default">Sign in