今回はHTMLを使ってクリックするとチェックが入るチェックボックスの作成の仕方を紹介します。
チェックボックスは、お問い合わせや設問などで複数の選択肢がある場合で、複数の回答を求める際に適しています。
現場では、ほとんどの案件で利用するのでしっかりと覚えておきましょう。
HTMLでチェックボックスを作成する方法
HTMLでチェックボックスを作成する方法には、以下のHTMLを使用します。
| <input type=”checkbox” name=”送信時の名前” value=”送信される値”> | チェックボックス |
<input type=”checkbox”>タグはチェックボックスを表すタグです。チェックボックスを正常に動作させるにはname属性とvalue属性は必須となります。またname属性の内容は設問毎に必ず統一させます。
以下は、お見積もりお問い合わせフォームにありそうなサービス内容を選択する際を想定したのチェックボックスのサンプルです。
サービスを選択して下さい
HTMLの記述は以下のとおりです。
HTML
<p class="chp">サービスを選択して下さい</p>
<ul class="chli">
<li>
<label><input type="checkbox" name="option" value="corporate">
コーポレートサイト
</label>
</li>
<li>
<label><input type="checkbox" name="option" value="LP">
ランディングページ
</label>
</li>
<li>
<label><input type="checkbox" name="option" value="design">
WEBデザイン
</label>
</li>
<li>
<label><input type="checkbox" name="option" value="WordPress">
ワードプレス
</label>
</li>
<li>
<label><input type="checkbox" name="option" value="Ecommerce">
ECサイト
</label>
</li>
<li>
<label><input type="checkbox" name="option" value="YH">
ワイヤーフレーム
</label>
</li>
</ul>CSS
.chp {
font-weight: bold;
}
.chli {
list-style: none;
}以上が「HTMLでチェックボックスを作成する方法（選択肢の作成）」でした。
