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

第8回:フォームを複製して完成させよう

   

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

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

フォームのラベルを設定する方法を解説しています。
ここでは、ラベルを<label>タグを使ってマークアップします。



この動画で学べること

・フォームを複製して中身を書き換える方法



フォームを複製して中身を書き換えよう

前回作成した<tr>タグとその中の<td>タグを複製して、labelに表示する文字と<input>タグのid名を書き換えていきます。
ご希望日時の部分は入力のボックスが横に5つ並んでいます。これは<input>タグをコピーして最後に表示する文字だけを変更すれば大丈夫です。
横幅の調整などはCSSで後ほど調整していきますので、今はHTMLをとりあえず記述しておきましょう。
今回は、ご希望日時のところまでをやっていきます。



<table>
<tr>
<td class="form_title">
<label for="form_name">お名前</label>
</td>
<td class="form_contents">
<input type="text" id="form_name">
</td>
</tr>

<tr>
<td class="form_title">
<label for="form_tel">お電話番号</label>
</td>
<td class="form_contents">
<input type="text" id="form_tel">
</td>
</tr>

<tr>
<td class="form_title">
<label for="form_time">ご希望日時</label>
</td>
<td class="form_contents">
<input type="text" class="form_time">年
<input type="text" class="form_time">月
<input type="text" class="form_time">日
<input type="text" class="form_time">時から
<input type="text" class="form_time">時まで
</td>
</tr>
</table>