Foundation for Sites6.8.1 變更紀錄
元件清單

表單

我們設定要建立一個簡單、強大且多功能的表單配置系統。表單樣式和 Foundation 網格的結合，意味著您可以完成幾乎所有事情。

表單基礎

在 Foundation 中建立表單的設計簡單，但極具彈性。表單是由標準表單元素，以及格狀列、欄或儲存格組合而成。

文字輸入

這些輸入類型會建立一個文字欄位：text、date、datetime、datetime-local、email、month、number、password、search、tel、time、url 和 week。

在影片中觀看這部分

edit on codepen button 

<form>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="medium-6 cell">
        <label>Input Label
          <input type="text" placeholder=".medium-6.cell">
        </label>
      </div>
      <div class="medium-6 cell">
        <label>Input Label
          <input type="text" placeholder=".medium-6.cell">
        </label>
      </div>
    </div>
  </div>
</form>

數字輸入

在大部分的桌面瀏覽器中，<input type="number"> 元素內部會有向上/向下控制項，用於增加或減少欄位內的數字。這些控制項稱為旋鈕。您可以透過將 $input-number-spinners Sass 變數設定為 false 來停用它們。

edit on codepen button 
<label>
  How many puppies?
  <input type="number" value="100">
</label>

文字區域

<textarea> 元素會建立一個多行文字輸入。

在影片中觀看這部分

edit on codepen button 
<label>
  What books did you read over summer break?
  <textarea placeholder="None"></textarea>
</label>

選單

使用選單將多個選項組合成一個選單。

在影片中觀看這部分

edit on codepen button 
<label>Select Menu
  <select>
    <option value="husker">Husker</option>
    <option value="starbuck">Starbuck</option>
    <option value="hotdog">Hot Dog</option>
    <option value="apollo">Apollo</option>
  </select>
</label>

加入 multiple 屬性以允許選取多個選項。按住 Ctrl (Windows) / Command (Mac) 按鈕以選取多個選項。

<label>Multiple Select Menu
  <select multiple>
    <option value="showboat">Showboat</option>
    <option value="redwing">Redwing</option>
    <option value="narcho">Narcho</option>
    <option value="hardball">Hardball</option>
  </select>
</label>

核取方塊和單選按鈕

當使用者可能從清單中選擇多個選項時，請使用核取方塊群組，當使用者必須僅選擇一個選項時，請使用單選按鈕。

將核取方塊或單選按鈕群組包覆在 <fieldset> 元素中，並使用 <legend> 元素為其提供共用標籤。每個個別控制項也應具有自己的標籤，使用典型的 <label> 建立。

在影片中觀看這部分

edit on codepen button 
<div class="grid-x grid-padding-x">
  <fieldset class="large-5 cell">
    <legend>Choose Your Favorite</legend>
    <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
    <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
    <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
  </fieldset>
  <fieldset class="large-7 cell">
    <legend>Check these out</legend>
    <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
    <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
  </fieldset>
</div>
選擇您最喜歡的
查看這些

欄位集樣式

為了鼓勵將其用作輔助工具，<fieldset> 元素不再預設採用樣式。這些樣式現在包含在 .fieldset 類別中。

在影片中觀看這部分

edit on codepen button 
<fieldset class="fieldset">
  <legend>Check these out</legend>
  <input id="checkbox12" type="checkbox"><label for="checkbox12">Checkbox 1</label>
  <input id="checkbox22" type="checkbox"><label for="checkbox22">Checkbox 2</label>
  <input id="checkbox32" type="checkbox"><label for="checkbox32">Checkbox 3</label>
</fieldset>
查看這些

說明文字（輔助工具）

將說明文字置於欄位下方以說明其目的。每當您使用說明文字時，請為文字提供唯一的 ID，並將屬性 aria-describedby 新增至輸入。這麼做會將說明文字與輸入關聯起來。然後，當使用者專注於輸入時，螢幕閱讀器便可以讀取說明文字。

在影片中觀看這部分

edit on codepen button 
<label>Password
  <input type="password" aria-describedby="passwordHelpText">
</label>
<p class="help-text" id="passwordHelpText">Your password must have at least 10 characters, a number, and an Emoji.</p>

您的密碼必須至少有 10 個字元、一個數字和一個表情符號。

標籤定位

有時您會想要一個標籤在輸入左側的表單。小菜一碟！您可以將標籤放在輸入左側的不同儲存格或欄位中。然後使用類別 .text-right 或 .float-right（或自行新增 text-align: right）重新調整標籤對齊方式。

在影片中觀看這部分

在 由右至左 的環境中，請改用 .float-left。

edit on codepen button 
<form>
  <div class="grid-x grid-padding-x">
    <div class="small-3 cell">
      <label for="right-label" class="text-right">Label</label>
    </div>
    <div class="small-9 cell">
      <input type="text" id="right-label" placeholder="Right-aligned text input">
    </div>
  </div>
</form>

新增 .middle 類別以垂直對齊標籤及其輸入。

<form>
  <div class="grid-x grid-padding-x">
    <div class="small-3 cell">
      <label for="middle-label" class="text-right middle">Label</label>
    </div>
    <div class="small-9 cell">
      <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
    </div>
  </div>
</form>

內嵌標籤和按鈕

若要將額外文字或控制項附加到輸入欄位的左側或右側，請將元素包覆在 .input-group 容器中，然後將這些類別新增至內部的元素

  • 文字欄位上的.input-group-field。
  • 文字標籤上的.input-group-label。
  • 按鈕上的.input-group-button。將按鈕置於此包裝器內。

在影片中觀看這部分

此元件支援彈性盒模式。 了解如何啟用彈性盒模式。

edit on codepen button 
<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" type="number">
  <div class="input-group-button">
    <input type="submit" class="button" value="Submit">
  </div>
</div>
$

檔案上傳按鈕

使用<input type="file">建立檔案上傳按鈕。基於安全性考量，大多數瀏覽器不允許您設定檔案輸入樣式。為了解決此問題，我們可以將表單標籤設定為按鈕樣式，並將其指向<input>。為了適當地遮罩輸入，已新增.show-for-sr類別。

在影片中觀看這部分

edit on codepen button 
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

自訂控制項（無障礙）

自訂表單控制項，例如日期選擇器、範圍滑桿或切換開關，需要一些額外注意才能無障礙。我們的自訂輸入，例如範圍滑桿和切換開關，會為您完成大部分工作。

具有標籤或說明文字的自訂輸入需要新增屬性aria-labelledby和aria-describedby，以便螢幕閱讀器知道如何描述控制項。

<label id="ageLabel">Age</label>
<div class="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>
<p id="ageHelpText">How old are you?</p>

Sass 參考

變數

此元件的預設樣式可以使用專案的 設定檔 中的這些 Sass 變數進行自訂。

名稱類型預設值說明
$fieldset-border 邊框 1px solid $medium-gray

自訂欄位組周圍的預設邊框。
$fieldset-padding 數字 rem-calc(20)

自訂欄位組內的預設內距。
$fieldset-margin 數字 rem-calc(18 0)

自訂欄位組周圍的預設外距。
$legend-padding 數字 rem-calc(0 3)

圖例文字與欄位組邊框之間的預設內距。
$form-spacing 數字 rem-calc(16)

表單元素的整體間距。
$helptext-color 顏色 $black

說明文字的預設顏色。
$helptext-font-size 數字 rem-calc(13)

說明文字的預設字體大小。
$helptext-font-style 關鍵字 italic

說明文字的預設字體樣式。
$input-prefix-color 顏色 $black

加在輸入前方的標籤顏色。
$input-prefix-background 顏色 $light-gray

加在輸入前方的標籤背景顏色。
$input-prefix-border 邊框 1px solid $medium-gray

加在輸入前方的標籤周圍的邊框。
$input-prefix-padding 1rem

加在輸入前後的標籤的左右內距
$form-label-color 顏色 $black

表單標籤的顏色。
$form-label-font-size 數字 rem-calc(14)

表單標籤的字體大小。
$form-label-font-weight 關鍵字 $global-weight-normal

表單標籤的字體粗細。
$form-label-line-height 數字 1.8

表單標籤的行高。數字越大，標籤和其輸入欄位之間的間距越大。
$select-background 顏色 $white

選單的背景顏色。
$select-triangle-color 顏色 $dark-gray

選單中下拉三角形的顏色。設定為 transparent 可完全移除。
$select-radius 顏色 $global-radius

選單的預設圓角。
$input-color 顏色 $black

文字輸入欄位的字體顏色。
$input-placeholder-color 顏色 $medium-gray

文字輸入欄位中提示文字的字體顏色。
$input-font-family 字體 inherit

文字輸入欄位的字體系列。
$input-font-size 數字 rem-calc(16)

文字輸入欄位的字體大小。
$input-font-weight 關鍵字 $global-weight-normal

文字輸入欄位的字體粗細。
$input-line-height 關鍵字 $global-lineheight

文字輸入欄位的行高。
$input-background 顏色 $white

文字輸入欄位的背景顏色。
$input-background-focus 顏色 $white

文字輸入欄位獲得焦點時的背景顏色。
$input-background-disabled 顏色 $light-gray

文字輸入欄位停用時的背景顏色。
$input-border 邊框 1px solid $medium-gray

文字輸入欄位周圍的邊框。
$input-border-focus 顏色 1px solid $dark-gray

文字輸入欄位獲得焦點時的邊框。
$input-padding 顏色 $form-spacing * 0.5

文字輸入欄位的內距。
$input-shadow 陰影 inset 0 1px 2px rgba($black, 0.1)

文字輸入欄位未獲得焦點時的內部方框陰影。
$input-shadow-focus 陰影 0 0 5px $medium-gray

文字輸入欄位獲得焦點時的外部方框陰影。
$input-cursor-disabled 游標 not-allowed

滑鼠游標移到停用的文字輸入欄位上時使用的游標。
$input-transition 過場 box-shadow 0.5s, border-color 0.25s ease-in-out

文字輸入欄位上的過場屬性。
$input-number-spinners 布林值 true

啟用 Chrome 和 Firefox 新增到 <input type='number'> 元素的向上/向下按鈕。
$input-radius 邊框 $global-radius

文字輸入欄位的圓角。
$form-button-radius 數字 $global-radius

表單按鈕的邊框圓角，預設為 global-radius。
$meter-height 長度 1rem

<meter> 元素的高度。
$meter-radius 長度 $global-radius

<meter> 元素的邊框圓角。
$meter-background 顏色 $medium-gray

<meter> 元素的背景顏色。
$meter-fill-good 顏色 $success-color

<meter> 元素中最佳值的計量器填滿顏色。
$meter-fill-medium 顏色 $warning-color

<meter> 元素中平均值的量表填滿。
$meter-fill-bad 顏色 $alert-color

<meter> 元素中次佳值的量表填滿。
$progress-height 數字 1rem

進度條的高度。
$progress-background 顏色 $medium-gray

進度條的背景顏色。
$progress-margin-bottom 數字 $global-margin

進度條的下邊距。
$progress-meter-background 顏色 $primary-color

進度條量表預設的顏色。
$progress-radius 數字 $global-radius

進度條預設的圓角半徑。
$slider-height 數字 0.5rem

滑桿預設的高度。
$slider-background 顏色 $light-gray

滑桿軌道預設的背景顏色。
$slider-fill-background 顏色 $medium-gray

滑桿預設的填滿顏色。
$slider-handle-height 數字 1.4rem

滑桿手把預設的高度。
$slider-handle-width 數字 1.4rem

滑桿手把預設的寬度。
$slider-handle-background 顏色 $primary-color

滑桿手把預設的顏色。
$slider-opacity-disabled 數字 0.25

已停用滑桿預設的淡化程度。
$slider-radius 數字 $global-radius

滑桿預設的圓角半徑。