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

第7回:テーブルタグを使ってフォームを作成しよう

   

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

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

テープルタグを使ってフォームを作成する方法を解説しています。
ここでは、まず基盤となるテーブルと簡単な入力フォームの作成を行います。



この動画で学べること

・お問い合せのフォームをテーブルで作る方法



お問い合せのフォームを<table>タグで作ろう

今回は<table>タグでお問い合せのフォームを作っていきましょう。
まず、テーブルを作成するのに必ず必要な<table>タグを書き、その中に<tr>タグで行を作ります。
さらにその中に、セルとなる<td>タグを2つ書いてそれぞれにclass名を追加してください。
1つめの<td>タグは入力するものの種類、2つめの<td>タグは情報を入力できるようにしたいので<input>タグをいれます。
また、laberlの設定して文字をクリックすると入力するボックスがハイライトされるようにしたいと思います。



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



では保存してブラウザで見てみましょう。
1つ目の入力フォームが完成し、文字のクリックでフォームがハイライトされるようになりました。
このようにすることで、ユーザビリティーが向上してユーザーに親切なWebサイトを作ることができます。