フォームコントロールは、Foundation によって自動的にいくつかのグローバルなスタイリングを受け取ります：
全ての <textarea>、<select> および テキスト <input> 要素は、
100% の幅、マージンとパディング、影およびホバー効果を持っています：
<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> 要素をフォームコントロールの周りにラップし、その
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>
結果：
ラベルを .right クラスで右揃えにします：
Foundation は、HTML <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>
結果：
label、input や textarea に対する赤色のエラースタイルを指定するために、.error クラスを使用します：
<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>
結果：
|
実際にエラー状態を効果に結び付けるには、ユーザが誤った入力をしたときに、この状態を更新するために、 JavaScript を使用する必要があります。 |
|---|