bootstrap-cc-03-form
<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">選択肢A
</label>
</div>
<div class="radio">
<label for="b">
<input type="radio" name="examplevertical" value="" id="b">選択肢B
</label>
</div>
<div class="radio">
<label for="c">
<input type="radio" name="examplevertical" value="" id="c">選択肢C
</label>
</div>
<h4>radio-inline</h4>
<div class="radio-inline">
<input type="radio" name="examplehorizontal" value="">選択肢A
</div>
<div class="radio-inline">
<input type="radio" name="examplehorizontal" value="">選択肢B
</div>
<div class="radio-inline">
<input type="radio" name="examplehorizontal" value="">選択肢C
</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>