ここでは、フォームの種類について、ご説明致します。

設定項目

設定出来る項目は複数ありますが、中でも利用頻度の高いものをご紹介致します。

共通設定値

各フォームには、共通の設定があります。
まず始めに、共通の設定値について、ご説明致します。

name

テキストフィールドに対する名前です。
必ず設定して下さい。
日本語でも英語でも構いませんが、日本語の方が望ましいです。
また、同じ名前にならないようにしてください。

id

id名を設定出来ます。
特に設定する必要はございません。

初期値

予め値を設定させておくことが出来ます。
必要に応じて、設定して下さい。

placeholder

入力例などを設定することが出来ます。
例えば、「名前を入力して下さい」とかです。必要に応じて、設定して下さい。

エラー表示

入力が間違っていた場合などに表示する文言を表示させないように設定出来ます。

テキストフィールド

文字を入力させたい場合に使用します。
最も使う機会の多いフォームになります。

設定値

テキストフィールドに対して、設定できる項目は以下の通りです。
共通項目については、説明を省かせて頂きます。

size

サイズを指定することが出来ます。
基本的には、最適化されるようになっているので、特に設定する必要はありません。

maxlength

入力できる文字数を設定することが出来ます。
必要に応じて、設定して下さい。

半角英数字に変換

全角英数字を半角英数字に変換することが出来ます。
入力する人によって、様々なので、設定しておいた方がメール等で見やすくなると思います。

例

テキストエリア

複数行の入力が必要なときに使用します。
質問内容やお問い合わせ内容の入力等に使用します。

設定値

テキストエリアに対して、設定できる項目は以下の通りです。
共通項目については、説明を省かせて頂きます。

cols

一行辺りの文字数を設定することが出来ますが、デザイン上、設定しても効きません。

rows

初期状態での表示行数を設定することが出来ます。
必要に応じて設定して下さい。

例

初期設定の場合

rows 10 の場合

チェックボックス

任意の選択、あるいは複数の選択を可能にしたいときなどに使用します。

設定値

チェックボックスに対して、設定できる項目は以下の通りです。
共通項目については、説明を省かせて頂きます。

選択肢

複数入力すれば、その分だけチェックボックスが表示されます。

例

一つのみの場合。

同意する

複数の場合。

好きな食べ物は？(複数選択可)

ラーメン カレーライス 寿司 すきやき

複数の場合(縦)。

通常では、チェックボックスは、横に並んでしまいます。
下のように縦に並べて表示させたい場合は、id に cb_css_br と入力して下さい。

ラーメン カレーライス 寿司 すきやき

ラジオボタン

複数の選択項目の中から一つだけ選ばせたい場合に使用します。

設定値

ラジオボタンに対して、設定できる項目はチェックボックスと同じです。

選択肢

最低でも２つは、入力して下さい。
入力した分だけ、表示されます。

例

男 女

好き どちらでもない 嫌い

セレクトボックス

複数の選択項目の中から一つだけ選ばせたい場合に使用します。
選択肢が多い場合によく使われます。

設定値

セレクトボックスに対して、設定できる項目はチェックボックス、ラジオボタンと同じです。

例

地域を選択して下さい 北海道 東北 関東 中部 近畿 中国 四国 九州 沖縄

電話番号

電話番号(携帯電話、FAX)を入力させたい場合にご利用下さい。

設定値

電話番号の設定値は、以下の通りです。
共通項目については、説明を省かせて頂きます。

半角英数字に変換

初期設定では、自動的に全角英数字を半角英数字に変換致しますが、必要ない場合にはチェックして下さい。

 例

- -

郵便番号

郵便番号を入力させたい場合にご利用下さい。

設定値

郵便番号の設定値は、以下の通りです。
共通項目については、説明を省かせて頂きます。

半角英数字に変換

初期設定では、自動的に全角英数字を半角英数字に変換致しますが、必要ない場合にはチェックして下さい。

 郵便番号から住所を補完させたい場合

郵便番号と住所の入力は、セットとなっている場合がほとんどで、郵便番号を入力した時点で、
住所も入力された状態にすることが出来ます。

住所が一つの場合

住所の入力欄が一つの場合は、以下の設定を行うことで、対応出来ます。

1. 郵便番号の name を 郵便番号 にする。
2. テキストフィールドを設定し、name を 住所 にする。

郵便番号： 〒 -

住所：

住所が二つの場合

住所欄を都道府県と市区町村に分けたい場合は、以下の設定を行うことで、対応出来ます。

1. 郵便番号の name を 〒郵便番号 にする。
2. テキストフィールドを設定し、都道府県を表示させたい方の name を 都道府県 、
   市区町村を表示させたい方の name を 市区町村 にする。

郵便番号： 〒 -

都道府県：

市区町村：

日付

日付を入力させたい場合は、ご利用下さい。
テキストフィールドの組み合わせや、セレクトボックスの組み合わせでも実現できますが、こちらの方がカンタンです。
但し、生年月日の入力には少し向かないかもしれません。

設定値

日付の設定値は、以下の通りです。
共通項目については、説明を省かせて頂きます。

size

サイズを指定することが出来ます。
基本的には、最適化されるようになっているので、特に設定する必要はありません。

JavaScript

以下のオプションが利用できます。

• minDate
  選択可能な最小日付を設定出来ます。
  具体的には、今日から3日前までしか選択出来ないようにする場合は、minDate:-3 と設定して下さい。
  明日からしか選択出来ないようにするには、minDate:1 と設定して下さい。
• maxDate
  選択可能な最大日付を設定出来ます。
  具体的には、今日から5日先までしか選択出来ないようにする場合は、maxDate:5 と設定して下さい。
  昨日からしか選択出来ないようにするには、maxDate:-1 と設定して下さい。
• numberOfMonths
  1度に表示させること出来る月を設定出来ます。
  3ヶ月分表示させたい場合は、numberOfMonths:3 としてください。

例

• デフォルト
  
• 昨日から3日前まで　minDate:-3,maxDate:-1
  
• 明日から5日後まで　minDate:1,maxDate:5
  
• 3ヶ月表示
  

確認・送信ボタン

必ず必要なフォームです。
状態によって、表示を切り替えてくれます。

設定値

確認・送信ボタンの設定値は、以下の通りです。

例

戻る

確認画面から入力画面に戻るためのボタンです。
必須ではありませんが、あった方が良いです。

設定値

戻るの設定値は、以下の通りです。

例

 icon-exclamation-triangle 戻るボタンは、確認画面でないと表示されません。