実践コーディングスキル - 第6章 Lesson9

第9回:チェックボックスを作成してみよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

チェックボックスを作成する方法を解説しています。ここでは、チェックボックスとラベルを作成します。



この動画で学べること

・チェックボックスを作成する方法
・textareaで文章を入力するボックスを作る方法


チェックボックスを作成しよう

前回複製したフォームを書き換えてご希望メニューのチェックボックスを作っていきたいと思います。
チェックボックスを作成するためには、<input>タグのtype属性をcheckboxにします。
しかし、このままでは情報を送信したときにどこにチェックが入ったのか分からないので、value属性を加えて値に入力した文字を送信できるようにします。
また前回と同様、labelに表示する文字と<input>タグのid名を変更していきましょう。



<tr>
<td class="form_title">
<label for="form_menu">ご希望メニュー</label>
</td>
<td class="form_contents">
<input type="checkbox" id="menu_cut" value="カット">
<label for="menu_cut">カット</label>
<input type="checkbox" id="menu_color" value="カラー">
<label for="menu_color">カラー</label>
<input type="checkbox" id="menu_perm" value="パーマ">
<label for="menu_perm">パーマ</label>
</td>
</tr>



textareaで文章を入力するボックスを作る方法

最後にお客様ご要望欄を書き換えていきます。
こちらの入力ボックスは1行ではないので、<input>タグではなく<textarea>タグで囲みます。
textareaにするとボックスの大きさを調整でき、ユーザビリティーが向上するので、1行で収まらないような場合はこちらのタグを使うようにしましょう。
また他の部分と同様、labelに表示する文字と<input>タグのid名を変更しておいてください。



<tr>
<td class="form_title">
<label for="form_textarea">お客様ご要望欄</label>
</td>
<td class="form_contents">
<textarea id="form_textarea"></textarea>
</td>
</tr>