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

フォームコントロール

概要

フォームコントロール


InputBox

InputBox

ソース（デモ）
<!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 Box</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <input type="text" placeholder="なんか入力">
          <h4>placeholder="xxx"を設定した場合、設定されている値をデータが空の場合に表示する</h4>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

TextArea

TextArea

ソース（デモ）
<!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>Text Area</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <textarea rows="3"></textarea>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

Checkbox

Checkbox

ソース（デモ）
<!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>Check Box</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <label class="checkbox">
            <input type="checkbox" value="">
            チェック１
          </label>
          <label class="checkbox">
            <input type="checkbox" value="">
            チェック２
          </label>
        </form>
      </div>
    </div>
    <hr />
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>Check Box（インライン）</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <label class="checkbox inline">
            <input type="checkbox" value="">
            チェック１
          </label>
          <label class="checkbox inline">
            <input type="checkbox" value="">
            チェック２
          </label>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

Radio button

Radio button

ソース（デモ）
<!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>Radio</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <label class="radio">
            <input type="radio" value="">
            ラジオ１
          </label>
          <label class="radio">
            <input type="radio" value="">
            ラジオ２
          </label>
        </form>
      </div>
    </div>
    <hr />
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>Radio（インライン）</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <label class="radio inline">
            <input type="radio" value="">
            ラジオ１
          </label>
          <label class="radio inline">
            <input type="radio" value="">
            ラジオ２
          </label>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

Select

Select

ソース（デモ）
<!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>Select</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <select>
            <option>選択１</option>
            <option>選択２</option>
            <option>選択３</option>
            <option>選択４</option>
            <option>選択５</option>
          </select>
        </form>
      </div>
    </div>
    <hr />
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>Select（複数選択）</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <select multiple="multiple">
            <option>選択１</option>
            <option>選択２</option>
            <option>選択３</option>
            <option>選択４</option>
            <option>選択５</option>
          </select>
        </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日 09:26