フォームコンポーネント
ここでは、データ登録などで使用することが多いフォームの機能についてご紹介します。ひな形で生成されるアカウント登録ページを例に説明します。
アカウント登録画面（PC）
まずは生成されるHTMLを見てみましょう。
アカウント登録ページで生成されたHTML（Form部のみ抜粋）
<!-- フォーム部分 -->
<form class="form-horizontal" role="form" action="/Account/Register" method="post" novalidate="novalidate">
<input name="__RequestVerificationToken" type="hidden" value="prXfel...">
<h4>新しいアカウントを作成します。</h4>
<hr>
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display: none;"></li>
</ul>
</div>
<!-- (1)ユーザー名 -->
<div class="form-group">
<label class="col-md-2 control-label" for="UserName">ユーザー名</label>
<div class="col-md-10">
<input name="UserName"
class="form-control valid"
id="UserName"
type="text"
value=""
data-val-required="ユーザー名 フィールドが必要です。"
data-val="true">
</div>
</div>
<!-- (2)パスワード -->
<div class="form-group">
<label class="col-md-2 control-label" for="Password">パスワード</label>
<div class="col-md-10">
<input name="Password"
class="form-control
input-validation-error"
id="Password"
type="password"
data-val-required="パスワード フィールドが必要です。"
data-val="true"
data-val-length-min="6"
data-val-length-max="100"
data-val-length="パスワード の長さは、6 文字以上である必要があります。">
</div>
</div>
<!-- (3)パスワードの確認 -->
<div class="form-group">
<label class="col-md-2 control-label" for="ConfirmPassword">パスワードの確認入力</label>
<div class="col-md-10">
<input name="ConfirmPassword"
class="form-control input-validation-error"
id="ConfirmPassword"
type="password"
data-val="true"
data-val-equalto-other="*.Password"
data-val-equalto="'パスワードの確認入力' と 'パスワード' が一致しません。">
</div>
</div>
<!-- (4)登録ボタン -->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input class="btn btn-default" type="submit" value="登録">
</div>
</div>
</form>
Bootstrapのフォームでは、クラス名にform-groupと記載することで、ラベルとテキストボックスの見ばえを整頓できます。テキストボックスにform-controlと記載すると、入力枠が丸みを帯び、カーソルが移動した時に青色でフォーカス表示されます。
フォームでは、下表のクラス名を設定できます。
| 要素例 | クラス名 | 説明 |
|---|---|---|
| form | form-group | ラベルとテキストを整列 |
| form | form-inline | 横に並べて（インライン）整列 |
| form | form-horizontal | ラベルとテキストを水平に並べて整列 |
| input/textarea/select | form-control | 入力コントロールの見栄え改善 |
| input/textarea/select | input-xs | サイズ極小 |
| input/textarea/select | input-sm | サイズ小 |
| input/textarea/select | input-md | サイズ中 |
| input/textarea/select | input-lg | サイズ大 |
| div | has-success | 正常時 |
| div | has-warning | 警告あり |
| div | has-error | エラーあり |
| label | control-label | 説明用ラベルを整列 |
フォームの設定項目の詳細は公式サイトの説明をご覧ください。
