サポートしているフォーム部品 ≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス

input要素、textarea要素、チェックボックス、ラジオボタン、select要素などのフォーム部品のスタイル。

データ入力用ユーザーインターフェーステキストエリアチェックボックスラジオボタンインライン・チェックボックスインライン・ラジオボタンセレクト・ボックスマルチ・セレクト・ボックス

input要素。

サンプル

ソースコード

<form class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-2 control-label" for="InputText">text</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText" placeholder="１行テキスト入力欄">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="InputPassword">password</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="InputPassword" placeholder="パスワード">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="InputEmail">email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="InputEmail" placeholder="メール・アドレス">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="InputNumber">number</label>
		<div class="col-sm-10">
			<input type="number" class="form-control" id="InputNumber" placeholder="数値">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="InputColor">color</label>
		<div class="col-sm-10">
			<input type="color" class="form-control" id="InputColor" placeholder="色">
		</div>
	</div>
</form>

textarea要素。

複数行に渡るテキストを入力できる。

サンプル

ソースコード

<form class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-2 control-label" for="InputTextarea">テキストエリア</label>
		<div class="col-sm-10">
			<textarea placeholder="複数行に渡るテキストを入力できる。" rows="3" class="form-control" id="InputTextarea"></textarea>
		</div>
	</div>
</form>

サンプル

ソースコード

<form class="form-horizontal">
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox" value="checkboxA"> チェックボックスＡ
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="checkboxB"> チェックボックスＢ
				</label>
			</div>
		</div>
	</div>
</form>

サンプル

ソースコード

<form class="form-horizontal">
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="radio">
				<label>
					<input type="radio" name="radioName" value="radioA"> ラジオボタンＡ
				</label>
			</div>
			<div class="radio">
				<label>
					<input type="radio" name="radioName" value="radioB"> ラジオボタンＢ
				</label>
			</div>
		</div>
	</div>
</form>

サンプル

ソースコード

<form>
	<label class="checkbox-inline">
		<input type="checkbox" value="checkboxA"> チェックボックスＡ
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" value="checkboxB"> チェックボックスＢ
	</label>
</form>

サンプル

ソースコード

<form>
	<label class="radio-inline">
		<input type="radio" name="radioName" value="checkboxA"> チェックボックスＡ
	</label>
	<label class="checkbox-inline">
		<input type="radio" name="radioName" value="checkboxB"> チェックボックスＢ
	</label>
</form>

サンプル

ソースコード

<form>
	<select class="form-control">
		<option>選択肢１</option>
		<option>選択肢２</option>
		<option>選択肢３</option>
	</select>
</form>

サンプル

ソースコード

<form>
	<select multiple class="form-control">
		<option>選択肢１</option>
		<option>選択肢２</option>
		<option>選択肢３</option>
		<option>選択肢４</option>
		<option>選択肢５</option>
	</select>
</form>