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

拡張フォームコントロール

概要

*


addon

divに.input-prepend, .input-appendで挟んだ項目に、inputタグの前後にaddonを追加し、連結する

ソース（デモ）
<!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>inputの前後にテキストを付加</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h4>前に追加する場合はinput-prepend</h4>
        <div class="input-prepend">
          <span class="add-on">@</span>
          <input type="text" placeholder="text" />
        </div>
        <hr />
 
        <h4>後ろに追加する場合はinput-append</h4>
        <div class="input-append">
          <input type="text" placeholder="text" />
          <span class="add-on">円</span>
        </div>
        <hr />
 
        <h4>前後それぞれに追加する場合はinput-prepend、input-append</h4>
        <div class="input-prepend input-append">
          <span class="add-on">￥</span>
          <input type="text" placeholder="text" />
          <span class="add-on">円</span>
        </div>
        <hr />
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

button

divに.input-prepend, .input-appendで挟んだ項目に、inputタグにspanのclassを追加し、連結する

ソース（デモ）
<!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>inputの前後にボタンを付加</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h4>前に追加する場合はinput-prepend</h4>
        <div class="input-prepend">
          <button class="btn" type="button">GO</button>
          <input type="text" placeholder="text" />
        </div>
        <hr />
 
        <h4>後ろに追加する場合はinput-append</h4>
        <div class="input-append">
          <input type="text" placeholder="text" />
          <button class="btn" type="button">GO</button>
        </div>
        <hr />
 
        <h4>前後それぞれに追加する場合はinput-prepend、input-append</h4>
        <div class="input-prepend input-append">
          <button class="btn" type="button">GO</button>
          <input type="text" placeholder="text" />
          <button class="btn" type="button">GO</button>
        </div>
        <hr />
 
        <h4>複数のボタンを配置した場合は連結する</h4>
        <div class="input-prepend input-append">
          <button class="btn" type="button">GO</button>
          <input type="text" placeholder="text" />
          <button class="btn" type="button">GO</button>
          <button class="btn" type="button">GO</button>
        </div>
        <hr />
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

buttonのドロップダウン

ボタンをドロップダウンにして、inputタグと連結

ソース（デモ）
<!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">
        <h4>前に追加する場合はinput-prepend</h4>
        <div class="input-prepend">
          <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
              ドロップダウン
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">リスト１</a></li>
              <li><a href="#">リスト２</a></li>
              <li class="divider"></li>
              <li><a href="#">リスト３</a></li>
            </ul>
          </div>
          <input type="text" placeholder="text" />
        </div>
        <hr />
 
        <h4>後ろに追加する場合はinput-append</h4>
        <div class="input-append">
          <input type="text" placeholder="text" />
          <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
              ドロップダウン
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">リスト１</a></li>
              <li><a href="#">リスト２</a></li>
              <li class="divider"></li>
              <li><a href="#">リスト３</a></li>
            </ul>
          </div>
        </div>
        <hr />
 
        <h4>前後それぞれに追加する場合はinput-prepend、input-append</h4>
        <div class="input-prepend input-append">
          <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
              ドロップダウン
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">リスト１</a></li>
              <li><a href="#">リスト２</a></li>
              <li class="divider"></li>
              <li><a href="#">リスト３</a></li>
            </ul>
          </div>
          <input type="text" placeholder="text" />
          <div class="btn-group">
            <button class="btn dropdown-toggle" data-toggle="dropdown">
              ドロップダウン
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">リスト１</a></li>
              <li><a href="#">リスト２</a></li>
              <li class="divider"></li>
              <li><a href="#">リスト３</a></li>
            </ul>
          </div>
        </div>
        <hr />
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

検索フォーム

inputタグの前後に検索用ボタンを連結

ソース（デモ）
<!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>inputと検索ボタンを結合（※これは前後には設定できない）</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h4>前に追加する場合はinput-prepend</h4>
        <form class="form-search">
          <div class="input-prepend">
            <button type="button" class="btn">Submit</button>
            <input type="text" class="search-query" placeholder="なんか入力" />
          </div>
        </form>
        <hr />
 
        <h4>後ろに追加する場合はinput-append</h4>
        <form class="form-search">
          <div class="input-append">
            <input type="text" class="search-query" placeholder="なんか入力" />
            <button type="button" class="btn">Submit</button>
          </div>
        </form>
        <hr />
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

inputタグのサイズ

classにサイズのclassを設定することで対応する

ソース（デモ）
<!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>inputエリアのサイズを調整</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h4>input-block-levelのブロックで配置</h4>
        <form class="form-search">
          <input type="text" class="input-block-level" placeholder="なんか入力" />
        </form>
        <hr />
 
        <h4>input-mini</h4>
        <form class="form-search">
          <input class="input-mini" type="text" placeholder=".input-mini">
        </form>
        <hr />
 
        <h4>input-small</h4>
        <form class="form-search">
          <input class="input-small" type="text" placeholder=".input-small">
        </form>
        <hr />
 
        <h4>input-medium</h4>
        <form class="form-search">
          <input class="input-medium" type="text" placeholder=".input-medium">
        </form>
        <hr />
 
        <h4>input-large</h4>
        <form class="form-search">
          <input class="input-large" type="text" placeholder=".input-large">
        </form>
        <hr />
 
        <h4>input-xlarge</h4>
        <form class="form-search">
          <input class="input-xlarge" type="text" placeholder=".input-xlarge">
        </form>
        <hr />
 
        <h4>input-xxlarge</h4>
        <form class="form-search">
          <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
        </form>
        <hr />
 
        <h4>グリッドのspanを使用することでサイズを調整できる</h4>
        <form class="form-search">
          <input class="span1" type="text" placeholder=".span1"><br /><br />
          <input class="span2" type="text" placeholder=".span2"><br /><br />
          <input class="span3" type="text" placeholder=".span3"><br /><br />
          <input class="span4" type="text" placeholder=".span4"><br /><br />
          <input class="span5" type="text" placeholder=".span5"><br /><br />
          <input class="span6" type="text" placeholder=".span6"><br /><br />
          <input class="span7" type="text" placeholder=".span7"><br /><br />
          <input class="span8" type="text" placeholder=".span8"><br /><br />
          <input class="span9" type="text" placeholder=".span9"><br /><br />
          <input class="span10" type="text" placeholder=".span10"><br /><br />
          <input class="span11" type="text" placeholder=".span11"><br /><br />
          <input class="span12" type="text" placeholder=".span12"><br /><br />
        </form>
        <hr />
 
        <h4>classのcontrols controls-rowとグリッドのspanを使用することでサイズを調整できる</h4>
        <form>
          <div class="controls">
            <input class="span6" type="text" placeholder=".span6">
          </div>
          <div class="controls controls-row">
            <input class="span2" type="text" placeholder=".span2">
            <input class="span4" type="text" placeholder=".span4">
          </div>
        </form>
        <hr />
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

入力用のinputエリアを擬似的に表示

classに"uneditable-input"を指定して編集不可にする

ソース（デモ）
<!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>spanタグをinputに偽装</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h4>uneditable-input</h4>
        <span class="input-xlarge uneditable-input">実はこれspanタグなんだよね</span>
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

フォームアクション

classに"form-actions"を指定してボタンを整列する

ソース（デモ）
<!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>form class="form-actions"とする</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h4>form-actionsがない場合</h4>
        <form>
          <a href="#" class="btn btn-primary">保存する</a>
          <a href="#" class="btn">Cancel</a>
        </form>
        <hr />
 
        <h4>form-actionsを指定した場合</h4>
        <form class="form-actions">
          <a href="#" class="btn btn-primary">保存する</a>
          <a href="#" class="btn">Cancel</a>
        </form>
        <hr />
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

ヘルプテキスト

補足用の文字列を表示する

ソース（デモ）
<!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">
        <h4>class="help-inline"の場合は右に設定</h4>
        <form class="form-actions">
          <input type="text">
          <span class="help-inline">インラインヘルプ</span>
        </form>
        <hr />
 
        <h4>class="help-block"の場合は次行に設定</h4>
        <form class="form-actions">
          <input type="text">
          <span class="help-block">ブロックヘルプ</span>
        </form>
        <hr />
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

input使用不可

disabledを指定して入力不可

ソース（デモ）
<!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>disabledでinpuutを無効</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h4>disabled</h4>
        <input type="text" placeholder="無効化されている" disabled />
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

状態により、色情報を変更

class=""に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">
        <h4>データのスタイル</h4>
        <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>
 
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

「拡張フォームコントロール」をウィキ内検索
最終更新：2013年06月09日 11:29