Cacher is the code snippet organizer for pro developers

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<h1>form実装例</h1>
<form>
    <div class="form-group">
        <label for="yourname">お名前</label>
        <input class="form-control" type="text" id="yourname">
    </div>
    <div class="form-group">
        <label for="youremail">メールアドレス</label>
        <input class="form-control" type="email" id="youremail">
    </div>
    <div class="radio">
        <label><input type="radio">男性 </label>
        <label><input type="radio">女性 </label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox">メルマガ購読 </label>
    </div>
    <button type="submit" class="btn btn-primary">送信</button>
</form>

<h1>インライン表示</h1>
<form class="form-inline">
  <label for="youremail">メールアドレス</label>
  <input class="form-control" type="email" id="youremail">
  <button type="submit" class="btn btn-primary">送信</button>
</form>

<h1>form-horizontal</h1>
<form class="form-horizontal">
    <div class="form-group">
        <label for="yourname" class="col-sm-2 control-label">お名前</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="yourname" placeholder="山田太郎">
        </div>
    </div>
    <div class="form-group">
        <label for="youremail" class="col-sm-2 control-label">Eメール</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="youremail" placeholder="sample@smaple.com">
        </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>

<h1>パーツ</h1>
<h2>チェックボックス</h2>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="">Aメルマガ購読する
      </label>
    </div>
     <div class="checkbox">
       <label>
        <input type="checkbox" value="">Bメルマガ購読する
       </label>
    </div>
    <div class="checkbox">
       <label>
         <input type="checkbox" value="">Cメルマガ購読する
       </label>
    </div>
<h2>横並び</h2>
<div class="checkbox-inline">
  <input type="checkbox" value="">Aメルマガ購読する
</div>
<div class="checkbox-inline">
  <input type="checkbox" value="">Bメルマガ購読する
</div>
<div class="checkbox-inline">
  <input type="checkbox" value="">Cメルマガ購読する
</div>

<h2>ラジオボタン</h2>
<div class="radio">
  <label for="a">
    <input type="radio" name="examplevertical" value="" id="a">選択肢Ａ
  </label>
</div>

<div class="radio">
  <label for="b">
  <input type="radio" name="examplevertical" value="" id="b">選択肢Ｂ
  </label>
</div>
<div class="radio">
  <label for="c">
    <input type="radio" name="examplevertical" value="" id="c">選択肢Ｃ
  </label>  
</div>
<h4>radio-inline</h4>
<div class="radio-inline">
  <input type="radio" name="examplehorizontal" value="">選択肢Ａ
</div>
<div class="radio-inline">
  <input type="radio" name="examplehorizontal" value="">選択肢Ｂ
</div>
<div class="radio-inline">
  <input type="radio" name="examplehorizontal" value="">選択肢Ｃ
</div>

<h1>フォームのボタン</h1>
<button type="submit" class="btn btn-primary">送信する</button>
<input type="submit" class="btn btn-primary" value="送信する">

<h1>フォームのプルダウン</h1>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<select  multiple  class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>