フォーム
- expand_more基本
- expand_moreサイズ指定
- expand_moreステータス
- expand_moreレイアウト
- expand_more使用頻度が低いアイテム
- expand_more参考
基本
テキスト入力欄
項目名のグループ要素に.el_form_label__required追記で必須項目ラベル、.el_form_label__optional追記で任意ラベルが付きます。
-
「.el_form_tips」でヒントのスタイル（例：半角英数字のみ入力可）
-
項目に関する説明文を入れたい場合は.el_form_infoを利用
セレクトボックス
ラジオボタン・チェックボックス
グループ化されたdivに.bl_form_group__columnを追加すると縦並びにレイアウトが変化します。
サイズ指定
横
1行テキストやセレクトボックス他 入力系フォームで利用
縦
テキストエリアやマルチセレクトなど複数行のフォームで利用
ステータス
テキスト入力欄
レイアウト
レイアウト応用
.bl_col + .bl_col__00を利用するかdiv.bl_form_groupInTxtでグループ化すると綺麗に分割できます。
-
姓
名
-
― ―
-
〒 ―
テーブル風レイアウト（PC時のみ）
項目左・入力内容右のテーブル風レイアウトにしたい場合は.bl_formに.bl_form__tableを追記してください。
-
項目に関する説明文を入れたい場合は.el_form_infoを利用
-
入力欄とボタンの高さ調整
カラムで割った入力欄と高さを揃えたい場合に利用。高さが足りないグループ要素（ddなど）に.bl_form_groupTxtHeightを追記してください。
ただし、PC時のみ有効。
使用頻度が低いアイテム
その他アイテム
参考
input要素の型一覧
input要素の型をまとめています。
| 型 | 説明 |
|---|---|
| hidden | 画面上は表示されない隠しデータを指定する |
| text | 一行テキストボックスを作成する（初期値） |
| checkbox | チェックボックスを作成する |
| radio | ラジオボタンを作成する |
| button | 汎用ボタンを作成する |
| submit | 送信ボタンを作成する |
| reset | リセットボタンを作成する |
| メールアドレスの入力欄を作成する（HTML5～） | |
| tel | 電話番号の入力欄を作成する（HTML5～） |
| password | パスワード入力欄を作成する |
| date | 日付の入力欄を作成する |
| datetime | UTC（協定世界時）による日時の入力欄を作成する（HTML5～） |
| datetime-local | UTC（協定世界時）によらないローカル日時の入力欄を作成する（HTML5～） |
| month | 月の入力欄を作成する |
| week | 週の入力欄を作成する（HTML5～） |
| time | 時間の入力欄を作成する（HTML5～） |
| number | 数値の入力欄を作成する（HTML5～） |
| url | URLの入力欄を作成する（HTML5～） |
| file | サーバーへファイルを送信する |
| image | 画像ボタンを作成する |
| range | レンジの入力欄を作成する（HTML5～） |
| search | 検索テキストの入力欄を作成する（HTML5～） |
| color | 色の入力欄を作成する（HTML5～） |
autocomplete属性一覧
input要素、textarea要素、select要素の autocomplete 属性に指定できる値をまとめています。
| 値の名前 | 補完する内容 |
|---|---|
| off | autocompleteを許可しない |
| on | autocompleteを許可する |
| name | 氏名 |
| given-name | ファーストネーム |
| additional-name | ミドルネーム |
| family-name | ラストネーム |
| メールアドレス | |
| username | ユーザー名またはアカウント名 |
| new-password | 新しいパスワード |
| current-password | 現在のパスワード |
| postal-code | 郵便番号 |
| address-level1 | 都道府県 |
| address-level2 | 市区町村 |
| address-level3 | 町域 |
| address-level4 | 番地など |
| organization | 企業・団体・組織名 |
| bday | 生年月日 |
| bday-year | 生年月日の年 |
| bday-mounth | 生年月日の月 |
| bday-day | 生年月日の日 |
| tel | 電話番号 |
| tel-area-code | 市外局番 |
| tel-local | 市外局番を除いた電話番号 |
| cc-name | クレジットカード登録名 |
| cc-given-name | 登録名のファーストネーム |
| cc-additional-name | 登録名のミドルネーム |
| cc-family-name | 登録名のラストネーム |
| cc-number | カード番号 |
| cc-exp | カードの有効期限 |
| cc-exp-month | カードの有効期限の月 |
| cc-exp-year | カードの有効期限の年 |
| cc-csc | カードのセキュリティコード |