Khi thiết kế biểu mẫu web, đôi khi bạn muốn hiển thị một loạt các điều khiển biểu mẫu nội tuyến, trên một hàng ngang

Trong bài viết này, chúng tôi làm việc thông qua một ví dụ đơn giản, trình bày cách tạo biểu mẫu nội tuyến Bootstrap, bao gồm thông tin về khả năng phản hồi, trình giữ chỗ, trường mật khẩu và bố cục lưới. Cuối cùng, chúng tôi thảo luận về cách bạn có thể nâng cao các biểu mẫu Bootstrap của mình bằng cách chỉnh sửa WYSIWYG

Để biết thêm thông tin về các biểu mẫu Bootstrap, hãy xem tài liệu Bootstrap

Một biểu mẫu nội tuyến Bootstrap đơn giản

Bắt đầu với mẫu Bootstrap cơ bản

Bắt đầu với Bootstrap để tải các plugin Bootstrap CSS và JavaScript

  
    
    
    

    
    

    
  
  
    
Hello, world!

    

  

SAO CHÉP

Thêm một biểu mẫu đơn giản vào dự án Bootstrap của bạn

Thêm biểu mẫu vào phần nội dung HTML của bạn. Ví dụ của chúng tôi, chúng tôi sẽ tạo một biểu mẫu đơn giản với hai trường nhập liệu, hộp kiểm và nút gửi

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

SAO CHÉP

Tốt nhất là luôn chỉ định đầu vào type (e. g. , email, password,. ) bởi vì, khi bạn làm như vậy, bạn sẽ nhận được một số chức năng bổ sung miễn phí, chẳng hạn như xác thực đầu vào và che giấu mật khẩu. Đọc thêm về các loại đầu vào

Bạn có thể cần căn chỉnh các điều khiển bằng tiện ích giãn cách. Ở đây chúng tôi đã tăng lề trên tất cả các yếu tố với

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

0

Hiển thị biểu mẫu Bootstrap nội tuyến

Theo mặc định, các điều khiển biểu mẫu sẽ được hiển thị bên dưới cái kia. Tuy nhiên, bạn có thể làm cho nhãn biểu mẫu và đầu vào của mình xuất hiện trong dòng, theo chiều ngang, bằng cách áp dụng lớp

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

1. (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. )

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

SAO CHÉP

Sau khi áp dụng lớp này vào biểu mẫu (như trong đoạn mã trên), các điều khiển sẽ được hiển thị nội tuyến như sau

Phản hồi và các biểu mẫu nội tuyến Bootstrap

Biểu mẫu nội tuyến Bootstrap sẽ trở lại bố cục dọc khi kích thước hiển thị là 576px. Tuy nhiên, bạn sẽ nhận thấy trong ví dụ của chúng tôi, có một phạm vi từ 576px đến khoảng 830px nơi các điều khiển biểu mẫu bắt đầu bao quanh. Để tránh điều này, bạn có thể buộc nó hoàn nguyên về bố cục dọc khi kích thước hiển thị nhỏ hơn 830px bằng cách thêm CSS sau

@media (max-width: 830px) {
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

SAO CHÉP

Biểu mẫu nội tuyến Bootstrap đáp ứng, được hoàn nguyên về bố cục dọc

Sử dụng văn bản giữ chỗ trong biểu mẫu nội tuyến Bootstrap

Biểu mẫu nội tuyến Bootstrap với văn bản giữ chỗ

Khi các điều khiển biểu mẫu được hiển thị nội tuyến, chúng có thể sử dụng nhiều không gian theo chiều ngang, vì vậy bạn có thể thấy đây là một tình huống thích hợp để sử dụng trình giữ chỗ thay vì nhãn. Bạn có thể làm điều này với thuộc tính

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

2, ví dụ:

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

3

________số 8_______

SAO CHÉP

Ở đây, chúng ta cũng đã sử dụng lớp

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

4. Mặc dù bạn có thể muốn xóa nhãn khỏi thiết kế trực quan, nhưng bạn nên giữ chúng vì lý do trợ năng. Vì lý do này, Bootstrap cung cấp lớp

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

4. Bất kỳ nội dung nào được áp dụng lớp này sẽ bị ẩn đi nhưng vẫn có thể truy cập được bằng các công nghệ hỗ trợ như trình đọc màn hình

Thêm văn bản giữ chỗ vào trường mật khẩu

Bạn có thể nhận thấy rằng mình không thể sử dụng thuộc tính 

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

2 với loại đầu vào password. (Thực sự có một chút tranh cãi về việc liệu văn bản giữ chỗ có phù hợp với các trường mật khẩu hay không và như thế nào. ) Tuy nhiên, nếu bạn quyết định rằng nó phù hợp với trường hợp của mình, bạn có thể thêm văn bản giữ chỗ vào kiểu nhập mật khẩu bằng cách sử dụng một chút JavaScript

SAO CHÉP

Biểu mẫu nội tuyến Bootstrap với hệ thống lưới

Để thay thế cho việc sử dụng lớp

  

    Email
    
    Password
    
    

      
      Remember me
    
    Submit
  

1, bạn có thể thử nghịch với hệ thống lưới Bootstrap. Chẳng hạn, bố cục đáp ứng tương tự như ví dụ trước được sao chép bằng HTML sau

  

    

      

        Name
        
      
      

        Email
        
      
      

        

          
          Remember me
        
      
      

        Submit
      
    
  

SAO CHÉP

CodePen này của @wilgustavo là một ví dụ điển hình về biểu mẫu phản hồi bootstrap được xây dựng với hệ thống lưới, hiển thị các tính năng và sự sắp xếp khác nhau, bao gồm cả các phần tử nội tuyến

Nâng cao biểu mẫu Bootstrap của bạn bằng chỉnh sửa WYSIWYG

Chỉnh sửa HTML WYSIWYG trong khung Bootstrap

Hãy xem bài viết của chúng tôi về cách nâng cao các biểu mẫu Bootstrap bằng chỉnh sửa WYSIWYG. Cho dù bạn đang xây dựng biểu mẫu đơn giản hay CMS, bạn đều có thể bắt đầu chỉnh sửa văn bản đa dạng thức trong dự án của mình chỉ với một vài dòng mã

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

Làm cách nào để căn chỉnh nhãn và đầu vào trong Bootstrap?

Làm cách nào để sử dụng nhóm đầu vào Bootstrap?

Làm cách nào để thêm nhãn trong Bootstrap?