單獨的表單控件會被自動賦予一些全局樣式。所有設(shè)置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設(shè)置寬度屬性為 width: 100%;。將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。

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

不要將表單組合輸入框組混合使用

不要將表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。

內(nèi)聯(lián)表單

為 <form>元素添加 .form-inline 類可使其內(nèi)容左對齊并且表現(xiàn)為 inline-block 級別的控件。只適用于視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。

可能需要手動設(shè)置寬度

在 Bootstrap 中，輸入框和單選/多選框控件默認被設(shè)置為 width: 100%; 寬度。在內(nèi)聯(lián)表單，我們將這些元素的寬度設(shè)置為 width: auto;，因此，多個控件可以排列在同一行。根據(jù)你的布局需求，可能需要一些額外的定制化組件。

一定要添加 label 標(biāo)簽

如果你沒有為每個輸入控件設(shè)置 label 標(biāo)簽，屏幕閱讀器將無法正確識別。對于這些內(nèi)聯(lián)表單，你可以通過為 label 設(shè)置 .sr-only類將其隱藏。還有一些輔助技術(shù)提供label標(biāo)簽的替代方案，比如 aria-label、aria-labelledby 或 title 屬性。如果這些都不存在，屏幕閱讀器可能會采取使用 placeholder 屬性，如果存在的話，使用占位符來替代其他的標(biāo)記，但要注意，這種方法是不妥當(dāng)?shù)摹?/p>

<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-default">Send invitation</button>
</form>

<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-default">Sign in</button>
</form>

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

水平排列的表單

通過為表單添加 .form-horizontal 類，并聯(lián)合使用 Bootstrap 預(yù)置的柵格類，可以將 label 標(biāo)簽和控件組水平并排布局。這樣做將改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再額外添加 .row 了。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 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">
    <label for="inputPassword3" class="col-sm-2 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">
    <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>

被支持的控件

表單布局實例中展示了其所支持的標(biāo)準(zhǔn)表單控件。

輸入框

包括大部分表單控件、文本輸入域控件，還支持所有 HTML5 類型的輸入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。

必須添加類型聲明

只有正確設(shè)置了 type 屬性的輸入控件才能被賦予正確的樣式。

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

輸入控件組

如需在文本輸入域 <input> 前面或后面添加文本內(nèi)容或按鈕控件，請參考輸入控件組。

文本域

支持多行文本的表單控件?？筛鶕?jù)需要改變 rows 屬性。

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

多選和單選框

多選框（checkbox）用于選擇列表中的一個或多個選項，而單選框（radio）用于從多個選項中只選擇一個。

設(shè)置了 disabled 屬性的單選或多選框都能被賦予合適的樣式。對于和多選或單選框聯(lián)合使用的 <label> 標(biāo)簽，如果也希望將懸停于上方的鼠標(biāo)設(shè)置為“禁止點擊”的樣式，請將 .disabled 類賦予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。

默認外觀（堆疊在一起）

    <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="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>
    <div class="radio disabled">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
        Option three is disabled
      </label>
    </div>

內(nèi)聯(lián)單選和多選框

通過將 .checkbox-inline 或 .radio-inline 類應(yīng)用到一系列的多選框（checkbox）或單選框（radio）控件上，可以使這些控件排列在一行。

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

不帶 label 文本的 Checkbox 和 radio

如果需要 <label> 內(nèi)沒有文字，輸入框（input）正是你說期望的。目前只適用于非內(nèi)聯(lián)的 checkbox 和 radio。請記住，仍然需要為使用輔助技術(shù)的用戶提供某種形式的 label（例如，使用 aria-label）。

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

下拉列表（select）

注意，很多原生選擇菜單單 - 即在 Safari 和 Chrome 中 - 的圓角是無法通過修改 border-radius 屬性來改變的。

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

對于標(biāo)記了 multiple 屬性的 <select> 控件來說，默認顯示多選項。

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

靜態(tài)控件

如果需要在表單中將一行純文本和 label 元素放置于同一行，為<p>元素添加 .form-control-static類即可。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</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>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

焦點狀態(tài)

我們將某些表單控件的默認 outline樣式移除，然后對 :focus 狀態(tài)賦予 box-shadow 屬性。

演示:focus 狀態(tài)

在本文檔中，我們?yōu)樯厦鎸嵗械妮斎肟蛸x予了自定義的樣式，用于演示 .form-control 元素的 :focus狀態(tài)。

禁用狀態(tài)

為輸入框設(shè)置 disabled 屬性可以禁止其與用戶有任何交互（焦點、輸入等）。被禁用的輸入框顏色更淺，并且還添加了 not-allowed 鼠標(biāo)狀態(tài)。

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

被禁用的 fieldset

為<fieldset>設(shè)置 disabled 屬性,可以禁用 <fieldset> 中包含的所有控件。

`<a>` 標(biāo)簽的鏈接功能不受影響

默認情況下，瀏覽器會將 <fieldset disabled> 內(nèi)所有的原生的表單控件（<input>、<select> 和 <button>元素）設(shè)置為禁用狀態(tài)，防止鍵盤和鼠標(biāo)與他們交互。然而，如果如果表單中還包含 <a ... class="btn btn-*"> 元素，這些元素將只被賦予 pointer-events: none 屬性。正如在關(guān)于禁用狀態(tài)的按鈕章節(jié)中（尤其是關(guān)于錨點元素的子章節(jié)中）所描述的那樣，該 CSS 屬性尚不規(guī)范，并且在 Opera 18 及更低版本的瀏覽器或 Internet Explorer 11 總沒有得到全面支持，并且不會阻止鍵盤用戶能夠獲取焦點或激活這些鏈接。所以為了安全起見，建議使用自定義 JavaScript 來禁用這些鏈接。

跨瀏覽器兼容性

雖然 Bootstrap 會將這些樣式應(yīng)用到所有瀏覽器上，Internet Explorer 11 及以下瀏覽器中的 <fieldset> 元素并不完全支持 disabled 屬性。因此建議在這些瀏覽器上通過 JavaScript 代碼來禁用 <fieldset>。

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

只讀狀態(tài)

為輸入框設(shè)置 readonly 屬性可以禁止用戶修改輸入框中的內(nèi)容。處于只讀狀態(tài)的輸入框顏色更淺（就像被禁用的輸入框一樣），但是仍然保留標(biāo)準(zhǔn)的鼠標(biāo)狀態(tài)。

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

校驗狀態(tài)

Bootstrap 對表單控件的校驗狀態(tài)，如 error、warning 和 success 狀態(tài)，都定義了樣式。使用時，添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素即可。任何包含在此元素之內(nèi)的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態(tài)的樣式。

將驗證狀態(tài)傳達給輔助設(shè)備和盲人用戶

使用這些校驗樣式只是為表單控件提供一個可視的、基于色彩的提示，但是并不能將這種提示信息傳達給使用輔助設(shè)備的用戶 - 例如屏幕閱讀器 - 或者色盲用戶。

為了確保所有用戶都能獲取正確信息，Bootstrap 還提供了另一種提示方式。例如，你可以在表單控件的 <label>標(biāo)簽上以文本的形式顯示提示信息（就像下面代碼中所展示的）；包含一個 Glyphicon 字體圖標(biāo) （還有賦予 .sr-only類的文本信息 - 參考Glyphicon 字體圖標(biāo)實例）；或者提供一個額外的輔助信息塊。另外，對于使用輔助設(shè)備的用戶，無效的表單控件還可以賦予一個 aria-invalid="true" 屬性。

<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>
<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-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

添加額外的圖標(biāo)

你還可以針對校驗狀態(tài)為輸入框添加額外的圖標(biāo)。只需設(shè)置相應(yīng)的 .has-feedback 類并添加正確的圖標(biāo)即可。

反饋圖標(biāo)（feedback icon）只能使用在文本輸入框 <input class="form-control"> 元素上。

圖標(biāo)、`label` 和輸入控件組

對于不帶有 label標(biāo)簽的輸入框以及右側(cè)帶有附加組件的輸入框組，需要手動為其圖標(biāo)定位。為了讓所有用戶都能訪問你的網(wǎng)站，我們強烈建議為所有輸入框添加 label標(biāo)簽。如果你不希望將 label 標(biāo)簽展示出來，可以通過添加 .sr-only 類來實現(xiàn)。如果的確不能添加 label 標(biāo)簽，請調(diào)整圖標(biāo)的 top 值。對于輸入框組，請根據(jù)你的實際情況調(diào)整 right 值。

向輔助技術(shù)設(shè)備傳遞圖標(biāo)的含義

為了確保輔助技術(shù)- 如屏幕閱讀器 - 正確傳達一個圖標(biāo)的含義，額外的隱藏的文本應(yīng)包含在 .sr-only 類中，并明確關(guān)聯(lián)使用了 aria-describedby 的表單控件。或者，以某些其他形式（例如，文本輸入字段有一個特定的警告信息）傳達含義，例如改變與表單控件實際相關(guān)聯(lián)的 <label> 的文本。

雖然下面的例子已經(jīng)提到各自表單控件本身的 <label> 文本的驗證狀態(tài)，上述技術(shù)（使用 .sr-only 文本和 aria-describedby) ）已經(jīng)包括了需要說明的目的。

<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" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</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" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</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" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

為水平排列的表單和內(nèi)聯(lián)表單設(shè)置可選的圖標(biāo)

<form class="form-horizontal">
  <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" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <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" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

可選的圖標(biāo)與設(shè)置 `.sr-only` 類的 `label`

如果你使用 .sr-only 類來隱藏表單控件的 <label> （而不是使用其它標(biāo)簽選項，如 aria-label 屬性），一旦它被添加，Bootstrap 會自動調(diào)整圖標(biāo)的位置。

<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" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

控件尺寸

通過 .input-lg 類似的類可以為控件設(shè)置高度，通過 .col-lg-* 類似的類可以為控件設(shè)置寬度。

高度尺寸

創(chuàng)建大一些或小一些的表單控件以匹配按鈕尺寸。

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

水平排列的表單組的尺寸

通過添加 .form-group-lg 或 .form-group-sm 類，為 .form-horizontal 包裹的 label 元素和表單控件快速設(shè)置尺寸。

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

調(diào)整列（column）尺寸

用柵格系統(tǒng)中的列（column）包裹輸入框或其任何父元素，都可很容易的為其設(shè)置寬度。

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

輔助文本

針對表單控件的“塊（block）”級輔助文本。

與表單控件相關(guān)聯(lián)的幫助文本

與表單控件相關(guān)聯(lián)的幫助文本 aria-describedby 屬性的表單控件關(guān)聯(lián)，這將確保使用輔助技術(shù)- 如屏幕閱讀器 - 的用戶獲取控件焦點或進入控制時顯示這個幫助文本。

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

上一篇：基本模板下一篇：響應(yīng)式工具

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

表單

基本實例