フォームのCSS情報を知りたい-2 フォームのCSS情報-❶ 入力画面(2/2)
回答
各質問項目のコード例
「入力画面」の作成時に使用する、各質問項目のHTMLコード例を紹介します。
定型質問
| # | コンポーネント名 | HTMLコード例 |
| 1 | 質問項目（姓） | <dl id="bdash_form_f_8" class="page-item page-item-layout-h ">
<dt class="page-item-label">
質問タイトル
</dt>
<dd class="page-item-info">
<input type="text" name="bdash_form_data[f_8]" id="bdash_form_data_f_8" value="" placeholder="" maxlength="255" class="form-control">
<div class="page-item-message"></div>
<div class="page-item-description">
</div>
</dd>
</dl>
|
| 2 | 質問項目（名） | |
| 3 | 質問項目（氏名） | |
| 4 | 質問項目（電話番号） | |
| 5 | 質問項目（メールアドレス） | |
| 6 | 質問項目（URL） | |
| 7 | 質問項目（カレンダー） | <dl id=""bdash_form_f_8"" class=""page-item page-item-layout-v "">
<dt class=""page-item-label"">
カレンダー
<span class=""page-item-required"">
<span>
</dt>
<dd class=""page-item-info"">
<input placeholder type=""date"" name=""bdash_form_data[f_8]"" id=""bdash_form_data_f_8"" value=""2022-12-18"" min class=""form-control"">
<div class=""page-item-message""></div>
<div class=""page-item-description"">
</div>
</dd>
</dl>
|
| 8 | 質問項目（都道府県） | <dl id=""bdash_form_f_8"" class=""page-item page-item-layout-v "">
<dt class=""page-item-label"">
都道府県
<span class=""page-item-required"">
*
<span>
</dt>
<dd class=""page-item-info"">
<select name=""bdash_form_data[f_8]"" id=""bdash_form_data_f_8"" class=""form-control custom-select"">
<option selected = ""selected"" disabled=""disabled"" value>選択して下さい</option>
<option value =""北海道'</option>
<option value =""青森県'</option>
<option value =""岩手県'</option>・・・・・
</select>
<div class=""page-item-message""></div>
<div class=""page-item-description"">
</div>
</dd>
</dl>
|
| 9 | 質問項目（郵便番号） | <dl id=""bdash_form_f_8"" class=""page-item page-item-layout-v "">
<dt class=""page-item-label"">
”郵便番号”
<span class=""page-item-required"">
*
<span>
</dt>
<dd class=""page-item-info"">
<input type=""text"" name=""bdash_form_data[f_8]"" id=""bdash_form_data_f_8"" size='3' maxlength=""3"" class=""form-control"">
<span class=""mx-2"">-<span>
<input type=""text"" name=""bdash_form_data[f_8]"" id=""bdash_form_data_f_8"" size='4' maxlength=""4"" class=""form-control"">
</select>
<div class=""page-item-message""></div>
<div class=""page-item-description"">
</div>
</dd>
</dl>
|
| 10 | 質問項目（同意書） | <dl id=""bdash_form_f_8"" class=""page-item page-item-layout-v form -item-agreement "">
<dt class=""page-item-label"">
”同意書”
<span class=""page-item-required"">
*
<span>
</dt>
<dd class='detail-info'> <dd>
<dd class=""page-item-info"">
<div class=""agreement-text-title"">以下の事項に同意の上、お問合せください。 </div>
<div class='agreement-text'>
<p>同意文を入力しましょう。</p>
<p>※フォーム内容に合わせて、個人情報取り扱い方針や、サービス利用規約などへの同意を求める内容を掲載しましょう。</p>
</div>
<label>
<input type=""checkbox"" name=""bdash_form_data[f_8]"" id=""bdash_form_data_f_8"" value=""true"" class=""agree_checkbox mar-1"">
<label for=""bdash_form_data_f_8"""">同意する</label>
</label>
<div class=""page-item-message""></div>
<div class=""page-item-description"">
</div>
</dd>
</dl>
|
カスタム質問
| # | コンポーネント名 | HTMLコード例 |
| 1 | 一行テキスト | <dl id="bdash_form_f_8" class="page-item page-item-layout-h ">
<dt class="page-item-label">
質問タイトル
</dt>
<dd class="page-item-info">
<input type="text" name="bdash_form_data[f_8]" id="bdash_form_data_f_8" value="" placeholder="" maxlength="255" class="form-control">
<div class="page-item-message"></div>
<div class="page-item-description">
</div>
</dd>
</dl>
|
| 2 | 複数行テキスト | |
| 3 | カスタムプルダウン | <dl id="bdash_form_f_223" class="page-item page-item-layout-v ">
<dt class="page-item-label">
質問タイトル
</dt>
<dd class="page-item-info">
<select name="bdash_form_data[f_223][]" id="bdash_form_data_f_223_" class="form-control custom-select">
<option id="bdash_form_f_223_0" value="選択肢0">選択肢0</option>
<option id="bdash_form_f_223_1" value="選択肢1">選択肢1</option>
<option id="bdash_form_f_223_2" value="選択肢2">選択肢2</option>
<option id="bdash_form_f_223_3" value="選択肢3">選択肢3</option>
</select>
<div class="page-item-message"></div>
<div class="page-item-description">
</div>
</dd>
</dl>
|
| 4 | カスタムチェックボックス | <dl id="bdash_form_f_226" class="page-item page-item-layout-v form-item-checkbox ">
<dt class="page-item-label">
質問タイトル
<span class="page-item-required">*</span>
</dt>
<dd class="page-item-info">
<label>
<input type="checkbox" name="bdash_form_data[f_226][]" id="bdash_form_data_f_226_" value="選択肢1">選択肢1
</label>
|
| 5 | カスタムラジオボタン | <dl id="bdash_form_f_7" class="page-item page-item-layout-h form-item-radio ">
<dt class="page-item-label">
質問タイトル
<span class="page-item-required">*</span>
</dt>
<dd class="page-item-info">
<label>
<input type="radio" name="bdash_form_data[f_7][]" id="bdash_form_f_7_0" value="選択肢1">選択肢1
</label>
<label>
<input type="radio" name="bdash_form_data[f_7][]" id="bdash_form_f_7_1" value="選択肢2">選択肢2
</label>
<div class="page-item-message"></div>
<div class="page-item-description">
</div>
</dd>
</dl>
|
| 6 | カスタムテキスト画像 | 任意のHTML（画面からエディタで設定した画像やテキストの要素が入ります） |
| 7 | マトリクスラジオボタン | <dl id=""bdash_form_f_3366"""" class=""""page-item page-item-layout-v form-item-matrix"">
<dt class=""""page-item-label"""">
マトリクス＿ラジオボタン
<span class=""""page-item-required"""">*</span>
</dt>
<dd class=""""page-item-info"""">
<table class=""form-item-matrix-table"">
<thead>
<tr>
<th></th>
<th>入力値1</th>
<th>入力値2</th>
</tr>
</thead>
<tbody>
<tr>
<th>入力値1</th>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値1]"""" id=""""bdash_form_data_f_3366____1"""" value>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値1]"""" id=""""bdash_form_data_f_3366____1____1"""" value=入力値1>
</td>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値1]"""" id=""""bdash_form_data_f_3366____1____2"""" value=入力値2>
</td>
<tr>
<tr>
<th>入力値2</th>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値2]"""" id=""""bdash_form_data_f_3366____2"""" value>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値2]"""" id=""""bdash_form_data_f_3366____2____1"""" value=入力値1>
</td>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値2]"""" id=""""bdash_form_data_f_3366____2____2"""" value=入力値2>
</td>
<tr>
<tr>
<th>入力値3</th>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値3]"""" id=""""bdash_form_data_f_3366____3"""" value>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値3]"""" id=""""bdash_form_data_f_3366____3____1"""" value=入力値1>
</td>
<td>
<input type=""""radio"""" name=""""bdash_form_data[f_3366][入力値3]"""" id=""""bdash_form_data_f_3366____3____2"""" value=入力値2>
</td>
<tr>
</tbody>
</table>
<div class=""""page-item-message""""></div>
<div class=""""page-item-description"""">
</div>
</dd>
</dl>
|
| 8 | マトリクスチェックボックス | <dl id=""bdash_form_f_3366"""" class=""""page-item page-item-layout-v form-item-matrix"">
<dt class=""""page-item-label"""">
マトリクス＿チェックボタン
<span class=""""page-item-required"""">*</span>
</dt>
<dd class=""""page-item-info"""">
<table class=""form-item-matrix-table"">
<thead>
<tr>
<th></th>
<th>入力値1</th>
<th>入力値2</th>
</tr>
</thead>
<tbody>
<tr>
<th>入力値1</th>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値1][入力値1]"""" id=""""bdash_form_data_f_3366____1____1"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値1][入力値1]"""" id=""""bdash_form_data_f_3366____1____1"""" value=入力値1>
</td>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値1][入力値2]"""" id=""""bdash_form_data_f_3366____1____2"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値1][入力値2]"""" id=""""bdash_form_data_f_3366____1____2"""" value=入力値2>
</td>
</tr>
<tr>
<th>入力値2</th>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値2][入力値1]"""" id=""""bdash_form_data_f_3366____2____1"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値2][入力値1]"""" id=""""bdash_form_data_f_3366____2____1"""" value=入力値1>
</td>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値2][入力値2]"""" id=""""bdash_form_data_f_3366____2____2"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値2][入力値2]"""" id=""""bdash_form_data_f_3366____2____2"""" value=入力値2>
</td>
</tr>
<tr>
<th>入力値1</th>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値3][入力値1]"""" id=""""bdash_form_data_f_3366____3____1"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値3][入力値1]"""" id=""""bdash_form_data_f_3366____3____1"""" value=入力値1>
</td>
<td>
<input type=""""hidden"""" name=""""bdash_form_data[f_3366][入力値3][入力値2]"""" id=""""bdash_form_data_f_3366____3____2"""" value>
<input type=""""checkbox"""" name=""""bdash_form_data[f_3366][入力値3][入力値2]"""" id=""""bdash_form_data_f_3366____3____2"""" value=入力値2>
</td>
</tr>
</tbody>
</table>
<div class=""""page-item-message""""></div>
<div class=""""page-item-description"""">
</div>
</dd>
</dl>
|
| 9 | スコア | <dl id=""bdash_form_f_3366"""" class=""""page-item page-item-layout-v form-item-score"">
<dt class=""""page-item-label"""">
スコア
<span class=""""page-item-required"""">*</span>
</dt>
<dd class=""""page-item-info"""">
<div class=""""form-item-score-label"""">
<div class=""""form-item-score-label-low"""">
<label for=""_______"">非常に悪かった</label>
</div>
<div class=""""form-item-score-label-high"""">
<label for=""_______"">非常に良かった</label>
</div>
</div>
<div class=""""form-item-score-val"""">
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_1"""" value=1>
""1""
</label>
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_2"""" value=2>
""2""
</label>
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_3"""" value=3>
""3""
</label>
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_4"""" value=4>
""4""
</label>
<label class>
<input type=""""radio"""" name=""""bdash_form_data[f_3366]"""" id=""""bdash_form_data_f_3366_5"""" value=5>
""5""
</label>
</div>
<div class=""""page-item-message""""></div>
<div class=""""page-item-description""""> スコアを選択して下さい
</div>
</dd>
</dl>
|
必須項目の設定について
質問項目に対し、必須項目として設定した場合は、「質問タイトル」要素に以下のタグが挿入されます。
<div data-type-content="wpdt-html-content">
<span class="page-item-required">*</span>
</div>その他の部分のCSS情報
| # | 機能名/ コンポーネント名 |
HTMLコード例 |
| 1 | ヘッダー | <header>～</header>
|
| 2 | フッター | < footer>～</footer >
|
| 3 | 送信ボタン | <div class="bdash_form_button_input">
<input type="submit" name="commit" value="送信" class="bdash_form_commit_button" data-disable-with="送信">
</div>
|