Đầu vào Bootstrap là gì?

Trong chương này, chúng ta sẽ nghiên cứu cách tạo biểu mẫu dễ dàng bằng Bootstrap. Bootstrap giúp dễ dàng với đánh dấu HTML đơn giản và các lớp mở rộng cho các kiểu biểu mẫu khác nhau. Trong chương này, chúng ta sẽ nghiên cứu cách tạo biểu mẫu một cách dễ dàng bằng Bootstrap

Bố cục biểu mẫu

Bootstrap cung cấp cho bạn các loại bố cục biểu mẫu sau -

• Dạng dọc (mặc định)
• hình thức nội tuyến
• dạng ngang

Dạng đứng hoặc dạng cơ bản

Cấu trúc biểu mẫu cơ bản đi kèm với Bootstrap; . Để tạo một biểu mẫu cơ bản, hãy làm như sau -

• Thêm một biểu mẫu vai trò cho phụ huynh

  yếu tố

• Gói nhãn và điều khiển trong một

  với lớp. nhóm hình thức. Điều này là cần thiết cho khoảng cách tối ưu

• Thêm một lớp. kiểm soát biểu mẫu cho tất cả văn bản,

  Hộp kiểm và nút radio

  Các hộp kiểm và nút radio rất tuyệt khi bạn muốn người dùng chọn từ danh sách các tùy chọn đặt trước

  • Khi tạo biểu mẫu, hãy sử dụng hộp kiểm nếu bạn muốn người dùng chọn bất kỳ số lượng tùy chọn nào từ danh sách. Sử dụng radio nếu bạn muốn giới hạn người dùng chỉ trong một lựa chọn

  • Sử dụng. hộp kiểm-nội tuyến hoặc. lớp radio-inline thành một loạt hộp kiểm hoặc radio cho các điều khiển xuất hiện trên cùng một dòng

  Ví dụ sau minh họa cả hai loại (mặc định và nội tuyến) –

  Example of Default Checkbox and radio button 
  
  
     
        Option 1
     
  
  
  
     
        Option 2
     
  
  
  
     
         Option 1
     
  
  
  
  
  
  
     
        
        Option 2 - selecting it will deselect option 1
     
  
  
  Example of Inline Checkbox and radio button 
  
  
     
         Option 1
     
     
     
         Option 2
     
     
     
         Option 3
     
     
     
         Option 1
     
     
     
         Option 2
     
  
  

  chọn

  Một lựa chọn được sử dụng khi bạn muốn cho phép người dùng chọn từ nhiều tùy chọn, nhưng theo mặc định, nó chỉ cho phép một tùy chọn

  • Sử dụng cho các tùy chọn danh sách mà người dùng quen thuộc, chẳng hạn như trạng thái hoặc số. Sử dụng multiple = "multiple" để cho phép người dùng chọn nhiều tùy chọn. Ví dụ sau minh họa cả hai loại (chọn và nhiều) – Chọn danh sách

    Danh sách nhiều lựa chọn

    Kiểm soát tĩnh

    sử dụng lớp. biểu mẫu-kiểm soát-tĩnh trên một

    , khi bạn cần đặt văn bản thuần túy bên cạnh nhãn biểu mẫu trong biểu mẫu nằm ngang

       
    
          Email
          
          
    
             
    [email protected]
          
    
          
       
    
       
       
    
          Password
          
          
    
             
          
          
       
    
    
    

    Trạng thái kiểm soát biểu mẫu

    Ngoài các. tập trung (tôi. e. , người dùng nhấp vào trạng thái đầu vào hoặc tab vào nó), Bootstrap cung cấp kiểu dáng cho các đầu vào và lớp bị vô hiệu hóa để xác thực biểu mẫu

    Tiêu điểm đầu vào

    Khi một đầu vào nhận được. tiêu điểm, đường viền của đầu vào bị xóa và bóng hộp được áp dụng

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

    Nếu bạn cần vô hiệu hóa một đầu vào, chỉ cần thêm thuộc tính bị vô hiệu hóa sẽ không chỉ vô hiệu hóa nó;

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

    Thêm thuộc tính bị vô hiệu hóa vào một

    để vô hiệu hóa tất cả các điều khiển trong rạp cùng một lúc

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

    Bootstrap bao gồm các kiểu xác nhận lỗi, cảnh báo và thông báo thành công. Để sử dụng, chỉ cần thêm lớp thích hợp (. có cảnh báo,. có lỗi, hoặc. has-success) vào phần tử cha

    Ví dụ sau minh họa tất cả các trạng thái điều khiển biểu mẫu -

       
    
          Focused
          
    
             
          
       
    
       
       
    
          
             Disabled
          
          
    
             
          
       
    
       
       
          
    
             
                Disabled input (Fieldset disabled)
             
             
    
                
             
     
          
    
          
          
    
              
                Disabled select menu (Fieldset disabled)
             
             
    
                 
                   
                 
             
          
     
       
       
       
    
          
             Input with success
          
          
    
             
          
       
    
       
       
    
          
             Input with warning
          
          
    
             
          
    
    
    
    
       
    
       
       
    
          
             Input with error
          
          
    
             
          
       
    
    
    

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

    Bạn có thể đặt chiều cao và chiều rộng của biểu mẫu bằng cách sử dụng các lớp như. đầu vào-lg và. col-lg-* tương ứng. Ví dụ sau minh họa điều này -

    văn bản trợ giúp

    Các điều khiển biểu mẫu Bootstrap có thể có văn bản trợ giúp ở cấp độ khối chạy cùng với các đầu vào. Để thêm một khối nội dung có chiều rộng đầy đủ, hãy sử dụng. khối trợ giúp sau. Ví dụ sau minh họa điều này -

    Loại đầu vào trong Bootstrap là gì?

    Bootstrap hỗ trợ tất cả các loại đầu vào HTML5. văn bản, mật khẩu, ngày giờ, ngày giờ địa phương, ngày, tháng, giờ, tuần, số, email, url, tìm kiếm, điện thoại và màu sắc . Ghi chú. Đầu vào sẽ KHÔNG được tạo kiểu đầy đủ nếu loại của chúng không được khai báo đúng.

    Văn bản nhóm đầu vào trong Bootstrap là gì?

    Dễ dàng mở rộng các điều khiển biểu mẫu bằng cách thêm văn bản, nút hoặc nhóm nút ở hai bên của đầu vào văn bản, lựa chọn tùy chỉnh và đầu vào tệp tùy chỉnh .

    Biểu mẫu Bootstrap là gì?

    Bootstrap Dạng ngang . Trên màn hình nhỏ (767px trở xuống), nó sẽ chuyển sang dạng dọc (nhãn được đặt trên mỗi đầu vào). A horizontal form means that the labels are aligned next to the input field (horizontal) on large and medium screens. On small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input).

    Làm cách nào để căn giữa trường nhập liệu trong Bootstrap?

    Để sử dụng Bootstrap justify-content-center .

    Làm cách nào để thêm biểu tượng vào đầu vào Bootstrap?

    Chọn "Biểu tượng" từ trình đơn thả xuống Thêm hoặc Thêm trong tab "Chỉnh sửa trường" . Chọn một biểu tượng từ cửa sổ bộ chọn biểu tượng. Tạo kiểu cho màu của biểu tượng và màu nền trong tab "Cài đặt".

    Làm cách nào để tạo biểu mẫu Bootstrap?

    To create a form where all of the elements are inline, left aligned and labels are alongside, add the class . form-inline to the

    tag. By default inputs, selects, and textareas have 100% width in Bootstrap. You need to set a width on the form controls when using inline form.