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

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

  thành phần

• 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 -

    Làm cách nào để tạo biểu mẫu nội tuyến trong Bootstrap 5?

    Hiển thị biểu mẫu Bootstrap nội tuyến . Tuy nhiên, bạn có thể làm cho nhãn biểu mẫu và đầu vào xuất hiện trong dòng, theo chiều ngang bằng cách áp dụng lớp biểu mẫu trong dòng . (Lưu ý rằng nó sẽ chỉ xuất hiện trong dòng trong các cổng xem có chiều rộng ít nhất là 576px. )

    Làm cách nào để tạo biểu mẫu đăng ký trong HTML bằng Bootstrap?

    Biểu mẫu tùy chỉnh trong Bootstrap là gì?

    Trong bootstrap 4, biểu mẫu được sử dụng để thu thập thông tin cụ thể từ khách truy cập vào trang web của bạn. Biểu mẫu tùy chỉnh là những biểu mẫu có thêm điều khiển tùy chỉnh , tôi. e. , nút radio tùy chỉnh, hộp kiểm tùy chỉnh, v.v.

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

    Bạn có thể thêm cột và hàng bằng cách thêm . In the example above, the email and password fields are separated into two columns within a row. This is why they are displayed side by side on a webpage.