プログラミングの勉強をしよう@Wiki
プログラミングの勉強をしよう@Wiki

フォーム

概要

フォームのスタイル表記


デフォルトフォーム

formタグは未指定

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>フォーム</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>フォーム</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>フォームレイアウト（デフォルト）</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <fieldset>
            <legend>フィールドでの定義</legend>
            <label>入力でのラベル</label>
            <input type="text" placeholder="なんか入力">
            <span class="help-block">補足文字列</span>
            <label class="checkbox">
              <input type="checkbox"> チェックBOX
            </label>
            <label class="radio">
              <input type="radio"> ラジオボタン１
            </label>
            <label class="radio">
              <input type="radio"> ラジオボタン２
            </label>
            <button type="submit" class="btn">Submit</button>
          </fieldset>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

検索用フォーム

formタグは未指定

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>フォーム</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>フォーム</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>フォームレイアウト（検索用）</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form class="form-search">
          <input type="text" class="search-query" placeholder="なんか入力" />
          <button type="submit" class="btn">Submit</button>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

インラインフォーム

formタグは未指定

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>フォーム</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>フォーム</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>フォームレイアウト（インライン）</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form class="form-inline">
          <input type="text" class="input-small" placeholder="メール">
          <input type="password" class="input-small" placeholder="パスワード">
          <label class="checkbox">
            <input type="checkbox"> 保存する
          </label>
          <button type="submit" class="btn">サインイン</button>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

横並びフォーム（１項目をラベルと項目でグループとしている）

formタグにclass="form-horizontal"を追加し、control-groupでグループ化して対応

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>フォーム</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>フォーム</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>フォームレイアウト（横並び）</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <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="メール">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="inputPassword">Password</label>
            <div class="controls">
              <input type="password" id="inputPassword" placeholder="パスワード">
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox"> 保存する
              </label>
              <button type="submit" class="btn">サインイン</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

「フォームレイアウト」をウィキ内検索
最終更新：2013年06月07日 08:59