English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 基礎チュートリアル

Bootstrap プラグイン

Bootstrap フォーム

この章では、Bootstrap を使用してフォームを作成する方法を学びます。Bootstrap はシンプルな HTML タグと拡張されたクラスを使用して、さまざまなスタイルのフォームを作成できます。

フォームレイアウト

Bootstrap は以下の種類のフォームレイアウトを提供しています：

  • 垂直フォーム（デフォルト）

  • 内联フォーム

  • 水平フォーム

垂直または基本的フォーム

基本的なフォーム構造は Bootstrap に標準で含まれており、個別のフォームコントロールは自動的に一部のグローバルなスタイルを受け取ります。以下に基本フォームの作成手順を示します：

  • 親 <form> 要素に追加します role="form"。

  • ラベルとコントロールを class がついた .form-group の <div> 内に。これは最適なスペースを取得するために必要です。

  • すべてのテキスト要素 <input>、<textarea>、および <select> に class =" を追加しますform-control" 。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　基本的フォーム/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<label　for="name">名前</label>
		<input　type="text"　class="form-control"　id="name"　
			　　　placeholder="名称を入力してください">
	</div>
	<div　class="form-group">
		<label　for="inputfile">ファイル入力</label>
		<input　type="file"　id="inputfile">
		<p　class="help"}-block">ここにブロックレベルのヘルプテキストの例があります。</p>
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　チェックを入れてください
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">送信</button>
</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

内联フォーム

、すべての要素が内联で左寄せに配置され、ラベルが並べられたフォームを作成する必要がある場合は、<form> タグに class を追加してください .form-inline。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　内联フォーム</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-inline"　role="form">
	<div　class="form-group">
		<label　class="sr-only"　for="name">名称</label>
		<input　type="text"　class="form-control"　id="name"　
			　　　placeholder="名称を入力してください">
	</div>
	<div　class="form-group">
		<label　class="sr-only"　for="inputfile">ファイル入力</label>
		<input　type="file"　id="inputfile">
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　チェックを入れてください
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">送信</button>
</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

  • デフォルトでは、Bootstrap の input、select、textarea は 100% 的幅。内联フォームを使用する場合、フォームコントロールに幅を設定する必要があります。

  • class を使用して .sr-only、内联フォームのラベルを非表示にすることができます。

水平フォーム

水平フォームは他のフォームと比較して、タグの数だけでなく、フォームの表示形式も異なります。水平レイアウトのフォームを作成するには、以下の手順に従ってください：

  • 親 <form> 要素に class を追加します .form-horizontal。

  • ラベルとコントロールを class がついた .form-group の <div> 内に。

  • ラベルに class を追加します .control-label。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　水平フォーム</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div　class="form-group">
		<label　for="firstname"　class="col-sm-2　control-label">名前</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="firstname"　
				　　　placeholder="名前を入力してください">
		</div>
	</div>
	<div　class="form-group">
		<label　for="lastname"　class="col-sm-2　control-label">姓</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="lastname"　
				　　　placeholder="姓を入力してください">
		</div>
	</div>
	<div　class="form-group">
		<div　class="col-sm-offset-2　col-sm-10">
			<div class="checkbox">
				<label>
					<input　type="checkbox">　メモリに残す
				</label>
			</div>
		</div>
	</div>
	<div　class="form-group">
		<div　class="col-sm-offset-2　col-sm-10">
			<button　type="submit"　class="btn　btn-default">ログイン</button>
		</div>
	</div>
</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

サポートされているフォームコントロール

Bootstrap は最も一般的なフォームコントロールをサポートしており、主に input、textarea、checkbox、radio そして select。

入力フィールド(Input)

最も一般的なフォームのテキストフィールドは、入力フィールド inputです。ユーザーはそこに多くの必要なフォームデータを入力できます。Bootstrapは、すべての原生HTML5 のinputタイプのサポートを提供しています：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel および color。適切な type 宣言が必要です。これにより、 input 完全なスタイルを取得します。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　入力フィールド</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<label for="name">ラベル</label>
		<input　type="text"　class="form-control" placeholder="テキスト入力">
	</div>
　</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

テキストボックス(Textarea)

複数行の入力が必要な場合、テキストボックス textareaを使用できます。必要に応じて変更 rows 属性（行数が少ない = 小さなボックス、行数が多い = 大きなボックス）。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　テキストボックス</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<label for="name">テキストボックス</label>
		<textarea class="form-control" rows="3></textarea>
	</div>
</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

チェックボックス（Checkbox）とラジオボックス（Radio）

チェックボックスとラジオボックスは、ユーザーが一連の事前に設定されたオプションから選択できるようにするために使用されます。

  • フォームを作成する際に、ユーザーがリストからいくつかのオプションを選択できるようにする場合は、 checkbox。ユーザーが1つのオプションのみを選択できるように制限する場合は、 radio。

  • 連続するチェックボックスとラジオボックスに対して使用します .checkbox-inline または .radio-inline classを使用して、同じ行に表示されます。

以下の例では、これらの二種類（デフォルトとインライン）を示しています：

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　チェックボックスとラジオボタンの/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<label for="name">デフォルトの复选框と单选按钮の例</label>
<div class="checkbox">
	<label><input type="checkbox" value="">オプション　1</label>
</div>
<div class="checkbox">
	<label><input type="checkbox" value="">オプション　2</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1"　value="option1"　checked>　オプション　1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2"　value="option2">オプション　2　-　選択すると、オプションが解除されます　1
	</label>
</div>
<label for="name">内联的复选框和单选按钮的示例</label>
<div>
	<label class="checkbox"-inline">
		<input　type="checkbox"　id="inlineCheckbox"}1"　value="option1">　オプション　1
	</label>
	<label class="checkbox"-inline">
		<input　type="checkbox"　id="inlineCheckbox"}2"　value="option2">　オプション　2
	</label>
	<label class="checkbox"-inline">
		<input　type="checkbox"　id="inlineCheckbox"}3"　value="option3">　オプション　3
	</label>
	<label　class="radio-inline">
		<input　type="radio"　name="optionsRadiosinline"　id="optionsRadios3"　value="option1"　checked>　オプション　1
	</label>
	<label　class="radio-inline">
		<input　type="radio"　name="optionsRadiosinline"　id="optionsRadios4"　　value="option2">　オプション　2
	</label>
</div>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

選択ボックス(Select)

ユーザーが複数のオプションから選択できるようにしたい場合、ただしデフォルトでは1つのオプションのみを選択できるようにする場合は、選択ボックスを使用します。

  • <select> を使用してリストオプションを表示します。これは、ユーザーがよく知っている選択リスト（例えば、州や数字など）の場合が多いです。

  • 使用 multiple="multiple" ユーザーに複数のオプションを選択できるようにします。

以下の例では、これらのタイプ（select と multiple）を示しています：

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　サンプル　-　選択ボックス</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<div　class="form-group">
		<label　for="name">リスト</label>
		<select　class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<label　for="name">複数選択リスト</label>
		<select　multiple　class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

静的コントロール

水平フォーム内でフォームラベルの後にテキストを配置する必要がある場合、<p> 上で class を使用してください .form-control-static。

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　サンプル　-　静的コントロール</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div　class="form-group">
		<label　class="col-sm-2　control-label">Email</label>
		<div　class="col-sm-10">
			<p　class="form-control-static">[email protected]</p>
		</div>
	</div>
	<div　class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">パスワード</label>
		<div　class="col-sm-10">
			<input　type="password"　class="form-control"　id="inputPassword"　
				　　　placeholder="パスワードを入力してください">
		</div>
	</div>
</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

フォームコントロールの状態

以下のものに加えて :focus 状態（つまり、ユーザーが input をクリックしたり、tab キーを使用して input にフォーカスを当てるとき）、Bootstrap は無効な入力フィールドのスタイルを定義し、フォームのバリデーションクラスを提供します。

入力フィールド焦点

入力フィールド input がフォーカスを受け取るとき、 :focus の場合、入力フィールドの枠線が削除され、 box-shadow。

無効な入力フィールド input

入力フィールド input を無効にするには、単に以下のように追加してください disabled これにより、入力フィールドのスタイルが無効になり、要素にカーソルが合わせられた際のカーソルのスタイルも変更されます。

無効なフィールドセット fieldset

<fieldset> に disabled 属性を追加して、<fieldset> 内のすべてのコントロールを無効にします。

確認状態

Bootstrap は、エラーメッセージ、警告メッセージ、成功メッセージの確認スタイルを含んでいます。適切な class を親要素に簡単に追加するだけで十分です（.has-warning、 .has-error または .has-success）を使用すると、確認状態が使用できます。

以下の例では、すべてのコントロールの状態を示しています：

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　フォームコントロールの状態</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div　class="form-group">
		<label　class="col-sm-2　control-label">フォーカス</label>
		<div　class="col-sm-10">
			<input　class="form-control"　id="focusedInput"　type="text"　　value="この入力フィールドがフォーカスを持っています...">
		</div>
	</div>
	<div　class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">
			選択禁止
		</label>
		<div　class="col-sm-10">
			<input　class="form-control"　id="disabledInput"　type="text"　placeholder="この入力フィールドは選択禁止..."　disabled>
		</div>
	</div>
	<fieldset　disabled>
		<div　class="form-group">
			<label　for="disabledTextInput"　　class="col-sm-2　control-label">選択禁止入力（Fieldset　disabled）
			</label>
			<div　class="col-sm-10">
				<input　type="text"　id="disabledTextInput"　class="form-control"　　placeholder="選択禁止">
			</div>
		</div>
		<div　class="form-group">
			<label　for="disabledSelect"　　class="col-sm-2　control-label">選択禁止メニュー（Fieldset　disabled）
			</label>
			<div　class="col-sm-10">
				<select　id="disabledSelect"　class="form-control">
					<option>選択禁止</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div　class="form-group　has-success">
		<label　class="col-sm-2　control-label"　for="inputSuccess">
			入力成功
		</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="inputSuccess">
		</div>
	</div>
	<div　class="form-group　has-warning">
		<label　class="col-sm-2　control-label"　for="inputWarning">
			入力警告
		</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="inputWarning">
		</div>
	</div>
	<div　class="form-group　has-error">
		<label　class="col-sm-2　control-label"　for="inputError">
			入力エラー
		</label>
		<div　class="col-sm-10">
			<input　type="text"　class="form-control"　id="inputError">
		</div>
	</div>
</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

フォームコントロールサイズ

を使用してそれぞれクラス .input-lg および .col-lg-* でフォームの高さと幅を設定できます。以下の例ではこのポイントを示しています：

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　フォームコントロールサイズ</title>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="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="デフォルト入力">
	</div>
	<div　class="form-group">
		<input　class="form-control　input-sm"　type="text"　placeholder=".input-sm">
	</div>
	<div　class="form-group">
	</div>
	<div　class="form-group">
		<select　class="form-control　input-lg">
			<option　value="">.input-lg</option>
		</select>
	</div>
	<div　class="form-group">
		<select　class="form-control">
			<option　value="">デフォルト選択</option>
		</select>
	</div>
	<div　class="form-group">
		<select　class="form-control　input-sm">
			<option　value="">.input-sm</option>
		</select>
	</div>
	<div　class="row">
		<div　class="col-lg-2">
			<input　type="text"　class="form-control"　placeholder=".col-lg-2">
		</div>
		<div　class="col-lg-3">
			<input　type="text"　class="form-control"　placeholder=".col-lg-3">
		</div>
		<div　class="col-lg-4">
			<input　type="text"　class="form-control"　placeholder=".col-lg-4">
		</div>
	</div>
</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

フォームヘルプテキスト

Bootstrap フォームコントロールは、input ボックスにブロック状のヘルプテキストを持つことができます。全幅を占める内容ブロックを追加するには、<input> の後に .help-block。以下の例ではこのポイントを示しています：

オンラインサンプル

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　フォームヘルプテキスト</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　role="form">
	<span>ヘルプテキスト例</span>
	<input　class="form-control"　type="text"　placeholder="">
	<span　class="help-block">長いヘルプテキストブロック、一行を超えます，
		次の行に拡張する必要があります。この例のヘルプテキストは二行あります。</span>
</form>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

Bootstrap ボタンBootstrap テーブル