Hướng dẫn form search bootstrap 3 - biểu mẫu tìm kiếm bootstrap 3

Ví dụ và hướng dẫn sử dụng cho các kiểu điều khiển biểu mẫu, tùy chọn bố cục và các thành phần tùy chỉnh để tạo ra nhiều hình thức khác nhau.

Tổng quan

Các điều khiển biểu mẫu Bootstrap sườn mở rộng trên các kiểu mẫu được khởi động lại của chúng tôi với các lớp. Sử dụng các lớp này để chọn tham gia vào màn hình tùy chỉnh của họ để kết xuất phù hợp hơn trên các trình duyệt và thiết bị.

Hãy chắc chắn sử dụng thuộc tính

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
6 thích hợp trên tất cả các đầu vào (ví dụ:
 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
7 cho địa chỉ email hoặc
 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
8 để biết thông tin số) để tận dụng các điều khiển đầu vào mới hơn như xác minh email, lựa chọn số và hơn thế nữa.

Ở đây, một ví dụ nhanh chóng để chứng minh các kiểu hình thức Bootstrap. Tiếp tục đọc tài liệu về các lớp học bắt buộc, bố cục biểu mẫu và nhiều hơn nữa.

class="form-group"> for="exampleInputEmail1">Email address type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.
class="form-group"> for="exampleInputPassword1">Password type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> class="form-check"> type="checkbox" class="form-check-input" id="exampleCheck1"> class="form-check-label" for="exampleCheck1">Check me out type="submit" class="btn btn-primary">Submit

Kiểm soát hình thức

Hình thức văn bản Điều khiển các điều khiển giống như

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
9S,
 class="form-control" type="text" placeholder="Readonly input here…" readonly>
0 và ________ 51S, được tạo kiểu với lớp
 class="form-control" type="text" placeholder="Readonly input here…" readonly>
2. Bao gồm là phong cách cho ngoại hình chung, trạng thái tập trung, kích thước, và nhiều hơn nữa.

Hãy chắc chắn để khám phá các hình thức tùy chỉnh của chúng tôi để tiếp tục phong cách ____5050s.

Địa chỉ email

Ví dụ Chọn

Ví dụ Nhiều lựa chọn

Ví dụ Textarea

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">

Đối với đầu vào tệp, hoán đổi

 class="form-control" type="text" placeholder="Readonly input here…" readonly>
2 cho
 class="form-control" type="text" placeholder="Readonly input here…" readonly>
5.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">

Kích thước

Đặt chiều cao bằng các lớp như

 class="form-control" type="text" placeholder="Readonly input here…" readonly>
6 và
 class="form-control" type="text" placeholder="Readonly input here…" readonly>
7.

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select

Chỉ đọc

Thêm thuộc tính boolean

 class="form-control" type="text" placeholder="Readonly input here…" readonly>
8 trên đầu vào để ngăn chặn sửa đổi giá trị đầu vào. Đầu vào chỉ đọc có vẻ nhẹ hơn (giống như đầu vào bị vô hiệu hóa), nhưng giữ lại con trỏ tiêu chuẩn.

 class="form-control" type="text" placeholder="Readonly input here…" readonly>

Văn bản đơn giản

Nếu bạn muốn có các phần tử

 class="form-control" type="text" placeholder="Readonly input here…" readonly>
9 trong biểu mẫu của bạn được tạo kiểu dưới dạng văn bản thuần túy, hãy sử dụng lớp
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
0 để loại bỏ kiểu dáng trường biểu mẫu mặc định và bảo tồn lề và đệm chính xác.

class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">

 class="form-inline">
   class="form-group mb-2">
     for="staticEmail2" class="sr-only">Email
     type="text" readonly class="form-control-plaintext" id="staticEmail2" value="">
  
   class="form-group mx-sm-3 mb-2">
     for="inputPassword2" class="sr-only">Password
     type="password" class="form-control" id="inputPassword2" placeholder="Password">
  
   type="submit" class="btn btn-primary mb-2">Confirm identity

Hộp kiểm và radio

Các hộp kiểm và radio mặc định được cải thiện với sự trợ giúp của

class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
1, một lớp duy nhất cho cả hai loại đầu vào cải thiện bố cục và hành vi của các phần tử HTML của chúng. Hộp kiểm là để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio để chọn một tùy chọn từ nhiều người.a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Các hộp kiểm bị vô hiệu hóa và radio được hỗ trợ, nhưng để cung cấp con trỏ

class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
2 trên di chuột của cha mẹ
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
3, bạn sẽ cần thêm thuộc tính
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
4 vào
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
5. Thuộc tính bị vô hiệu hóa sẽ áp dụng màu sáng hơn để giúp chỉ ra trạng thái đầu vào.

Hộp kiểm và sử dụng radio được xây dựng để hỗ trợ xác thực biểu mẫu dựa trên HTML và cung cấp các nhãn ngắn gọn, có thể truy cập. Như vậy,

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
9 và
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
3 của chúng tôi là các yếu tố anh chị em trái ngược với
 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
9 trong một
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
3. Đây là một chút dài dòng hơn một chút vì bạn phải chỉ định các thuộc tính
 class="form-inline">
   class="form-group mb-2">
     for="staticEmail2" class="sr-only">Email
     type="text" readonly class="form-control-plaintext" id="staticEmail2" value="">
  
   class="form-group mx-sm-3 mb-2">
     for="inputPassword2" class="sr-only">Password
     type="password" class="form-control" id="inputPassword2" placeholder="Password">
  
   type="submit" class="btn btn-primary mb-2">Confirm identity
0 và
 class="form-inline">
   class="form-group mb-2">
     for="staticEmail2" class="sr-only">Email
     type="text" readonly class="form-control-plaintext" id="staticEmail2" value="">
  
   class="form-group mx-sm-3 mb-2">
     for="inputPassword2" class="sr-only">Password
     type="password" class="form-control" id="inputPassword2" placeholder="Password">
  
   type="submit" class="btn btn-primary mb-2">Confirm identity
1 để liên quan đến
 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
9 và
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
3.

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

Theo mặc định, bất kỳ số lượng kiểm tra và radio nào là anh chị em ngay lập tức sẽ được xếp theo chiều dọc và cách nhau một cách thích hợp với

class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
1.

Hộp kiểm mặc định

Hộp kiểm bị vô hiệu hóa

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  

Đài phát thanh mặc định

Đài phát thanh mặc định thứ hai

Đài phát thanh bị vô hiệu hóa

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
   class="form-check-label" for="exampleRadios1">
    Default radio
  

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
   class="form-check-label" for="exampleRadios2">
    Second default radio
  

 class="form-check disabled">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
   class="form-check-label" for="exampleRadios3">
    Disabled radio
  

Nội tuyến

Hộp kiểm nhóm hoặc radio trên cùng một hàng ngang bằng cách thêm

 class="form-inline">
   class="form-group mb-2">
     for="staticEmail2" class="sr-only">Email
     type="text" readonly class="form-control-plaintext" id="staticEmail2" value="">
  
   class="form-group mx-sm-3 mb-2">
     for="inputPassword2" class="sr-only">Password
     type="password" class="form-control" id="inputPassword2" placeholder="Password">
  
   type="submit" class="btn btn-primary mb-2">Confirm identity
5 vào bất kỳ
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
1 nào.

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
0

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
1

Không có nhãn

Thêm

 class="form-inline">
   class="form-group mb-2">
     for="staticEmail2" class="sr-only">Email
     type="text" readonly class="form-control-plaintext" id="staticEmail2" value="">
  
   class="form-group mx-sm-3 mb-2">
     for="inputPassword2" class="sr-only">Password
     type="password" class="form-control" id="inputPassword2" placeholder="Password">
  
   type="submit" class="btn btn-primary mb-2">Confirm identity
7 vào đầu vào trong
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
1 mà don lồng có văn bản nhãn. Hãy nhớ vẫn cung cấp một số hình thức nhãn cho các công nghệ hỗ trợ (ví dụ, sử dụng
 class="form-inline">
   class="form-group mb-2">
     for="staticEmail2" class="sr-only">Email
     type="text" readonly class="form-control-plaintext" id="staticEmail2" value="">
  
   class="form-group mx-sm-3 mb-2">
     for="inputPassword2" class="sr-only">Password
     type="password" class="form-control" id="inputPassword2" placeholder="Password">
  
   type="submit" class="btn btn-primary mb-2">Confirm identity
9).

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
2

Cách trình bày

Vì Bootstrap áp dụng

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
0 và
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
1 cho hầu hết tất cả các điều khiển biểu mẫu của chúng tôi, các biểu mẫu sẽ mặc định ngăn xếp theo chiều dọc. Các lớp bổ sung có thể được sử dụng để thay đổi bố cục này trên cơ sở mỗi dạng.

Biểu mẫu nhóm

Lớp

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
2 là cách dễ nhất để thêm một số cấu trúc vào các hình thức. Nó cung cấp một lớp linh hoạt để khuyến khích nhóm các nhãn, điều khiển, văn bản trợ giúp tùy chọn thích hợp và hình thành tin nhắn xác thực. Theo mặc định, nó chỉ áp dụng
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
3, nhưng nó chọn các kiểu bổ sung trong
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
4 khi cần thiết. Sử dụng nó với
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
5S,
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
6 hoặc gần như bất kỳ yếu tố nào khác.

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
3

Hình thức lưới

Các hình thức phức tạp hơn có thể được xây dựng bằng các lớp lưới của chúng tôi. Sử dụng chúng cho bố cục biểu mẫu yêu cầu nhiều cột, độ rộng khác nhau và các tùy chọn căn chỉnh bổ sung.

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
4

Hàng hình thành

Bạn cũng có thể trao đổi

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
7 cho
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
8, một biến thể của hàng lưới tiêu chuẩn của chúng tôi để ghi đè máng xối cột mặc định cho bố cục chặt chẽ hơn và nhỏ gọn hơn.

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
5

Các bố cục phức tạp hơn cũng có thể được tạo ra với hệ thống lưới.

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
6

Hình thức ngang

Tạo các biểu mẫu ngang với lưới bằng cách thêm lớp

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
7 vào các nhóm hình thành và sử dụng các lớp
 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
   class="form-check-label" for="exampleRadios1">
    Default radio
  

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
   class="form-check-label" for="exampleRadios2">
    Second default radio
  

 class="form-check disabled">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
   class="form-check-label" for="exampleRadios3">
    Disabled radio
  
0 để chỉ định độ rộng của nhãn và điều khiển của bạn. Hãy chắc chắn thêm
 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
   class="form-check-label" for="exampleRadios1">
    Default radio
  

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
   class="form-check-label" for="exampleRadios2">
    Second default radio
  

 class="form-check disabled">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
   class="form-check-label" for="exampleRadios3">
    Disabled radio
  
1 vào
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
3 của bạn để họ tập trung theo chiều dọc với các điều khiển hình thức liên quan của chúng.

Đôi khi, bạn có thể cần sử dụng các tiện ích lề hoặc đệm để tạo ra sự liên kết hoàn hảo mà bạn cần. Ví dụ: chúng tôi đã xóa

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
   class="form-check-label" for="exampleRadios1">
    Default radio
  

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
   class="form-check-label" for="exampleRadios2">
    Second default radio
  

 class="form-check disabled">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
   class="form-check-label" for="exampleRadios3">
    Disabled radio
  
3 trên nhãn đầu vào radio xếp chồng lên nhau để sắp xếp tốt hơn đường cơ sở văn bản.

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
7

Kích thước nhãn nằm ngang

Hãy chắc chắn sử dụng

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
   class="form-check-label" for="exampleRadios1">
    Default radio
  

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
   class="form-check-label" for="exampleRadios2">
    Second default radio
  

 class="form-check disabled">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
   class="form-check-label" for="exampleRadios3">
    Disabled radio
  
4 hoặc
 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
   class="form-check-label" for="exampleRadios1">
    Default radio
  

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
   class="form-check-label" for="exampleRadios2">
    Second default radio
  

 class="form-check disabled">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
   class="form-check-label" for="exampleRadios3">
    Disabled radio
  
5 cho
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
3 hoặc
 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
   class="form-check-label" for="exampleRadios1">
    Default radio
  

 class="form-check">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
   class="form-check-label" for="exampleRadios2">
    Second default radio
  

 class="form-check disabled">
   class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
   class="form-check-label" for="exampleRadios3">
    Disabled radio
  
7 của bạn để theo chính xác kích thước của
 class="form-control" type="text" placeholder="Readonly input here…" readonly>
6 và
 class="form-control" type="text" placeholder="Readonly input here…" readonly>
7.

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
8

Kích thước cột

Như được hiển thị trong các ví dụ trước, hệ thống lưới của chúng tôi cho phép bạn đặt bất kỳ số lượng

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
00 nào trong một
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
7 hoặc
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
8. Họ sẽ phân chia chiều rộng có sẵn như nhau giữa họ. Bạn cũng có thể chọn một tập hợp con của các cột của mình để chiếm ít nhiều không gian, trong khi các
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
00 còn lại chia đều phần còn lại, với các lớp cột cụ thể như
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
04.

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
9

Auto-sizing

Ví dụ dưới đây sử dụng tiện ích Flexbox để tập trung theo chiều dọc và thay đổi

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
00 thành
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
06 để các cột của bạn chỉ chiếm nhiều không gian khi cần. Đặt một cách khác, các kích thước cột dựa trên nội dung.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
0

Sau đó, bạn có thể phối lại một lần nữa với các lớp cột cụ thể kích thước.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
1

Và tất nhiên điều khiển biểu mẫu tùy chỉnh được hỗ trợ.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
2

Hình thức nội tuyến

Sử dụng lớp

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
4 để hiển thị một loạt các nhãn, điều khiển biểu mẫu và các nút trên một hàng ngang. Các điều khiển hình thức trong các hình thức nội tuyến thay đổi một chút so với trạng thái mặc định của chúng.

  • Các điều khiển là
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    08, thu gọn bất kỳ không gian trắng HTML nào và cho phép bạn cung cấp kiểm soát căn chỉnh với các tiện ích khoảng cách và flexbox.
  • Các nhóm điều khiển và các nhóm đầu vào nhận
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    09 để ghi đè mặc định bootstrap
     class="form-check">
       class="form-check-input" type="checkbox" value="" id="defaultCheck1">
       class="form-check-label" for="defaultCheck1">
        Default checkbox
      
    
     class="form-check">
       class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
       class="form-check-label" for="defaultCheck2">
        Disabled checkbox
      
    
    1.
  • Các điều khiển chỉ xuất hiện nội tuyến trong các chế độ xem rộng ít nhất 576px để tính đến các khung nhìn hẹp trên thiết bị di động.only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.

Bạn có thể cần phải giải quyết thủ công chiều rộng và sự liên kết của các điều khiển biểu mẫu riêng lẻ với các tiện ích khoảng cách (như hiển thị bên dưới). Cuối cùng, hãy chắc chắn luôn bao gồm

class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
3 với mỗi điều khiển biểu mẫu, ngay cả khi bạn cần ẩn nó khỏi khách truy cập không phải màn hình với
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
12.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
3

Kiểm soát hình thức tùy chỉnh và chọn cũng được hỗ trợ.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
4

Giải pháp thay thế cho các nhãn ẩn

Các công nghệ hỗ trợ như đầu đọc màn hình sẽ gặp rắc rối 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 đầu vào. Đối với các hình thức nội tuyến này, bạn có thể ẩn các nhãn bằng lớp

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
12. Có nhiều phương pháp thay thế để cung cấp nhãn cho các công nghệ hỗ trợ, chẳng hạn như thuộc tính
 class="form-inline">
   class="form-group mb-2">
     for="staticEmail2" class="sr-only">Email
     type="text" readonly class="form-control-plaintext" id="staticEmail2" value="">
  
   class="form-group mx-sm-3 mb-2">
     for="inputPassword2" class="sr-only">Password
     type="password" class="form-control" id="inputPassword2" placeholder="Password">
  
   type="submit" class="btn btn-primary mb-2">Confirm identity
9,
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
15 hoặc
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
16. Nếu không có thứ nào trong số này, các công nghệ hỗ trợ có thể sử dụng thuộc tính
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
17, nếu có, nhưng lưu ý rằng việc sử dụng
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
17 làm thay thế cho các phương pháp ghi nhãn khác không được khuyến khích.

Trợ giúp văn bản

Văn bản trợ giúp cấp khối có thể được tạo bằng

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
19 (trước đây được gọi là
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
20 trong V3). Văn bản trợ giúp nội tuyến có thể được triển khai linh hoạt bằng cách sử dụng bất kỳ phần tử HTML nội tuyến và các lớp tiện ích như
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
21.

Kết hợp văn bản trợ giúp với các điều khiển biểu mẫu

Văn bản trợ giúp phải được liên kết rõ ràng với điều khiển biểu mẫu mà nó liên quan đến việc sử dụng thuộc tính

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
22. Điều này sẽ đảm bảo rằng các công nghệ hỗ trợ, chẳng hạn như những người đọc màn hình, sẽ thông báo văn bản trợ giúp này khi người dùng tập trung hoặc nhập điều khiển.

Trợ giúp văn bản dưới đây có thể được tạo kiểu với

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
19. Lớp này bao gồm
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
0 và thêm một số lề trên cùng để dễ dàng khoảng cách từ các đầu vào ở trên.

Mật khẩu Mật khẩu của bạn phải dài 8-20 ký tự, chứa các chữ cái và số và không được chứa khoảng trắng, ký tự đặc biệt hoặc biểu tượng cảm xúc.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
5

Văn bản nội tuyến có thể sử dụng bất kỳ phần tử HTML nội tuyến điển hình nào (có thể là

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
25,
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
26 hoặc một cái gì đó khác) không có gì khác hơn là một lớp tiện ích.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
6

Biểu mẫu bị vô hiệu hóa

Thêm thuộc tính boolean

class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
4 trên đầu vào để ngăn chặn các tương tác của người dùng và làm cho nó có vẻ nhẹ hơn.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
7

Thêm thuộc tính

class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
4 vào
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
5 để vô hiệu hóa tất cả các điều khiển bên trong.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
8

Hãy cẩn thận với neo

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

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
9,
 class="form-control" type="text" placeholder="Readonly input here…" readonly>
0 và
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
32) bên trong
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
33 dưới dạng bị vô hiệu hóa, ngăn chặn cả tương tác bàn phím và chuột trên chúng. Tuy nhiên, nếu biểu mẫu của bạn cũng bao gồm các yếu tố
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
34, chúng sẽ chỉ được cung cấp một kiểu
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
35. Như đã lưu ý trong phần về trạng thái bị vô hiệu hóa cho các nút (và cụ thể trong phần phụ cho các phần tử neo), thuộc tính CSS này chưa được chuẩn hóa và không được hỗ trợ đầy đủ trong Opera 18 trở xuống, hoặc trong Internet Explorer 10 và won 'T ngăn người dùng bàn phím có thể tập trung hoặc kích hoạt các liên kết này. Vì vậy, để được an toàn, hãy sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết đó.

Khả năng tương thích trình duyệt chéo

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, don don hỗ trợ đầy đủ cho thuộc tính

class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
4 trên
 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
5. Sử dụng JavaScript tùy chỉnh để vô hiệu hóa các trường trong các trình duyệt này.

Thẩm định

Cung cấp phản hồi có giá trị, có thể hành động cho người dùng của bạn với xác thực HTML5 Form có sẵn trong tất cả các trình duyệt được hỗ trợ của chúng tôi. Chọn từ phản hồi xác thực mặc định của trình duyệt hoặc triển khai các thông báo tùy chỉnh với các lớp tích hợp và JavaScript khởi động của chúng tôi.

Chúng tôi đánh giá cao các kiểu xác thực tùy chỉnh vì mặc định trình duyệt gốc không được công bố để sàng lọc độc giả.highly recommend custom validation styles as native browser defaults are not announced to screen readers.

Làm thế nào nó hoạt động

Ở đây, cách thức xác nhận hình thức hoạt động với bootstrap:

  • Xác thực biểu mẫu HTML được áp dụng thông qua CSS, hai lớp giả,
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    38 và
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    39. Nó áp dụng cho các yếu tố
     class="form-control form-control-lg">
      Large select
    
     class="form-control">
      Default select
    
     class="form-control form-control-sm">
      Small select
    
    9,
     class="form-control" type="text" placeholder="Readonly input here…" readonly>
    0 và
     class="form-control" type="text" placeholder="Readonly input here…" readonly>
    1.
  • Bootstrap phạm vi các kiểu
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    38 và
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    39 cho lớp phụ huynh ____145, thường được áp dụng cho
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    46. Mặt khác, bất kỳ trường bắt buộc nào không có giá trị hiển thị là không hợp lệ trên tải trang. Bằng cách này, bạn có thể chọn khi nào sẽ kích hoạt chúng (thường là sau khi gửi biểu mẫu được thử).
  • Là một dự phòng, các lớp
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    47 và
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    48 có thể được sử dụng thay vì các lớp giả để xác thực phía máy chủ. Họ không yêu cầu lớp phụ huynh
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    45.
  • Do các ràng buộc trong cách CSS hoạt động, chúng ta không thể (hiện tại) áp dụng các kiểu cho
    class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
    3 xuất hiện trước khi kiểm soát biểu mẫu trong DOM mà không có sự trợ giúp của JavaScript tùy chỉnh.
  • Tất cả các trình duyệt hiện đại hỗ trợ API xác thực ràng buộc, một loạt các phương thức JavaScript để xác thực các điều khiển biểu mẫu.
  • Thông báo phản hồi có thể sử dụng các mặc định của trình duyệt (khác nhau cho mỗi trình duyệt và không thể thay đổi thông qua CSS) hoặc các kiểu phản hồi tùy chỉnh của chúng tôi với HTML và CSS bổ sung.
  • Bạn có thể cung cấp các thông báo hợp lệ tùy chỉnh với
    class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
    51 trong JavaScript.

Với ý nghĩ đó, hãy xem xét các bản demo sau cho các kiểu xác thực biểu mẫu tùy chỉnh của chúng tôi, các lớp bên máy chủ tùy chọn và mặc định trình duyệt.

Kiểu tùy chỉnh

Đối với các thông báo xác thực biểu mẫu Bootstrap tùy chỉnh, bạn sẽ cần thêm thuộc tính boolean

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
52 vào
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
46 của bạn. Điều này vô hiệu hóa các công cụ phản hồi mặc định của trình duyệt, nhưng vẫn cung cấp quyền truy cập vào API xác thực biểu mẫu trong JavaScript. Cố gắng gửi biểu mẫu dưới đây; JavaScript của chúng tôi sẽ chặn nút gửi và chuyển tiếp phản hồi cho bạn.

Khi cố gắng gửi, bạn sẽ thấy các kiểu

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
38 và
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
39 được áp dụng cho các điều khiển biểu mẫu của bạn.

class="form-group"> for="exampleFormControlFile1">Example file input type="file" class="form-control-file" id="exampleFormControlFile1">
9

Trình duyệt mặc định

Không quan tâm đến thông điệp phản hồi xác thực tùy chỉnh hoặc viết javascript để thay đổi hành vi biểu mẫu? Tất cả tốt, bạn có thể sử dụng mặc định trình duyệt. Hãy thử gửi biểu mẫu dưới đây. Tùy thuộc vào trình duyệt và hệ điều hành của bạn, bạn sẽ thấy một kiểu phản hồi hơi khác nhau.

Mặc dù các kiểu phản hồi này không thể được tạo kiểu với CSS, bạn vẫn có thể tùy chỉnh văn bản phản hồi thông qua JavaScript.

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
0

Phía máy chủ

Chúng tôi khuyên bạn nên sử dụng xác thực phía máy khách, nhưng trong trường hợp bạn yêu cầu phía máy chủ, bạn có thể chỉ ra các trường biểu mẫu không hợp lệ và hợp lệ với

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
47 và
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
48. Lưu ý rằng
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
58 cũng được hỗ trợ với các lớp này.

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
1

Các yếu tố được hỗ trợ

Các mẫu ví dụ của chúng tôi hiển thị các

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
9 văn bản gốc ở trên, nhưng các kiểu xác thực biểu mẫu cũng có sẵn cho các điều khiển biểu mẫu tùy chỉnh của chúng tôi.

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
2

Chú giải công cụ

Nếu bố cục biểu mẫu của bạn cho phép, bạn có thể trao đổi các lớp

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
60 cho các lớp
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
61 để hiển thị phản hồi xác thực trong một chú giải công cụ theo kiểu. Hãy chắc chắn có cha mẹ với
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
62 trên đó để định vị chú giải công cụ. Trong ví dụ dưới đây, các lớp cột của chúng tôi đã có điều này, nhưng dự án của bạn có thể yêu cầu thiết lập thay thế.

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
3

Hình thức tùy chỉnh

Để có nhiều tùy chỉnh hơn và tính nhất quán của trình duyệt chéo, hãy sử dụng các yếu tố biểu mẫu hoàn toàn tùy chỉnh của chúng tôi để thay thế các mặc định của trình duyệt. Chúng được xây dựng trên đỉnh của đánh dấu ngữ nghĩa và có thể truy cập, vì vậy họ thay thế chắc chắn cho bất kỳ điều khiển biểu mẫu mặc định nào.

Hộp kiểm và radio

Mỗi hộp kiểm và radio được bọc trong

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   class="form-check-label" for="defaultCheck1">
    Default checkbox
  

 class="form-check">
   class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
   class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  
6 với anh chị em
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
26 để tạo điều khiển tùy chỉnh của chúng tôi và
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
3 cho văn bản đi kèm. Về mặt cấu trúc, đây là cách tiếp cận giống như mặc định
class="form-group row"> for="staticEmail" class="col-sm-2 col-form-label">Email class="col-sm-10"> type="text" readonly class="form-control-plaintext" id="staticEmail" value=""> class="form-group row"> for="inputPassword" class="col-sm-2 col-form-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">
1 của chúng tôi.

Chúng tôi sử dụng bộ chọn anh chị em (

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
67) cho tất cả các trạng thái
 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
9 của chúng tôi giống như ____ 169 Khi kết hợp với lớp
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
70, chúng ta cũng có thể tạo kiểu văn bản cho từng mục dựa trên trạng thái ________ 49.

Chúng tôi ẩn

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
9 mặc định với
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
73 và sử dụng
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
70 để xây dựng chỉ báo biểu mẫu tùy chỉnh mới ở vị trí của nó với
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
75 và
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
76. Thật không may, chúng tôi có thể xây dựng một tùy chỉnh từ
 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
9 vì CSS, ____ ____178 không hoạt động trên yếu tố đó.

Trong các trạng thái đã kiểm tra, chúng tôi sử dụng các biểu tượng SVG nhúng Base64 từ biểu tượng mở. Điều này cung cấp cho chúng tôi sự kiểm soát tốt nhất cho kiểu dáng và định vị trên các trình duyệt và thiết bị.base64 embedded SVG icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices.

Hộp kiểm

Kiểm tra hộp kiểm tùy chỉnh này

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
4

Hộp kiểm tùy chỉnh cũng có thể sử dụng lớp giả

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
79 khi được đặt thủ công qua JavaScript (không có thuộc tính HTML có sẵn để chỉ định nó).

Kiểm tra hộp kiểm tùy chỉnh này

Hộp kiểm tùy chỉnh cũng có thể sử dụng lớp giả

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
79 khi được đặt thủ công qua JavaScript (không có thuộc tính HTML có sẵn để chỉ định nó).

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
5

Nếu bạn sử dụng jQuery, một cái gì đó như thế này sẽ đủ:

Radio

Chuyển đổi radio tùy chỉnh này

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
6

Hoặc chuyển đổi radio tùy chỉnh khác này

Radio

Chuyển đổi radio tùy chỉnh này

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
7

Hoặc chuyển đổi radio tùy chỉnh khác này

Nội tuyến

Kiểm tra hộp kiểm tùy chỉnh này

Radio

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
8

Chuyển đổi radio tùy chỉnh này

 class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
9

Hoặc chuyển đổi radio tùy chỉnh khác này

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
0

Nội tuyến

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
1

Vô hiệu hóa

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
2

Hộp kiểm tùy chỉnh và radio cũng có thể bị vô hiệu hóa. Thêm thuộc tính boolean
4 vào 9 và chỉ báo tùy chỉnh và mô tả nhãn sẽ được tự động tạo kiểu.

Các menu tùy chỉnh ____5050 chỉ cần một lớp tùy chỉnh,

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
83 để kích hoạt các kiểu tùy chỉnh.

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
3

Bạn cũng có thể chọn từ các lựa chọn tùy chỉnh nhỏ và lớn để phù hợp với các đầu vào văn bản có kích thước tương tự của chúng tôi.

Thuộc tính
class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
84 cũng được hỗ trợ:

Như thuộc tính

class="form-group"> for="exampleFormControlInput1">Email address type="email" class="form-control" id="exampleFormControlInput1" placeholder=""> class="form-group"> for="exampleFormControlSelect1">Example select class="form-control" id="exampleFormControlSelect1"> 1 2 3 4 5 class="form-group"> for="exampleFormControlSelect2">Example multiple select multiple class="form-control" id="exampleFormControlSelect2"> 1 2 3 4 5 class="form-group"> for="exampleFormControlTextarea1">Example textarea class="form-control" id="exampleFormControlTextarea1" rows="3">
85:

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
4

Trình duyệt tệp

 class="form-control form-control-lg">
  Large select

 class="form-control">
  Default select

 class="form-control form-control-sm">
  Small select
5

Đầu vào tệp là sở hữu Gnarly trong nhóm và yêu cầu JavaScript bổ sung nếu bạn muốn kết nối chúng với chức năng Chọn tệp và văn bản tên tệp được chọn.