Hướng dẫn form-control bootstrap 4

Horizontal Form (.form-inline)

   
   

      Email
      
      Password
      
      Submit
   

4- Form Grid

Hệ thống lưới (Grid System) là một hệ thống mạnh mẽ để bố trí các phần tử trên giao diện, và bạn hoàn toàn có thể sử dụng nó để áp dụng cho Form.

Grid

Dưới đây là một ví dụ sử dụng hệ thống lưới để bố trí các phần tử trên giao diện. Chú ý: Lớp .row và .form-row làm việc giống nhau, nhưng lời khuyên là bạn nên sử dụng .form-row để phù hợp với ngữ cảnh.

Grid example

Grid + .form-group

Ví dụ kết hợp Grid và lớp .form-group:

Grid + .form-group example

   

      

         Product Code
         
      
      

         Product Name
         
      
   

5- Ví dụ Form phức tạp

Kết hợp các lớp .form-group, .form-row, .form-inline,.. để có được một Form với bố trí phức tạp.

complex-form-example.html

   
      
      
      
   
   
      

         
Complex Form
         

            

               

                  Email
                  
               
               

                  Password
                  
               
            
            

               Address
               
            
            

               Address 2
               
            
            

               

                  City
                  
               
               

                  State
                  
                     Choose...
                     ...
                  
               
               

                  Zip
                  
               
            
            

               

                  
                  
                  Check me out
                  
               
            
            Sign in
         
      
      
      
      
   

6- HTML Input Types

Phần tử là một trong các thành phần tham gia vào một Form, trước HTML5 có 9 loại là button, checkbox, file, hidden, image, password, radio, reset, submit, text. Tháng 10 năm 2014, HTML5 ra đời, nó giới thiệu thêm 12 kiểu khác của là color, date, datetime-local, email, month, number, range, search, tel, time, url, week. Tất cả các loại này đều được Bootstrap hỗ trợ, và được tạo sẵn các lớp để áp dụng:

button, reset, submit

Các phần tử thực tế là một button, Bootstrap sử dụng lớp .btn để áp dụng cho chúng. Bạn có thể xem chi tiết trong bài học về Bootstrap Button.

text, password, email, search, url, tel, number

Phần tử với các kiểu ở trên là một trường (field) để người dùng nhập vào dữ liệu dạng văn bản (textual). Bootstrap sử dụng lớp .form-control để áp dụng cho các phần tử này.

text, password, email, search, url, tel, number

   

      Input Tel (Default)
      
   
   

      Bootstrap Input Tel
      
   

color

Bootstrap sử dụng lớp .form-control để áp dụng cho . Nhưng có vẻ nó hoạt động không được tốt như mong đợi (Ít nhất là cho đến phiên bản 4.1).

Ví dụ dưới đây là 2 phần tử , một phần tử không được áp dụng lớp .form-control, và một phần tử được áp dụng lớp .form-control:

Dưới đây là một ví dụ đưa ra một giải pháp khắc phục vấn đề nói trên:

input[type=color].form-control {
     height: 40px;
}

input-color-example.html

   
      
      
      
      
   
   
      

         
Input type="color"
         

            

               Input Color (Default)
               
            
            

               Bootstrap Input Color (.form-control)
               
            
         
      
      
      
      
   

checkbox, radio

Với Bootstrap một thành phần checkbox (Hoặc radio) đầy đủ bao gồm 2 phần tử và được bao bọc (wrap) bởi

. Bootstrap sử dụng lớp .form-check-input để áp dụng cho , và sử dụng lớp .form-check-label để áp dụng cho .

Chú ý: phải được đặt ngay phía sau của .

checkbox/radio

   

      

         
         Bootstrap Input Radio
      
   
   

      

         
         Bootstrap Input Checkbox
      
   

Sử dụng thuộc tính disabled áp dụng cho phần tử để vô hiệu hóa nó, người dùng sẽ không thể tương tác với phần tử này, đồng thời nó cũng vô hiệu hóa các phần tử trong cùng một .form-check với nói trên.

disabled checkbox/radio

   

      
      
      Default checkbox
      
   
   

      
      
   

range

được đưa vào HTML từ phiên bản 5, nó cho phép người dùng lựa chọn một giá trị trong một phạm vi. Bootstrap sử dụng lớp .form-control-range để áp dụng cho phần tử này.

Input range

   

      Input Range (Default)
      
   
   

      Bootstrap Input Range
      
   

file

cho phép người dùng lựa chọn một file để upload. Bootstrap sử dụng lớp .form-control-file để áp dụng cho phần tử này.

Form file

   

      Input File (Default)
      
   
   

      Bootstrap Input File
      
   

date, time, datetime-local, week, month

Phiên bản HTML5 đưa vào một số kiểu cho cho phép người dùng nhập vào thông tin liên quan ngày tháng và thời gian. Bootstrap sử dụng lớp .form-control để áp dụng cho các kiểu này.

Input Date

   
      
      
      
   
   
      

         
Input type="date" (.form-control)
         

            

               Input Date (Default)
               
            
            

               Bootstrap Input Date
               
            
         
      
      
      
      
   

Input Date

   Bootstrap Input Date
   

Input Datetime-Local

   Bootstrap Input DateTimeLocal
   

Input Time

   Bootstrap Input Time
   

Input Week

   Bootstrap Input Week
   

Input Month

   Bootstrap Input Month
   

7- Form Textarea, Select

Phần tử </strong> được sử dụng để tạo ra một vùng cho phép người dùng nhập vào dữ liệu văn bản trên một hoặc nhiều dòng. <strong>Bootstrap</strong> sử dụng lớp <strong>.form-control</strong> để áp dụng cho phần tử này. </p><p><div class="imgBox"><img alt="Hướng dẫn form-control bootstrap 4" data-orgimg="https://sg.cdnki.com/huong-dan-form-control-bootstrap-4---aHR0cHM6Ly9zMS5vN3BsYW5uaW5nLmNvbS92aS8xMTk2OS9pbWFnZXMvMjE2MzEwMTQuZ2lm.webp" ></img></div></p><p><p>Textarea</p><pre><code> <form> <div class="form-group"> <label for="myTextarea1">Textarea (Default)</label> <textarea id="myTextarea1" rows="3">Line1<br>Line2