「Twitter Bootstrap」✕「フォーム」

1.検索フォーム

Search form
・<input>要素を丸くするためにクラス付与

<form class="form-search">

  <input type="text" class="input-medium search-query">

  <button type="submit" class="btn">Search</button>

</form>

---

2.インラインフォーム

Inline form
・横一列型(インライン表示)
・コンパクトなレイアウトのために、フォーム要素をインラインブロック表示(display: inline-block;)
・具体的には「form-inline」クラス付与

<form class="form-inline">

  <input type="text" class="input-small" placeholder="Email">

  <input type="password" class="input-small" placeholder="Password">

  <label class="checkbox">

    <input type="checkbox"> Remember me

  </label>

  <button type="submit" class="btn">Sign in</button>

</form>

---

3.水平フォーム

Horizontal form
・横型
・各フォーム要素と同じ行に表示されるよう、「右位置を合わせたラベル」を左側にフロート
・「form-horizontal」「control-group」「control-label」「controls」クラスを付与する必要あり
・通常フォームを作成する場合、このタイプを利用することになる

<form class="form-horizontal">

  <div class="control-group">

    <label class="control-label" for="inputEmail">Email</label>

    <div class="controls">

      <input type="text" id="inputEmail" placeholder="Email">

    </div>

  </div>

  <div class="control-group">

    <label class="control-label" for="inputPassword">Password</label>

    <div class="controls">

      <input type="password" id="inputPassword" placeholder="Password">

    </div>

  </div>

  <div class="control-group">

    <div class="controls">

      <label class="checkbox">

        <input type="checkbox"> Remember me

      </label>

      <button type="submit" class="btn">Sign in</button>

    </div>

  </div>

</form>

<form class="form-horizontal">

	<div class="control-group">

		<label class="control-label">名前</label>

		<div class="controls">

			<input type="text" name="name" class="span3">

		</div>

	</div>

	<div class="control-group success">

		<label class="control-label">メアド</label>

		<div class="controls">

			<input type="text" name="name" class="span4"> <span class="help-inline">形式が正しくありません</span>

		</div>

	</div>

	<div class="control-group">

		<div class="controls">

			<input type="submit" value="送信" class="btn">

		</div>

	</div>

</form>

・フォーカスがうつると色が変わる、といったスタイルがあらかじめ用意されている
・「clearfixクラスで囲む」のは、以前の書き方

フォーム部品の大きさを揃える
・※「span数字」クラス

<input type="text" id="name" class="span6">

補足情報を追加 … Help text

<span class="help-inline">メモです。</span> … インライン

<span class="help-block">メモです。</span> … ブロック

エラー用レイアウトクラス … Validation states

<div class="control-group warning">

  <label class="control-label" for="inputWarning">Input with warning</label>

  <div class="controls">

    <input type="text" id="inputWarning">

    <span class="help-inline">Something may have gone wrong</span>

  </div>

</div>

 

<div class="control-group error">

  <label class="control-label" for="inputError">Input with error</label>

  <div class="controls">

    <input type="text" id="inputError">

    <span class="help-inline">Please correct the error</span>

  </div>

</div>

 

<div class="control-group info">

  <label class="control-label" for="inputInfo">Input with info</label>

  <div class="controls">

    <input type="text" id="inputInfo">

    <span class="help-inline">Username is already taken</span>

  </div>

</div>

 

<div class="control-group success">

  <label class="control-label" for="inputSuccess">Input with success</label>

  <div class="controls">

    <input type="text" id="inputSuccess">

    <span class="help-inline">Woohoo!</span>

  </div>

</div>