「Bootstrap.cssのForms」のサンプル

「Bootstrap.cssのクラス名のサンプル：和訳」の「Forms」のサンプルページです。

input、select、textareaのクラスには「form-control」を指定。

基本

各インプットタグたちのクラスに「form-control」を指定。

実際のソース

<form>
	<div class="form-group">
		<label for="exampleInputEmail1">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
	</div>
	<div class="form-group">
		<label for="exampleInputFile">File input</label>
		<input type="file" id="exampleInputFile">
		<p class="help-block">Example block-level help text here.</p>
	</div>
	<div class="checkbox">
		<label>
		<input type="checkbox"> Check me out
		</label>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
</form>

インライン表示

formタグのクラスに「form-inline」指定

実際のソース

<form class="form-inline">
	<div class="form-group">
		<label for="exampleInputEmail1">Email</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">Pass</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
</form>

ラベル非表示

非表示にしたいlabelタグのクラスに「sr-only」指定

実際のソース

<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="exampleInputEmail1">Email</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
	</div>
	<div class="form-group">
		<label class="sr-only" for="exampleInputPassword1">Pass</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
	</div>
	<div class="checkbox">
		<label>
		<input type="checkbox"> Remember me
		</label>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
</form>

ラベルとinputを横並び

formタグのクラスに「form-horizontal」指定して、各ラベル・inputたちにグリッドのクラス指定（「.col-sm-xx」ってヤツ）。ラベルには「.control-label」も指定する。

グリッドのクラス指定（「.col-sm-xx」ってヤツ）を使うときは親を「.row」にするんだけど「.form-horizontal」があるので「.row」は不要。

各ラベルに「.control-label」を指定することによってラベルを右揃えにして、inputの天地中央に配置してくれる。

実際のソース

<form class="form-horizontal">
	<div class="form-group">
		<label for="exampleInputEmail1" class="col-sm-2 control-label">Email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
		</div>
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1" class="col-sm-2 control-label">Pass</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> Remember me
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">Sign in</button>
		</div>
	</div>
</form>

チェックボックス、ラジオボタンの無効

無効にした箇所のマウスを重ねるとマウスカーソルが禁止を表すカーソルに変わる

無効にしたいチェックボックス、ラジオボタンの属性に「disabled」を指定して、親要素のクラスに「disabled」を指定。

Option one is this and that—be sure to include why it's great

Option two is disabled

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

実際のソース

<div class="checkbox">
	<label>
		<input type="checkbox" value="">
		Option one is this and that—be sure to include why it's great
	</label>
</div>
<div class="checkbox disabled">
	<label>
		<input type="checkbox" value="" disabled>
		Option two is disabled
	</label>
</div>

<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
		Option one is this and that—be sure to include why it's great
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
		Option two can be something else and selecting it will deselect option one
	</label>
</div>
<div class="radio disabled">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
		Option three is disabled
	</label>
</div>

チェックボックス、ラジオボタンのインライン表示

ラベルタグに「.xxx-inline」を指定。

実際のソース

<form>
	<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1">1</label>
	<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2">2</label>
	<label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3">3</label>
</form>

<form>
	<label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">1</label>
	<label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">2</label>
	<label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">3</label>
</form>

値の固定表示

例えば、IDはすでに持っていて、パスワードだけ入力させたいとき等。

「.form-control-static」を使う。※「type=hidden」の指定が無いので必要に応じて追加する。

実際のソース

<form>
	<div class="form-group">
		<label>Email</label>
		<p class="form-control-static">email@example.com</p>
	</div>
	<div class="form-group">
		<label for="inputPassword">Password</label>
		<input type="password" class="form-control" id="inputPassword" placeholder="Password">
	</div>
</form>

すべて入力不可

fieldsetにdisabled属性追加。

実際のソース

<form>
	<fieldset disabled>
		<div class="form-group">
			<label for="disabledTextInput">Disabled input</label>
			<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
		</div>
		<div class="form-group">
			<label for="disabledSelect">Disabled select menu</label>
			<select id="disabledSelect" class="form-control">
				<option>Disabled select</option>
			</select>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox"> Can't check this
			</label>
		</div>
		<button type="submit" class="btn btn-primary">Submit</button>
	</fieldset>
</form>

input、selectのサイズ

大きいサイズ「.input-lg」、小さいサイズは「.input-sm」

実際のソース

<form>
	<div class="form-group">
		<input class="form-control input-lg" type="text" placeholder=".input-lg">
	</div>
	<div class="form-group">
		<input class="form-control" type="text" placeholder="Default input">
	</div>
	<div class="form-group">
		<input class="form-control input-sm" type="text" placeholder=".input-sm">
	</div>
</form>

<form>
	<div class="form-group">
		<select class="form-control input-lg">
			<option>.input-lg</option>
			<option>○○○</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control">
			<option>Default input</option>
			<option>○○○</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control input-sm">
			<option>.input-sm</option>
			<option>○○○</option>
		</select>
	</div>
</form>

labelも含めてinputのサイズ

「.form-horizontal」限定っぽい？未調査。

実際のソース

<form class="form-horizontal">
	<div class="form-group form-group-lg">
		<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
		</div>
	</div>
	<div class="form-group form-group-sm">
		<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
		</div>
	</div>
</form>

inputの幅

「.row」の中で「.col-xs-○」を追加して、その中にinputタグを入れる。

実際のソース

<form>
	<div class="row">
		<div class="col-xs-2">
			<input type="text" class="form-control" placeholder=".col-xs-2">
		</div>
		<div class="col-xs-3">
			<input type="text" class="form-control" placeholder=".col-xs-3">
		</div>
		<div class="col-xs-4">
			<input type="text" class="form-control" placeholder=".col-xs-4">
		</div>
	</div>
</form>