フォーム

フォームの機能

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" id="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">

フォーム長さ

<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-large">

<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-medium">

<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-small">

<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-mini">

<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-full">

<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-3quarters">

<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-half">

<input type="email" class="%{STYLEGUIDE_PAGE}-form-width-quarter">

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

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

チェックボックス(左にアイコン)

<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>

ラジオボタン(左にアイコン)

<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>