# フォーム

## フォームの機能

formタグに .%{STYLEGUIDE_PAGE}-form をつけるとinputタグに装飾がつきます。

フォーカスすると周りのボーダーが青色に変わります。

### 基本のHTML

    <form class="%{STYLEGUIDE_PAGE}-form">
    	<input type="email" id="email" placeholder="ex) info@hoge.com">
    </form>

## ブロック

### .%{STYLEGUIDE_PAGE}-form-group

    <div class="%{STYLEGUIDE_PAGE}-form-group">
    	<label for="email">メールアドレス</label>
    	<input type="email" id="email" placeholder="ex) info@example.com">
    </div>

メールアドレス
パスワード
住んでいるところ
画像

jpeg、gif、ping形式でアップロードしてください。

青色 赤色 黄色
パスワードを保存する

## ラベルもブロックにする

### .%{STYLEGUIDE_PAGE}-form-block

ラベルをブロックするとinputが下にきます。

メールアドレス

    <div class="%{STYLEGUIDE_PAGE}-form-group">
    	<label for="email" class="%{STYLEGUIDE_PAGE}-form-block">メールアドレス</label>
    	<input type="email" id="email" placeholder="ex) info@example.com">
    </div>

## インライン（横並び）

メールアドレス パスワード

## 無効化

disabled属性をつける

メールアドレス 選択
保存する

    <input type="email" id="email" disabled>

    <select disabled>
    	<option value="">---</option>
    	<option value="...">...</option>
    </select>

## エラー

### .%{STYLEGUIDE_PAGE}-text-error

テキストの色が赤色になります。

お名前を入力してください。

    <p class="%{STYLEGUIDE_PAGE}-text-error">お名前を入力してください。</p>

### .%{STYLEGUIDE_PAGE}-form-error

inputが赤色に変わる

メールアドレス

    <input type="email" placeholder="ex) info@example.com" class="%{STYLEGUIDE_PAGE}-form-error">

## フォームサイズ

### .%{STYLEGUIDE_PAGE}-form-large

大きい

メールアドレス

### .%{STYLEGUIDE_PAGE}-form-small

小さい

メールアドレス

    <input type="email" id="largeForm" placeholder="ex) info@example.com" class="%{STYLEGUIDE_PAGE}-form-large">

    <input type="email" id="smallForm" placeholder="ex) info@example.com" class="%{STYLEGUIDE_PAGE}-form-small">

## フォーム長さ

.%{STYLEGUIDE_PAGE}-form-width-large
.%{STYLEGUIDE_PAGE}-form-width-medium
.%{STYLEGUIDE_PAGE}-form-width-small
.%{STYLEGUIDE_PAGE}-form-width-mini
.%{STYLEGUIDE_PAGE}-form-width-full(100%)
.%{STYLEGUIDE_PAGE}-form-width-3quarters(75%)
.%{STYLEGUIDE_PAGE}-form-width-half(50%)
.%{STYLEGUIDE_PAGE}-form-width-quarter(25%)

    <input type="text" class="%{STYLEGUIDE_PAGE}-form-width-large">
    <input type="text" class="%{STYLEGUIDE_PAGE}-form-width-medium">
    <input type="text" class="%{STYLEGUIDE_PAGE}-form-width-small">
    <input type="text" class="%{STYLEGUIDE_PAGE}-form-width-mini">
    <input type="text" class="%{STYLEGUIDE_PAGE}-form-width-full">
    <input type="text" class="%{STYLEGUIDE_PAGE}-form-width-3quarters">
    <input type="text" class="%{STYLEGUIDE_PAGE}-form-width-half">
    <input type="text" class="%{STYLEGUIDE_PAGE}-form-width-quarter">

## チェックボックスとラジオボタンのデザインを変える

Internet Explorerは11以上で対応しています。

### チェックボックス（左にアイコン）

りんご
もも
ぶどう
みかん(disabledあり)

    <div class="%{STYLEGUIDE_PAGE}-form-checkbox">
    	<input checked="checked" type="checkbox" id="input-checkbox-apple">
    	<label for="input-checkbox-apple">
    		<i class="%{STYLEGUIDE_PAGE}-ico-checkbox"></i>りんご
    	</label>
    </div>

### チェックボックス（ボタン）

りんご もも ぶどう みかん

    <input type="checkbox" id="checkbox-1-1" class="%{STYLEGUIDE_PAGE}-btn-checkbox" /><label for="checkbox-1-1">りんご</label>

### ラジオボタン（左にアイコン）

うどん
そば
カレー
牛丼(disabledあり)

    <div class="%{STYLEGUIDE_PAGE}-form-radio">
    	<input name="custom-radio" checked="checked" type="radio" id="input-radio-udon">
    	<label for="input-radio-udon">
    		<i class="%{STYLEGUIDE_PAGE}-ico-radio"></i>うどん
    	</label>
    </div>

### ラジオボタン（ボタン）

うどん そば カレー

    <input type="radio" id="radio-1-2" name="radio-1-set" class="%{STYLEGUIDE_PAGE}-btn-radio" /><label for="radio-1-2">そば</label>

## 入力欄と一緒に

### ラジオボタン

    <div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-form-width-medium">
    	<div class="%{STYLEGUIDE_PAGE}-form-action">
    		<div class="%{STYLEGUIDE_PAGE}-form-radio %{STYLEGUIDE_PAGE}-form-side %{STYLEGUIDE_PAGE}-form-side-left">
    			<input name="custom-radio" checked="checked" type="radio" id="input-radio-with-input">
    			<label for="input-radio-with-input">
    				<i class="%{STYLEGUIDE_PAGE}-ico-radio"></i>
    			</label>
    		</div>
    		<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
    	</div>
    </div>
    <div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-form-width-medium">
    	<div class="%{STYLEGUIDE_PAGE}-form-action">
    		<span class="%{STYLEGUIDE_PAGE}-form-side"><input name="custom-radio" checked="checked" type="radio"></span>
    		<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
    	</div>
    </div>

### チェックボックス

    <div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-form-width-medium">
    	<div class="%{STYLEGUIDE_PAGE}-form-action">
    		<div class="%{STYLEGUIDE_PAGE}-form-checkbox %{STYLEGUIDE_PAGE}-form-side">
    			<input name="custom-checkbox" checked="checked" type="checkbox" id="input-checkbox-with-input">
    			<label for="input-checkbox-with-input">
    				<i class="%{STYLEGUIDE_PAGE}-ico-checkbox"></i>
    			</label>
    		</div>
    		<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
    	</div>
    </div>
    <div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-form-width-medium">
    	<div class="%{STYLEGUIDE_PAGE}-form-action">
    		<span class="%{STYLEGUIDE_PAGE}-form-side"><input name="custom-checkbox" checked="checked" type="checkbox"></span>
    		<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
    	</div>
    </div>

### アイコン

    <div class="%{STYLEGUIDE_PAGE}-form-action %{STYLEGUIDE_PAGE}-form-width-medium">
    	<span class="%{STYLEGUIDE_PAGE}-form-side"><i class="%{STYLEGUIDE_PAGE}-icon-time"></i></span>
    	<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
    </div>

### ボタン

    <div class="%{STYLEGUIDE_PAGE}-grid">
    	<div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-col-6">
    		<div class="%{STYLEGUIDE_PAGE}-form-action">
    			<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-full">
    			<span class="%{STYLEGUIDE_PAGE}-form-side-btn"><button type="submit" class="%{STYLEGUIDE_PAGE}-btn">送信</button></span>
    		</div>
    	</div>
    </div>

### ボタンの分離

    <div class="%{STYLEGUIDE_PAGE}-grid">
    	<div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-col-6">
    		<div class="%{STYLEGUIDE_PAGE}-form-action %{STYLEGUIDE_PAGE}-form-action-separate">
    			<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-full">
    			<span class="%{STYLEGUIDE_PAGE}-form-side-btn"><button type="submit" class="%{STYLEGUIDE_PAGE}-btn">送信</button></span>
    		</div>
    	</div>
    </div>

### 大きさ

    <div class="%{STYLEGUIDE_PAGE}-grid %{STYLEGUIDE_PAGE}-form">
    	<div class="%{STYLEGUIDE_PAGE}-col-4 %{STYLEGUIDE_PAGE}-form-action">
    		<span class="%{STYLEGUIDE_PAGE}-form-side">
    			<input name="custom-radio" checked="checked" type="radio">
    		</span>
    		<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small %{STYLEGUIDE_PAGE}-form-small">
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-col-4 %{STYLEGUIDE_PAGE}-form-action">
    		<span class="%{STYLEGUIDE_PAGE}-form-side">
    			<input name="custom-radio" checked="checked" type="radio">
    		</span>
    		<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-col-4 %{STYLEGUIDE_PAGE}-form-action">
    		<span class="%{STYLEGUIDE_PAGE}-form-side">
    			<input name="custom-radio" checked="checked" type="radio">
    		</span>
    		<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small %{STYLEGUIDE_PAGE}-form-large">
    	</div>
    </div>

### 左右

    <div class="%{STYLEGUIDE_PAGE}-grid">
    	<div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-col-6">
    		<div class="%{STYLEGUIDE_PAGE}-form-action">
    			<span class="%{STYLEGUIDE_PAGE}-form-side-btn"><button type="submit" class="%{STYLEGUIDE_PAGE}-btn">送信</button></span>
    			<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
    		</div>
    	</div>
    	<div class="%{STYLEGUIDE_PAGE}-form-group %{STYLEGUIDE_PAGE}-col-6">
    		<div class="%{STYLEGUIDE_PAGE}-form-action">
    			<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">
    			<span class="%{STYLEGUIDE_PAGE}-form-side-btn"><button type="submit" class="%{STYLEGUIDE_PAGE}-btn">送信</button></span>
    		</div>
    	</div>
    </div>