財団フォーム2024 年の最新の入門チュートリアル。このコースでは ラベル,フィールドセット,エラー状態, について学習できます。
財団フォーム
財団フォームコントロールは、自動的にグローバルスタイルに設定されています:
すべての<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
種類:
フィールドセット
財団レンダリング<fieldset>
スタイルの要素を次のように
例
<フォーム>
<フィールドセット>
<伝説>フィールドセットレジェンド</伝説 >
<ラベル>名前
<input type = "text"プレースホルダ = "ファーストネームja">
</ラベル>
<ラベル>メール
<input type = "text"はプレースホルダ = "電子メールを入力してくださいja">
</ラベル>
</フィールドセット>
</フォーム>
»をお試しください
エラー状態
使用.error
:間違ったラベルを設定するためのクラス、入力ボックス、テキストボックスのスタイルを
例
<フォーム>
<Labelクラス= "エラー">エラー
<input type = "text"プレースホルダ = "名ja">
</ラベル>
<小クラス= "エラー">間違って入力</小>
<テキストエリアの行= "4"プレースホルダ = "アドレス"> </ TEXTAREA>
<小クラス= "エラー">間違って入力</小>
</フォーム>
»をお試しください | あなたは、ユーザ入力エラーのステータスを更新するためにJavaScriptを使用する必要があります。 |
---|