Bootstrap - Biểu mẫu

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 làm cho nó trở nên 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 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)
Mẫu nội tuyến
Dạng ngang

Dạng dọc hoặc dạng cơ bản

Cấu trúc biểu mẫu cơ bản đi kèm với Bootstrap; các điều khiển biểu mẫu riêng lẻ tự động nhận một số kiểu chung. Để 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ò vào phần tử <form> chính.
Gói các nhãn và điều khiển trong một <div> với lớp .form-group . Điều này là cần thiết để có khoảng cách tối ưu.
Thêm một lớp .form-control vào tất cả các phần tử <input>, < textareosystem và <select> văn bản.

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

Mẫu nội tuyến

Để tạo một biểu mẫu trong đó tất cả các phần tử đều nằm trong dòng, căn trái và các nhãn nằm dọc, hãy thêm lớp .form-inline vào thẻ <form>.

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

Theo mặc định các đầu vào, lựa chọn và vùng văn bản có 100% chiều rộng trong Bootstrap. Bạn cần đặt chiều rộng trên các điều khiển biểu mẫu khi sử dụng biểu mẫu nội tuyến.
Sử dụng lớp .sr-only, bạn có thể ẩn nhãn của các biểu mẫu nội tuyến.

Dạng ngang

Biểu mẫu nằm ngang khác biệt so với những biểu mẫu khác không chỉ ở số lượng đánh dấu mà còn ở cách trình bày biểu mẫu. Để tạo biểu mẫu sử dụng bố cục ngang, hãy làm như sau:

Thêm một lớp .form-ngang vào phần tử <form> chính.
Gói các nhãn và điều khiển trong một <div> với lớp .form-group .
Thêm một lớp .control-label vào các nhãn.

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

Kiểm soát biểu mẫu được hỗ trợ

Bootstrap nguyên bản hỗ trợ các điều khiển biểu mẫu phổ biến nhất chủ yếu là đầu vào, vùng văn bản, hộp kiểm, radio và chọn.

Đầu vào

Trường văn bản biểu mẫu phổ biến nhất là trường đầu vào. Đây là nơi người dùng sẽ nhập hầu hết các dữ liệu biểu mẫu cần thiết. Bootstrap cung cấp hỗ trợ cho tất cả các loại đầu vào HTML5 gốc: văn bản, mật khẩu, ngày giờ, ngày giờ cục bộ, ngày, tháng, giờ, tuần, số, email, url, tìm kiếm, số điện thoại và màu sắc . Cần phải khai báo kiểu phù hợp để làm cho Đầu vào có kiểu dáng đầy đủ.

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

Textarea

Vùng văn bản được sử dụng khi bạn cần nhiều dòng nhập liệu. Thay đổi thuộc tính hàng nếu cần (ít hàng hơn = hộp nhỏ hơn, nhiều hàng hơn = hộp lớn hơn).

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

CheckBoxes và Radio Buttons

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 xây dựng 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ố 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 lớp .checkbox-inline hoặc .radio-inline cho một loạt các 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):

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

Lựa chọn

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 <select> 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 nhiều = "nhiều" để 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) -

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

Kiểm soát tĩnh

Sử dụng lớp .form-control-static trên <p> 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.

<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 kiểm soát biểu mẫu

Ngoài trạng thái : focus (tức là người dùng nhấp vào đầu vào hoặc các tab vào nó), Bootstrap cung cấp kiểu 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 đầu vào nhận được : tiêu điểm , đường viền của đầu vào sẽ bị xóa và áp dụng bóng hộp .

Đầ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ó; nó cũng sẽ thay đổi kiểu và con trỏ chuột khi con trỏ di chuột qua phần tử.

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

Thêm thuộc tính đã tắt vào <fieldset> để tắt tất cả các điều khiển trong <fieldset> cùng một lúc.

Cá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 ( .has-warning, .has-error hoặc .has-success ) vào phần tử mẹ.

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

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

Kiểm soát kích thước 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ư .input-lg và .col-lg- * tương ứng. Ví dụ sau đây chứng minh điều này -

<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

Các điều khiển biểu mẫu Bootstrap có thể có văn bản trợ giúp ở mức khối chạy 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 .help-block sau <input>. Ví dụ sau đây chứng minh điều này -

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