Cấp bậc tác giả:

HTML

Phần 6 CSS3 - Forms

Được viết bởi webmaster ngày 01/11/2019 lúc 10:55 AM
Các thành phần của form (form-control) tự động nhận một số style chung.
  • 0
  • 62

Phần 6 CSS3 - Forms

Loading...

Ví dụ cơ bản

Các thành phần của form (form-control) tự động nhận một số style chung. Toàn bộ các form-control <input><textarea>, và <select> với class .form-control được thiết lập mặc định width: 100%;. Bọc các nhãn và các form-control bằng một thẻ có class .form-group để tối ưu hóa khoảng trắng.

Example block-level help text here.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <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>

Đừng nhầm lẫn giữa form groups với input groups

Đừng lẫn lộn giữa form group với input groups, hãy đặt input group vào bên trong của form group.

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.

Yêu cầu độ rộng tùy biến

Input, select và textarea có độ rộng mặc định là 100% trong Bootstrap. Để sử dụng form trên cùng dòng, bạn sẽ phải thiết lập độ rộng trên các form-control nằm bên trong nó.

Luôn luôn thêm nhãn

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 class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Form dàn hàng ngang

Hãy sử dụng các class của lưới của Bootstrap để căn chỉnh các nhãn và nhóm các form-control dàn hàng ngang bằng cách thêm class .form-horizontal vào form. Class này sẽ làm cho các .form-groups hoạt động giống như các dòng của lưới, vì vậy không cần phải sử dụng class .row.

Các control được hỗ trợ

Sau đây là ví dụ về các form control được hỗ trợ trên cùng một layout.

Input

Input là form-control dựa text phổ biến nhất, bao gồm toàn bộ các kiểu input của HTML5: textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtel, và color.

Yêu cầu khai báo kiểu

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.

<input type="text" class="form-control" placeholder="Text input">

Các nhóm input

Để thêm text hoặc các nút vào đằng trước hoặc đằng sau của <input>hãy tham khảo thành phần nhóm input.

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.

<textarea class="form-control" rows="3"></textarea>

Checkbox và radio

Checkbox được sử dụng cho việc lựa chọn một hoặc nhiều tùy chọn trong một danh sách. Trong khi đó, radio được sử dụng cho việc lựa chọn 1 tùy chọn duy nhất.

Mặc định (xếp chồng)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

Checkbox trên cùng dòng

Hãy sử dụng class .checkbox-inline hoặc .radio-inline để hiển thị danh sách các checkbox/radio trên cùng một dòng.

  

  
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Select

Sử dụng tùy chọn mặc định hoặc thêm multiple để hiển thị nhiều tùy chọn cùng một lúc.


<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

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

email@example.com

Input đang được focus

Chúng tôi 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.

Demo :focus state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

Input đang bị vô hiệu hóa

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.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Fieldset đang bị vô hiệu hóa

Hãy thêm thuộc tính disabled vào một <fieldset> để vô hiệu hóa toàn bộ các form-controll nằm bên trong <fieldset>.

Chức năng liên kết của thẻ <a> không bị ảnh hưởng

Class này sẽ chỉ làm thay đổi hình thức của các nút <a class="btn btn-default"> chứ không làm thay đổi chức năng của nó. Nếu bạn muốn vô hiệu hóa chức năng liên kết, hãy sử dụng Javascript.

Tính tương thích với các trình duyệt

Mặc dù Bootstrap sẽ áp dụng các style này trên tất cả các trình duyệt, tuy nhiên Internet Explorer 9 (và các phiên bản thấp hơn) không hoàn toàn hỗ trợ thuộc tính disabled trên một <fieldset>. Vì thế, hãy sử dụng Javascript để vô hiệu hóa fieldset trên các trình duyệt này.

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Readonly inputs

Add the readonly boolean attribute on an input to prevent user input and style the input as disabled.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

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.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

Các biểu tượng tùy chọn

Nếu bạn muốn tăng tính trực quan, hãy sử dụng các biểu tượng tùy chọn bằng cách sử dụng các class đi kèm.

Biểu tượng, nhãn và nhóm các input

Việc thiết lập vị trí cho các biểu tượng là cần thiết cho các input không gắn nhãn và cho các input groups bằng cách thêm một add-on vào phía bên phải. Đối với các input không gắn nhãn, hãy điều chỉnh giá trị top. Đối với nhóm input, hãy điều chỉnh giá trị right một cách thích hợp tùy thuộc vào bề rộng của add-on.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

Các biểu tượng tùy chọn cũng hoạt động trên các form cùng dòng và form dàn hàng ngang.

 
<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

Optional icons with hidden .sr-only labels

For form controls with no visible label, add the .sr-only class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

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

Thay đổi chiều cao

Tạo ra các form-control cao hơn hoặc thấp hơn tương ứng với các kích thước của nút.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Thay đổi chiều rộng

Bọc các input bằng các cột của lưới hoặc bất kỳ phần tử cha tùy biến nào để dễ dàng điều chỉnh về độ rộng mong muốn (xem ví dụ bên dưới để biết thêm chi tiết).

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

Text 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

A block of help text that breaks onto a new line and may extend beyond one line.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML