入力フォーム、Htmlサンプル集、種類別Tayoriを活用したフォームの作り方

公開：2020/01/28 14:10
更新：2021/10/26 18:32

ビジネススキル

本記事では、TayoriでフォームをHTML形式で設置した場合に、生成される各項目のサンプルコードを紹介します。

独自のCSSを適用したい場合などに参考にしてください。

各項目のマークアップについての共通注意

各項目に入っている<div class=”error-message”></div>はエラーメッセージを表示するための重要なタグです。必ず入れるようにしてください。
各項目に入っているidとname、labelにはユニークなIDが設定されます。変更しないでください。
エラーメッセージの文言は既定のもののみになります。変更はできません。
自作のJavascriptを記載してプルダウンの項目を追加するなどフォームへ変更を加えるとデータの整合性がなくなり、エラーの原因になります。ご注意ください。
フォーム送信時に「ラジオボタン、プルダウンリスト、チェックボックス」は「選択肢」へ「入力された文字列」と送信する際に「選択された文字列」を比較しています。そのため、HTMLの「文字コード」が「UTF-8以外やBOMあり」などの場合には送信に失敗する可能性があるためご注意ください。

参考：Tayoriご利用ガイド：HTML設置の注意事項

お名前

お名前を入力するためのテキストボックスを表示します。

input要素の「name=”form_answers[parts][ハッシュキー][ハッシュキー]」部分はフォーム固有のハッシュキーが入ります。変更してしまうと正常に送信できなくなるため、変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
お名前
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”お名前を入力してください” />
<div class=”error-message”></div>
</div>
</div>

お名前カナ

お名前カナを入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
お名前カナ
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”お名前カナを入力してください” />
<div class=”error-message”></div>
</div>
</div>

名前（姓名別）

姓と名ごとにテキストボックスを表示します。どちらかのテキストボックスを削除してしまうと正常に送信できなくなるため注意してください。

また、input要素の「name=”form_answers[parts][ハッシュキー][ハッシュキー]」部分はフォーム固有のハッシュキーが入ります。変更してしまうと正常に送信できなくなるため、変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
お名前(姓・名)
</div>
<div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”姓を入力してください” />
<div class=”error-message”></div>
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”名を入力してください” />
<div class=”error-message”></div>
</div>
</div>
</div>

名前カナ（姓名別）

名前カナの姓と名ごとにテキストボックスが表示されます。どちらかのテキストボックスを削除してしまうと正常に送信できなくなるため注意してください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
お名前カナ(セイ・メイ)
</div>
<div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”セイを入力してください” />
<div class=”error-message”></div>
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”メイを入力してください” />
<div class=”error-message”></div>
</div>
</div>
</div>

性別

性別をラジオボタンで表示します。value値は変更しないでください。正常に送信できなくなります。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
性別
</div>
<div>
<div>
<input type=”radio” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” value=”男性” /><label for=””>男性</label>
</div>
<div>
<input type=”radio” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” value=”女性” /><label for=””>女性</label>
</div>
<div class=”error-message”></div>
</div>
</div>

担当者名

担当者名を入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
担当者名
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”担当者名を入力してください” />
<div class=”error-message”></div>
</div>
</div>

担当者名カナ

担当者名カナを入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
担当者名カナ
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”担当者名カナを入力してください” />
<div class=”error-message”></div>
</div>
</div>

部署・所属名

部署・所属名を入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
部署・所属名
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”部署・所属名を入力してください” />
<div class=”error-message”></div>
</div>
</div>

郵便番号

郵便番号を入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
郵便番号
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”郵便番号を入力してください（ハイフンなし）” />
<div class=”error-message”></div>
</div>
</div>

都道府県

都道府県をセレクトボックスで表示します。用意されたoptionに追加変更を加えないでください。

また、select要素の「name=”form_answers[parts][ハッシュキー][ハッシュキー]」部分はフォーム固有のハッシュキーが入ります。変更してしまうと正常に送信できなくなるため、変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
都道府県
</div>
<div>
<select id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]”>
<option value=”北海道”>
北海道
</option>
以下青森など各都道府県をoptionで列挙
</select>
<div class=”error-message”></div>
</div>
</div>

住所（分割）

都道府県をセレクトボックスで、市区町村、番地、建物名・部屋番号を入力するためのテキストボックスを3つ表示します。

都道府県に用意されたoptionには追加変更を加えないでください。
また、3つ用意されたテキストボックスはどれも削除しないようにしてください。

select, input要素の「name=”form_answers[parts][ハッシュキー][ハッシュキー]」部分はフォーム固有のハッシュキーが入ります。変更してしまうと正常に送信できなくなるため、変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
住所
</div>
<div>
<div>
<select id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]”>
<option value=”北海道”>
北海道
</option>
以下青森など各都道府県をoptionで列挙
</select>
<div class=”error-message”></div>
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”市区町村を入力してください” />
<div class=”error-message”></div>
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”番地を入力してください” />
<div class=”error-message”></div>
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”建物名・部屋番号を入力してください” />
<div class=”error-message”></div>
</div>
</div>
</div>
<div class=”form-parts” id=””>
<div>
住所
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”住所を入力してください” />
<div class=”error-message”></div>
</div>
</div>

住所（一行）

住所を入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
住所
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”住所を入力してください” />
<div class=”error-message”></div>
</div>
</div>
<div>

会社名

会社名を入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
会社名
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”会社名を入力してください” />
<div class=”error-message”></div>
</div>
</div>

電話番号

電話番号を入力する3つのテキストボックスを表示します。それぞれのテキストボックスに「090」「1111」「2222」というように分割形式で入力します。
また、3つ用意されたテキストボックスはどれも削除しないようにしてください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
電話番号
</div>
<div>
<input type=”tel” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”電話番号を入力してください” /> - <input type=”tel” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”電話番号を入力してください” /> - <input type=”tel” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”電話番号を入力してください” />
<div class=”error-message”></div>
</div>
</div>
<div class=”form-parts” id=””>
<div>
電話番号
</div>
<div>

電話番号（ハイフン有り）

電話番号を入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
電話番号
</div>
<div>
<input type=”tel” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”電話番号を入力してください（ハイフン有り）” />
<div class=”error-message”></div>
</div>
</div>

郵便番号+住所（分割）

都道府県をセレクトボックスで、郵便番号、市区町村、番地、建物名・部屋番号を入力するためのテキストボックスを4つ表示します。
都道府県に用意されたoptionには追加変更を加えないでください。
また、4つ用意されたテキストボックスはどれも削除しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
郵便番号+住所
</div>
<div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”郵便番号を入力してください” />
<div class=”error-message”></div>
</div>
<div>
<select id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]”>
<option value=”北海道”>
北海道
</option>
以下青森など各都道府県をoptionで列挙
</select>
<div class=”error-message”></div>
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”市区町村を入力してください” />
<div class=”error-message”></div>
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”番地を入力してください” />
<div class=”error-message”></div>
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”建物名・部屋番号を入力してください” />
<div class=”error-message”></div>
</div>
</div>
</div>

メールアドレス

メールアドレスを入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
メールアドレス
</div>
<div>
<input type=”email” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”メールアドレスを入力してください” />
<div class=”error-message”></div>
</div>
</div>

一行テキスト

テキストを入力するためのテキストボックスを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
一行テキスト
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”設問の回答を入力してください” />
<div class=”error-message”></div>
</div>
</div>

複数行テキスト

複数行テキストを入力するためのテキストエリアを表示します。

textarea要素の「name=”form_answers[parts][ハッシュキー][ハッシュキー]」部分はフォーム固有のハッシュキーが入ります。変更してしまうと正常に送信できなくなるため、変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
複数行テキスト
</div>
<div>
<textarea id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”設問の回答を入力してください”></textarea>
<div class=”error-message”></div>
</div>
</div>

日付入力

日付を入力するためのテキストボックスを表示します。日付入力は所定の形式（「2018/08/29」など）で入力されていない場合はエラーとして扱いますので注意してください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
日付設定
</div>
<div>
<input type=”text” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” placeholder=”YYYY/MM/DD” />
<div class=”error-message”></div>
</div>
</div>

カウンター

カウンターを表示します。valueの値を変えると正常にカウントできなくなるため変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
カウンター
</div>
<div>
<input type=”hidden” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” value=”1″ /><button type=”button” id=””>-</button>
<div id=”” rel=””>
1
</div>
<button type=”button” id=””>+</button>
<div class=”error-message”></div>
</div>
</div>

ファイルアップロード

ファイルをサーバーにアップするために必要となるファイルアップロードを表示します。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
ファイルアップロード
</div>
<div>
<input type=”file” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” />
<div class=”error-message”></div>
</div>
</div>

複数選択（チェックボックス）

複数選択用のチェックボックスを表示します。valueの値を変えると正しく情報が送信できなくなるため変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
複数選択（チェックボックス）
</div>
<div>
<div>
<input type=”checkbox” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” value=”選択肢1″ /><label for=””>選択肢1</label>
</div>
<div>
<input type=”checkbox” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” value=”選択肢2″ /><label for=””>選択肢2</label>
</div>
<div class=”error-message”></div>
</div>
</div>

単一選択（ラジオボタン）

単一選択用のラジオボタンを表示します。valueの値を変えると正しく情報が送信できなくなるため変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
単一選択（ラジオボタン）
</div>
<div>
<div>
<input type=”radio” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” value=”選択肢1″ /><label for=””>選択肢1</label>
</div>
<div>
<input type=”radio” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” value=”選択肢2″ /><label for=””>選択肢2</label>
</div>
<div class=”error-message”></div>
</div>
</div>

単一選択（プルダウンリスト）

単一選択用のプルダウンリストを表示します。optionのvalueの値を変えると正しく情報が送信できなくなるため変更しないでください。

select要素の「name=”form_answers[parts][ハッシュキー][ハッシュキー]」部分はフォーム固有のハッシュキーが入ります。変更してしまうと正常に送信できなくなるため、変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
単一選択（プルダウンリスト）
</div>
<div>
<select id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]”>
<option value=”選択肢1″>
選択肢1
</option>
<option value=”選択肢2″>
選択肢2
</option>
</select>
<div class=”error-message”></div>
</div>
</div>

利用規約

利用規約を表示します。チェックボックスのvalueの値を変えると正しく情報が送信できなくなるため変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
利用規約
</div>
<div>
<div>

</div>
<div>
<input type=”checkbox” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]” value=”1″ /><label for=””>利用規約に同意する</label>
<div class=”error-message”></div>
</div>
</div>
</div>

単一選択（プルダウンリスト子要素あり）

単一選択用の子要素を持ったプルダウンリストを表示します。プルダウンの子要素は、JavaScriptによって動的に作成されます。
また、optionのvalueの値を変えると正しく情報が送信できなくなるため変更しないでください。

<!– マークアップ例 –>
<div class=”form-parts” id=””>
<div>
単一選択（プルダウンリスト子要素あり）
</div>
<div>
<div>
<select class=”parent-select” id=”” name=”form_answers[parts][ハッシュキー][ハッシュキー]”>
<option value=”選択肢1″>
選択肢1
</option>
<option value=”選択肢2″>
選択肢2
</option>
</select>
<div class=”error-message”></div>
</div>
<div style=”display: none”>
</div>
<div style=”display: none”><select class=”child-select” id=”” name=””></select>
<div class=”error-message”></div>
</div>
</div>
</div>