4.四、Bootstrap V4自學之路------組件---表單

時間 2019-11-06

標籤 bootstrap v4 自學之路組件表單欄目 Bootstarp 简体版

原文原文鏈接

表單控件

下面是一個Bootstrap支持的表控件以及自定義類的完整列表。額外的文檔對每一個組都是可用的。javascript

類	做用	支持的變量
`.form-group`html	表單控件的任一組	用在任何塊級元素上，好比說`<fieldset>`或`<div>`html5
`.form-control`java	文本域控件	`text`、 `password`、`datetime`、`datetime-local`、`date`、`month`、`time`、`week`、`number`、`email`、`url`、`search`、`tel`、`color`ios
選擇菜單	`multiple`、`size`瀏覽器
多行文本域	N/A
`.form-control-file`佈局	文件上傳控件	`file`this
`.radio` `.radio-inline` `.checkbox` `.checkbox-inline`url	複選框和單選鈕	N/A

PS：鎮山之寶！例子在後續使用中來寫！那麼一長串的例子，嚇死寶寶了。
spa

表單佈局

由於Bootstrap對幾乎全部的表單控件都應用了display:block以及width:100%，因此表單默認是縱向堆疊的。能夠用附加的類來基於表單改變這種佈局。

表單組

.form-group類是向表單添加一些結構的最簡單的方法。但是使用在<fieldset>、<div>甚至別的元素上。

<fieldset> 定義圍繞表單中元素的邊框。

<form>
  <fieldset>
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" id="formGroupExampleInput" placeholder="Example input">
  </fieldset>
  <fieldset class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </fieldset>
</form>

PS：第一個是BS樣式的，第二個是樣式的。果真仍是有樣式的看着舒服。

PS：仍是說細節吧。作過問卷調查的都知道<label for=xx>,效果是點擊<label>標籤的內容，選中對應的對象。

內聯表單

使用.inline-form類能夠在一橫行中顯示一系列label、表單控件以及按鈕。

可見的標籤

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-primary">Send invitation</button>
</form>

PS：在最外層form中，加入 .form-inline類。將內容拼成一行。簡稱內聯標籤。

隱藏的標籤

相比之下，是給<label>標籤加入 .sr-only類。使其隱藏。

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

使用 .input-group-addon類來固定顯示。

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

注意：<input>標籤先後的<div>都引入了 .input-group-addon類。

使用網格

要想使用更多結構化表單佈局，你能夠利用Bootstrap的預約義網格類（或者mixins）。給表單組添加.row類，使用.col-*類給你的label和控件指定寬度。爲了讓label與文本輸入框（帶了.form-control類的控件）垂直居中對齊，label須要用.form-control-label類。

<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2">Radios</label>
    <div class="col-sm-10">
      <div class="radio">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios1" 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="gridRadios" id="gridRadios2" value="option2">
          Option two can be something else and selecting it will deselect option one
        </label>
      </div>
      <div class="radio disabled">
        <label>
          <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          Option three is disabled
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-2">Checkbox</label>
    <div class="col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-secondary">Sign in</button>
    </div>
  </div>
</form>

當拆開看的時候，發現其中並無難點。

其效果只是再說每一個組 .form-group 都新加了一個 .row類。用來表示一行。

而後在行內，使用col-*-* 來劃分表格。達到佈局對齊的效果。

複選框和單選鈕

複選框是爲了在列表中選擇一個或多個選項；單選鈕是爲了從多個選項中選擇一個。

Bootstrap支持禁用複選框和單選鈕。爲了讓鼠標懸停在它們的父<label>上時出現一個「not-allowed」鼠標指針，你必須添加向父.radio、.radio-inline、.checkbox或.checkbox-inline元素添加一個.disabled類

默認（堆疊）

<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="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="exampleRadios" id="exampleRadios1" 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="exampleRadios" id="exampleRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

這段代碼要注意的事情有3：

一、checkbox外層的div，使用 .checkbox類來修飾。

二、radio外城的div，使用 .radio類來修飾。

三、<label>標籤包含着<input> 能夠不用寫<label for=xxxx>

內聯

所謂內聯，英文， inline。直白的理解，都在一行。哈哈哈

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

PS：和預想的不同的地方在於，是給每一個<label>標籤加上 .*-inline類。這點要注意。

不帶label

若是在<label>中沒有文字，輸入框會如你所願地放位置。當前只對非行內複選框和單選鈕起做用。

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1">
  </label>
</div>

靜態控件

若是你須要在表單內、一個表單label旁邊放置純文本，請在<p>上面使用.form-control-static類。

若是不加 .form-control-static類，則 <p>標籤的字會貼着父框頂部顯示。

<form>
  <div class="form-group row">
    <label class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

PS：這裏要註明，極客學院wiki又有翻譯錯誤。

<label>標籤應當使用 .form-control-label類，而不是 .control-label。

禁用的狀態

添加disabled布爾屬性能夠防止用戶輸入。被禁用的輸入框顯示爲淺色、並帶有not-allowed鼠標指針。

向一個<fieldset>添加disabled能夠禁用其內部的全部控件

<fieldset class="form-group form-inline" disabled>
    <label for="formGroupExampleInput1">文本</label>
    <input type="text" class="form-control" id="formGroupExampleInput1" placeholder="Another input">

    <label for="formGroupExampleInput2">多選框</label>
    <input type="checkbox" class="form-control" id="formGroupExampleInput2" placeholder="Another input">

    <label for="formGroupExampleInput3">按鈕</label>
    <input type="button" class="form-control" id="formGroupExampleInput3" value="按鈕" placeholder="Another input">
</fieldset>

全是如文本所說，可是我怎麼也以爲，這是，，，HTML5自帶的。

PS：可是如文檔所說，若是使用<a>來使用button。則<feildset>中的disabled將對<a>標籤無效。

若是必定要使用<a>標籤當按鈕，須要加入CSS樣式 :pointer-events:none 。是<a>標籤失效。

只讀輸入框

在一個輸入框中添加readonly布爾屬性，以防止修改輸入框的值。只讀輸入框顯示爲淡色（和被禁用的輸入框同樣），可是保持了標準的鼠標指針。

<input class="form-control" type="text" placeholder="只讀輸入框，屬性readonly" readonly>

感受仍是隻是用到了 html5的

控件尺寸

使用.form-control-lg這些類能夠設置控件的高度，使用網格列類好比說.col-lg-*能夠設置控件的寬度

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

PS：注意的是，須要form-control 與 form-control-lg 同時使用。

另外，select菜單也可使用控制尺寸。

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

列尺寸

把輸入框放置在網格列中，或者任何其它自定義父元素中，就能夠輕鬆指定想要的寬度。

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

白話文就是，想要多寬，就放在多大的 .col-*-*中

幫助文本

<small>
  Some inline text with a small tag looks like this.
</small>
              <br>
<small class="text-muted">
  Some inline text with a small tag looks like this.
</small>
<p>
  A block of help text that breaks onto a new line and may extend beyond one line.
</p>
<p class="text-muted">
  A block of help text that breaks onto a new line and may extend beyond one line.
</p>

PS：仍是使用到了文本類的 .text-muted類。視狀況而用吧。

驗證

Bootstrap包含了出錯時的驗證樣式，以及表單控件的警告、成功狀態。要想用它們，只須要在父元素上添加.has-warning、.has-error或者.has-success類，這些元素中的任何.control-label、.form-control或者.text-help元素都將繼承到這些驗證樣式。

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

<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-danger">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

PS：中文文檔又錯了。要吐槽，直接代碼翻譯都能出錯嗎？

v4中，error更換爲danger。全部出現error的都是錯誤的，應該是danger。

自定義表單

爲了更多的自定義和跨瀏覽器兼容性，請使用咱們的徹底自定義表單元素來代替瀏覽器默認的。它們基於語義和易用性標籤，所以它們是任何默認的表單控件的堅實替代者。

複選框和單選鈕

請將每一個複選框和單選鈕都包裹在一個<label>中，出於如下三個緣由：

它給選中控件提供了更大的點擊區域。
它提供了一個有用並且語義化的包裹幫助咱們替代默認的<input>。
它能自動觸發<input>的狀態，意味着不須要JavaScript。

多個複選框

<label class="c-input c-checkbox">
  <input type="checkbox" class="test_checkbox">
  <span class="c-indicator"></span>
  第一個複選框
</label>
          
<label class="c-input c-checkbox">
  <input type="checkbox" class="test_checkbox">
  <span class="c-indicator"></span>
  第二個複選框
</label>
          
<label class="c-input c-checkbox">
  <input type="checkbox" class="test_checkbox">
  <span class="c-indicator"></span>
  第三個複選框
</label>
          
<button type="button" class="btn btn-secondary" onclick="test_prop()">全選/全不選</button>
          
<script type="text/javascript">
    function test_prop(){
        //全選 或 所有取消選擇
        if($('.test_checkbox').prop('indeterminate')==true){
            $('.test_checkbox').prop('indeterminate', false);
        }else{
            $('.test_checkbox').prop('indeterminate', true);
        }
    }
</script>

PS：須要注意的是，JS命令時，jq選擇器選擇<input>的checkbox。

多個單選鈕

<label class="c-input c-radio">
  <input id="radio1" name="radio" type="radio">
  <span class="c-indicator"></span>
  Toggle this custom radio
</label>
<label class="c-input c-radio">
  <input id="radio2" name="radio" type="radio">
  <span class="c-indicator"></span>
  Or toggle this other custom radio
</label>

沒什麼好特別說的，使用自定義控件。記得使用。.c-input類、c-indicator類、.c-radio類或 .c-checkbox類。

PS：indicator 英文：指示器。

堆疊

自定義複選框以及單選鈕都開始時是內聯的。給它們的父元素添加.c-inputs-stacked類，能夠確保每一個表單控件各佔一行。

<div class="c-inputs-stacked">
  <label class="c-input c-radio">
    <input id="radioStacked1" name="radio-stacked" type="radio">
    <span class="c-indicator"></span>
    Toggle this custom radio
  </label>
  <label class="c-input c-radio">
    <input id="radioStacked2" name="radio-stacked" type="radio">
    <span class="c-indicator"></span>
    Or toggle this other custom radio
  </label>
</div>

選擇菜單

自定義<select>菜單隻須要一個自定義類.c-select來觸發自定義樣式。

<select class="c-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

文件瀏覽器

文件的輸入是最危險的一羣。這是它的工做原理：

把一個<input>包裹在一個<label>內，從而自定義控件可以適當地觸發文件瀏覽器。
經過opacity隱藏了默認的<input>
使用:after生成一個自定義底色以及提示（Choose file…）。
使用:before生成並定位Browse按鈕。
在<input>上聲明一個height以與周圍內容保持適當的距離。

換句話說，這徹底是一個自定義元素，全都是經過CSS生成的。

<label class="file" >
  <input type="file" id="file" style="height: 45px;">
  <span class="file-custom">？。？</span>
</label>

PS：如上訴所說！給<input> 生命一個height。可是隻是距離下面遠了一些而已。並且內容不能修改。

說是能夠經過JS修改文本值，可是沒有給例子！

另外，Choose file...是一直存在的。Browse沒辦法不經過JS修改。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。