Latest web development tutorials

財団フォーム

財団フォームコントロールは、自動的にグローバルスタイルに設定されています：

すべての<textarea> <select>と<input>要素の幅は100％であり、マージン、パディング、シャドウ飲みマウスの動き効果を有します。

例

<フォーム>
入力：
<input type = "text"プレースホルダ = "名前">

テキストエリア：
<テキストエリアの行= "4"プレースホルダ = "アドレス"> </ TEXTAREA>

選択：
<選択>
<オプション> 1 </オプション>
<オプション> 2 </オプション>
<オプション> 3 </オプション>
<オプション> 4 </オプション>
</選択>
</フォーム>

»をお試しください

ラベル

フォームを使用し<label>ラベルを設定する要素を、ラベルは、属性とid属性を追加することができます。 フォーカスでのユーザー入力ボックスを取得したときに入力フィールドまたはタブをクリックしてください：

例

<フォーム>
<= "名前"のラベル>の入力
<input type = "text"プレースホルダ = "名前" ID = "名前">
</ラベル>

<ラベル用= "ADR">ラベル
<テキストエリアの行= "4"プレースホルダ = "アドレス" ID = "ADR"> </ TEXTAREA>
</ラベル>

<= "NUM"のラベル>を選択
<選択のid = "NUM">
<オプション> 1 </オプション>
<オプション> 2 </オプション>
<オプション> 3 </オプション>
<オプション> 4 </オプション>
</選択>
</ラベル>
</フォーム>

»をお試しください

あなたは、右揃えのタブを設定する必要がある場合は、使用することができます.right種類：

例

<Labelクラス= "右">

»をお試しください

フィールドセット

財団レンダリング<fieldset>スタイルの要素を次のように

例

<フォーム>
<フィールドセット>
<伝説>フィールドセットレジェンド</伝説 >
<ラベル>名前
<input type = "text"プレースホルダ = "ファーストネーム..">
</ラベル>
<ラベル>メール
<input type = "text"はプレースホルダ = "電子メールを入力してください..">
</ラベル>
</フィールドセット>
</フォーム>

»をお試しください

エラー状態

使用.error ：間違ったラベルを設定するためのクラス、入力ボックス、テキストボックスのスタイルを

例

<フォーム>
<Labelクラス= "エラー">エラー
<input type = "text"プレースホルダ = "名..">
</ラベル>
<小クラス= "エラー">間違って入力</小>

<テキストエリアの行= "4"プレースホルダ = "アドレス"> </ TEXTAREA>
<小クラス= "エラー">間違って入力</小>
</フォーム>

»をお試しください
ノート あなたは、ユーザ入力エラーのステータスを更新するためにJavaScriptを使用する必要があります。