Bootstrap3
日本語リファレンス
広告
  1. Bootstrap3日本語リファレンス
  2. CSS
  3. フォーム
  4. 検証スタイル

検証スタイル　　Validation states

エラー、警告、成功など、検証結果を反映したスタイル。

基本フォームにおける検証スタイル アイコン付き検証スタイル レスポンシブ水平フォームにおける検証スタイル インライン・フォームにおける検証スタイル

基本フォームにおける検証スタイル

サンプル
ソースコード 
<form>
	<div class="form-group has-success">
		<label class="control-label" for="InputText1">成功</label>
		<input type="text" class="form-control" id="InputText1">
	</div>
	<div class="form-group has-warning">
		<label class="control-label" for="InputText2">警告</label>
		<input type="text" class="form-control" id="InputText2">
	</div>
	<div class="form-group has-error">
		<label class="control-label" for="InputText3">エラー</label>
		<input type="text" class="form-control" id="InputText3">
	</div>
	<div class="has-success">
		<div class="checkbox">
			<label>
				<input type="checkbox" value="checkboxA1"> チェックボックス
			</label>
		</div>
	</div>
	<div class="has-warning">
		<div class="checkbox">
			<label>
				<input type="checkbox" value="checkboxB1"> チェックボックス
			</label>
		</div>
	</div>
	<div class="has-error">
		<div class="checkbox">
			<label>
				<input type="checkbox" value="checkboxC1"> チェックボックス
			</label>
		</div>
	</div>
</form>

アイコン付き検証スタイル

サンプル
ソースコード 
<form class="form-horizontal">
	<div class="form-group has-success has-feedback">
		<label class="col-sm-2 control-label" for="InputText21">成功</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText21">
			<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		</div>
	</div>
	<div class="form-group has-warning has-feedback">
		<label class="col-sm-2 control-label" for="InputText22">警告</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText22">
			<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
		</div>
	</div>
	<div class="form-group has-error has-feedback">
		<label class="col-sm-2 control-label" for="InputText23">エラー</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText23">
			<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
		</div>
	</div>
</form>

レスポンシブ水平フォームにおける検証スタイル

サンプル
ソースコード 
<form class="form-horizontal">
	<div class="form-group has-success">
		<label class="col-sm-2 control-label" for="InputText31">成功</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText31">
		</div>
	</div>
	<div class="form-group has-warning">
		<label class="col-sm-2 control-label" for="InputText32">警告</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText32">
		</div>
	</div>
	<div class="form-group has-error">
		<label class="col-sm-2 control-label" for="InputText33">エラー</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText33">
		</div>
	</div>
	<div class="form-group has-success has-feedback">
		<label class="col-sm-2 control-label" for="InputText34">ＯＫアイコン付き</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText34">
			<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		</div>
	</div>
	<div class="form-group has-warning has-feedback">
		<label class="col-sm-2 control-label" for="InputText35">警告アイコン付き</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText35">
			<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
		</div>
	</div>
	<div class="form-group has-error has-feedback">
		<label class="col-sm-2 control-label" for="InputText36">削除アイコン付き</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="InputText36">
			<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
		</div>
	</div>
	<div class="form-group has-success">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox" value="checkbox3A1"> チェックボックスＡ１
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="checkbox3A1"> チェックボックスＡ２
				</label>
			</div>
		</div>
	</div>
	<div class="form-group has-warning">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox" value="checkbox3B1"> チェックボックスＢ１
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="checkbox3B2"> チェックボックスＢ２
				</label>
			</div>
		</div>
	</div>
	<div class="form-group has-error">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox" value="checkbox3C1"> チェックボックスＣ１
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" value="checkbox3C2"> チェックボックスＣ２
				</label>
			</div>
		</div>
	</div>
</form>

インライン・フォームにおける検証スタイル

サンプル
ソースコード 
<form class="form-inline">
	<div class="form-group has-success">
		<label class="control-label sr-only" for="InputText41">成功</label>
		<input type="text" class="form-control" id="InputText41" value="成功">
	</div>
	<div class="form-group has-success has-feedback">
		<label class="control-label sr-only" for="InputText41">成功</label>
		<input type="text" class="form-control" id="InputText41" value="成功">
		<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	</div>
	<div class="form-group has-warning has-feedback">
		<label class="control-label sr-only" for="InputText42">警告</label>
		<input type="text" class="form-control" id="InputText42" value="警告">
		<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
	</div>
	<div class="form-group has-error has-feedback">
		<label class="control-label sr-only" for="InputText43">エラー</label>
		<input type="text" class="form-control" id="InputText43" value="エラー">
		<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
	</div>
</form>
広告
関連ページ
モバイル・ファーストな基本スタイルインライン・フォームインライン・フォーム内のインプット・グループレスポンシブ水平フォームサポートしているフォーム部品フォーム部品の代わりにテキストフォーム部品の無効化読み取り専用検証スタイルサイズ制御ヘルプ・テキスト
広告