閱讀(5.5k) 書簽贊(2) 我要糾錯(cuò)

Foundation 表單

2022-08-05 15:15 更新

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

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

實(shí)例

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

嘗試一下 ?

標(biāo)簽

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

實(shí)例

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

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

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

嘗試一下 ?

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

實(shí)例

嘗試一下 ?

Fieldset

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

實(shí)例

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

嘗試一下 ?

錯(cuò)誤狀態(tài)

使用 .error 類來(lái)設(shè)置錯(cuò)誤的標(biāo)簽、輸入框、文本框樣式:

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

嘗試一下 ?