【Bootstrap3】フォームの for と id のポイント

Bootstrap3 のフォームを div で入れ子にして書いていく内に、混乱してきました＞＜。for と id はどういう場合に付けて、どういう場合に付けないのかしら＞＜。

今回のお話は、Bootstrap3 を使用する、しないに関わらず、HTML を書くときのお作法なのかもしれません。ですけれども、Bootstrap3 のコードを例にポイントを残しておきますわ♪

フォームで for と id を使う時、使わない時のポイント

• 項目名ラベルに for を、対応する input に id を付けること。
• input、select、textarea には for と id が必要
• ただし checkbox、radio には for と id 不要
• form-control-static の場合は for と id 不要

詳しい Bootstrap3 のフォームの書き方はこちらです。

• CSS · Bootstrap
• モバイル・ファーストな基本スタイル ≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス

Bootstrap3 コード例

<form>
	<div class="form-group">
		<label>プレーンテキスト (for と id 不要)</label>
		<p class="form-control-static"> p タグで囲み、class="form-control-static" を指定します。</p>
	</div>
	<div class="form-group">
		<label for="InputText">テキスト (for と id 必要)</label>
		<input type="text" class="form-control" id="InputText" placeholder="テキストを入力して下さい。">
	</div>
	<div class="form-group">
		<label for="InputEmail">メールアドレス (for と id 必要)</label>
		<input type="email" class="form-control" id="InputEmail" placeholder="メールアドレスを入力して下さい。">
	</div>
	<div class="form-group">
		<label for="InputPassword">パスワード (for と id 必要)</label>
		<input type="password" class="form-control" id="InputPassword" placeholder="パスワードを入力して下さい。">
	</div>
	<div class="form-group">
		<label for="InputTextarea">テキストエリア (for と id 必要)</label>
		<textarea class="form-control" id="InputTextarea" placeholder="テキストエリアに入力して下さい。"></textarea>
	</div>
	<div class="form-group">
		<label for="InputSelect">選択 (for と id 必要)</label>
		<select class="form-control" id="InputSelect">
			<option>選択肢１</option>
			<option>選択肢２</option>
			<option>選択肢３</option>
		</select>
	</div>
	<div class="form-group">
		<label for="InputFile">ファイル (for と id 必要)</label>
		<input type="file" id="InputFile">
		<p class="help-block">ヘルプ用ブロック。ただの文章なため、for と id 不要</p>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox" value="checkboxA"> チェックボックスＡ (for と id 不要)
		</label>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox" value="checkboxB"> チェックボックスＢ (for と id 不要)
		</label>
	</div>
	<div class="radio">
		<label>
			<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"> ラジオボタン 1 (for 不要 id 必要)
		</label>
	</div>
	<div class="radio">
		<label>
			<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> ラジオボタン 2 (for 不要 id 必要)
		</label>
	</div>
	<button type="submit" class="btn btn-default">送信 (for と id 不要)</button>
</form>

ウェブブラウザでの表示

Chrome で表示した時の画面です。

おわりに

そもそも Bootstrap を使ったコードを書き始める時にはどうするとスムースかしら。

1. HTML テンプレートのコピーを入手
   • 日本語がよい場合は 「Bootstrap CDN」を使うテンプレート – 入門 ≪ Bootstrap3日本語リファレンス
   • 本家本元が良い場合は、Basic template – Getting started · Bootstrap
2. CSS、JavaScript の読み込み部分を、Bootstrap CDN – Getting started · Bootstrap に入れ替える。

もっと早いやり方はたくさんあるでしょうけれども、これが汎用的かしらね。

以上です。