Foundation 表單

Foundation 表單控制會自動設(shè)置為全局樣式:

所有 <textarea>, <select> 及 <input> 元素寬度都為 100%，且?guī)в型膺吘?、?nèi)邊距、陰影喝鼠標移動效果。

實例

<form>
  Input:
  <input type="text" placeholder="Name">

  Textarea:
  <textarea rows="4" placeholder="Address"></textarea>

  Select:
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</form>

嘗試一下 ?

標簽

在表單中使用 <label> 元素來設(shè)置標簽，標簽可以添加 for 屬性和 id 屬性。用戶在點擊標簽或輸入域時獲取輸入框焦點：

實例

<form>
  <label for="name">Input
    <input type="text" placeholder="Name" id="name">
  </label>

  <label for="adr">Label
    <textarea rows="4" placeholder="Address" id="adr"></textarea>
  </label>

  <label for="num">Select
    <select id="num">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </label>
</form>

嘗試一下 ?

如果需要設(shè)置標簽右對齊，可以使用 .right 類:

實例

<label class="right">

嘗試一下 ?

Fieldset

Foundation 渲染 <fieldset> 元素的樣式如下：

實例

<form>
  <fieldset>
    <legend>Fieldset Legend</legend>
    <label>Name
      <input type="text" placeholder="First Name..">
    </label>
    <label>Email
      <input type="text" placeholder="Enter email..">
    </label>
  </fieldset>
</form>

嘗試一下 ?

錯誤狀態(tài)

使用 .error 類來設(shè)置錯誤的標簽、輸入框、文本框樣式:

實例

<form>
  <label class="error">Error
    <input type="text" placeholder="Name..">
  </label>
  <small class="error">Wrong input</small>

  <textarea rows="4" placeholder="Address"></textarea>
  <small class="error">Wrong input</small>
</form>

嘗試一下 ?
Note 你需要使用 JavaScript 來更新用戶輸入的錯誤狀態(tài)。