[Bài đọc] Tạo form với Bootstrap

Trong chương này, chúng ta sẽ nghiên cứu làm thế nào để tạo các form một cách dễ dàng bằng cách sử dụng Bootstrap.  Bootstrap làm cho việc tạo form dễ dàng hơn với sự mở rộng các class khác nhau cho form. Trong chương này chúng ta sẽ nghiên cứu cách tạo form bằng Bootstrap. 

Form Layout 

Bootstrap cung cấp cho bạn các loại bố cục sau đây:

• Dạng dọc (mặc định) 
• In-line 
• Dạng ngang 

Dạng dọc hay dạng cơ bản 

Cấu trúc dạng cơ bản đi kèm với Bootstrap. Form dạng cơ bản tự động nhận một vài class toàn cục.  Để tạo ra một form cơ bản, hãy làm như sau: 

• Phần tử <form> được thêm vào, nó bao các phần tử khác. 
• Các nhãn và các phần tử khác được đặt trong thẻ <div> với thuộc tính class là .form-group.  
• Thêm class  .form-control  cho tất cả các phần tử nhập văn bản <text>, <textarea>, và <select> 

HTML :

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Inline Form (Form trên cùng dòng)

Hãy thêm class .form-inline vào thẻ <form> của bạn nếu bạn muốn form-control của bạn hiển thi dưới dạng inline-block và được căn lề trái. Lưu ý rằng, class này chỉ hoạt động với những form nằm bên trong khung nhìn có độ rộng tối thiểu bằng 768 pixel.

HTML :

<form class = "form-inline" role = "form">
   
   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>
   
   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>
   
   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>
   
   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

• Mặc định các phần tử input, select và textarea có chiều rộng là 100% trong Bootstrap. Bạn cần phải đặt độ rộng trên form-control nằm bên trong nó khi sử dụng form trên cùng dòng. 
• Trình đọc của màn hình sẽ gặp vấn đề với form của bạn nếu bạn không gắn nhãn cho từng input. Khi sử dụng form cùng dòng, bạn có thể ẩn các nhãn đi bằng cách sử dụng class .sr-only.

Form dàn hàng ngang 

Để tạo biểu mẫu sử dụng bố cục theo chiều ngang, hãy thực hiện theo các bước sau: 

• Thêm một class .form-horizoltal trong thẻ <form>. 
• Các nhãn và các phần tử khác đặt trong thẻ <div> với thuộc tính class .form-group. 
• Thêm class  .control-label  vào phần tử label. 

HTML :

<form class = "form-horizontal" role = "form">
   
   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
		
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>
   
   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>
	
</form>

Các phần tử trong form 

Mặc định Bootstrap hỗ trợ các phần tử: input, textarea, checkbox, radio, và select. 

Phần tử nhập liệu – Input

Phần tử nhập liệu văn bản phổ biến nhất là input.  Đây là nơi người dùng nhập vào hầu hết các dữ liệu cần thiết.  Bootstrap hỗ trợ cho tất cả các kiểu nhập liệu HTML5 nguyên  bản :  text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel  và color .

Các input sẽ chỉ được style đầy đủ nếu thuộc tính type của chúng được khai báo rõ ràng.

Để thêm text hoặc các nút vào đằng trước hoặc đằng sau của <input>

HTML :

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>
  
</form>

Phần tử Textarea 

Textarea là một dạng form-control hỗ trợ nhiều dòng text. Khi cần thiết, hãy thay đổi thuộc tính rows.

HTML :

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>
   
</form>

Phần tử Checkbox và Radio button  

Checkbox và radio button rất tuyệt khi bạn muốn người dùng lựa chọn từ danh sách các tùy chọn có sẵn. 

• Khi xây dựng một biểu mẫu, sử dụng  checkbox  nếu bạn muốn người dùng chọn bất kỳ số lượng các tùy chọn từ một danh sách.  Sử dụng radio  nếu bạn muốn giới hạn người dùng chỉ với một lựa chọn. 
• Sử dụng class  .checkbox-line  hoặc  .radio-line line cho một chuỗi các checkbox hoặc radio khi các phần tử này cùng nằm trên một dòng. 

Ví dụ dưới đây thể hiện cả hai loại (mặc định và inline form) 

HTML :

<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>
   
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>
   
   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

Phần tử select 

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

• Sử dụng <select> cho danh sách các tùy chọn của người dùng, chẳng hạn như tùy chọ về trạng thái hoặc số. 
• Sử dụng thuộc tính  multiple = “multiple” trong thẻ <select>  cho phép người dùng chọn nhiều lựa chọn. 

Ví dụ dưới đây thể hiện cả hai loại (chọn một và chọn nhiều): 

HTML :

<form role = "form">
   
   <div class = "form-group">
      <label for = "name">Select list</label>
      
      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>
      
      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
      
   </div>
	
</form>

Các form-control tĩnh 

Khi bạn cần đặt một dòng text thuần bên cạnh một nhãn bên trong một form dàn hàng ngang, hãy sử dụng class .form-control-static trên thẻ <p>.

HTML :

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Email</label>
      
      <div class = "col-sm-10">
         <p class = "form-control-static">[email protected]</p>
      </div>
      
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
      
      <div class = "col-sm-10">
         <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
      </div>
      
   </div>
</form>

Trạng thái các phần tử 

Thêm trang thái :focus khi người dùng muốn click vào phần tử input hoặc dùng tab với nó, Bootstrap cung cấp kiểu cho các input bị khóa và các class khi xác thực form. 

Input focus 

Loại bỏ outline mặc định trên một số form-control và sử dụng box-shadow để hiển thị input như đang được :focus.Khi đầu vào nhận được  :focus, diện mạo của đầu vào sẽ bị loại bỏ và  box-shadow  được áp dụng. 

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

Hãy thêm thuộc tính disabled vào một input để ngăn cản người dùng nhập dữ liệu và làm cho input hiển thị giống như là đã bị vô hiệu hóa.

Vô hiệu hóa phần tử fieldset 

Thêm thuộc tính disabled vào phần tử <fieldset> để vô hiệu hóa tất cả các phần tử bên trong <fieldset> cùng một lúc. 

Trạng thái xác nhận 

Bootstrap cung cấp các style xác nhận biểu thị các trạng thái lỗi, cảnh báo và thành công áp dụng trên các form-control. Để sử dụng, hãy thêm các class .has-warning, .has-error, hoặc .has-success vào phần tử cha. Bất kỳ phần tử nào có class .control-label, .form-control, và .help-block bên trong phần tử cha đó sẽ được áp dụng style xác nhận. 

Ví dụ dưới đây thể hiện tất cả các trạng thái điều khiển biểu mẫu:

HTML :

<form class = "form-horizontal" role = "form">

   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>
   
   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">Disabled</label>
      
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>
   
   <fieldset disabled>
      <div class = "form-group">
         
         <label for = "disabledTextInput"  class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div>
      </div>
      
      <div class = "form-group">
         <label for = "disabledSelect"  class = "col-sm-2 control-label">
            Disabled select menu (Fieldset disabled)
         </label>
         
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control">
               <option>Disabled select</option>
            </select>
         </div>
         
      </div>
   </fieldset>
   
   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>
   
   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>
   
   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
      
   </div>
	
</form>

Thay đối kích thước của form-control 

Hãy sử dụng các class tương tự như .input-lg để thiết lập chiều cao, và sử dụng các class tương tự như .col-lg-* để thiết lập chiều rộng của form-control (tương tự như các cột của lưới). Bạn có thể đặt chiều cao và chiều rộng của form sử dụng các class như  .input-lg  và  .col-lg-*.  Ví dụ sau chứng minh điều này –

HTML :

<form role = "form">

   <div class = "form-group">
      <input class = "form-control input-lg" type = "text" placeholder =".input-lg">
   </div>

   <div class = "form-group">
      <input class = "form-control" type = "text" placeholder = "Default input">
   </div>

   <div class = "form-group">
      <input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
   </div>
   
   <div class = "form-group"></div>
   
   <div class = "form-group">
      <select class = "form-control input-lg">
         <option value = "">.input-lg</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control">
         <option value = "">Default select</option>
      </select>
   </div>
   
   <div class = "form-group">
      <select class = "form-control input-sm">
         <option value = "">.input-sm</option>
      </select>
   </div>

   <div class = "row">
      <div class = "col-lg-2">
         <input type = "text" class = "form-control" placeholder = ".col-lg-2">
      </div>
      
      <div class = "col-lg-3">
         <input type = "text" class = "form-control" placeholder = ".col-lg-3">
      </div>
      
      <div class = "col-lg-4">
         <input type = "text" class = "form-control" placeholder = ".col-lg-4">
      </div>
      
   </div>
</form>

Văn bản trợ giúp 

Để thêm text trợ giúp cho form-control, hãy bọc text đó bằng một thẻ <span> có class .help-block. Ví dụ sau chứng minh điều này.

HTML :

<form role = "form">
   <span>Example of Help Text</span>
   <input class = "form-control" type = "text" placeholder = "">
   
   <span class = "help-block">
      A longer block of help text that breaks onto a new line and may extend beyond one line.
   </span>
	
</form>