HTMLの第2弾です。
今回の演習はテーブルの作り方からフォームの作り方です。
HTMLの基本演習は今回で終了のようで、この後はCSSへとコースは進んでいくようです。
HTMLが終わるまでに46コース。一つのコースが約5~10分程度なので、ここまでで3時間くらいのコース時間になります。
多くのプログラミング学習の先駆者たちの話では、暗記するのではなく「何をすれば、どのようになるか」を学ぶことが大切とのことです。
46コースでHTMLで、どのようなコードを書けば、何をすることができるのかを学んでいきたいと思います。
これまでの学習
<p> ・・・段落を付けて、見出し以外の文章を作る。
<img> ・・・画像の貼り付けをするとき。
<div> ・・・ブロックでの枠組みを作る。
<span> ・・・途中の文字に要素を加える時に使う(インライン要素)
<a> ・・・リンクを付ける時に使う。
他にも<src>や<href>などの属性を付けることも学習してきました。
今回のHTML第2弾で完成させたページはこれです。
完成テーブル
完成フォーム
今回はテーブルとフォームの作成です。
テーブル
テーブルとは、表のことになります。ワードやエクセルなどのソフトを使うと、簡単にクリックだけで挿入できていた表も、実は裏でこんなプログラムを書いていたと思うと、ソフトを作った人の偉大さを感じさせられますね。
基本のプログラムは次の通りです。これを覚えれば表を作ることができます。
<tr> 1つの行の表を作成するタグ
<th> テーブルヘッド(それぞれの列の名前を付ける場合)のタグ
<td> テーブルデータ(表の中のデータ全てに使える)タグ
この4つのタグが使えれば表を作ることは簡単です。
簡単な表作成の説明の後はすぐに演習となります。学習したことをもとに、ちょっと違う表を今回は作成しました。アウトプットが大切ですよね。
今回のプログラムはこちら。
<h2>テーブルの演習</h2>
<table border=”1″>
<caption>お肉の美味しい動物たち</caption>
<tr>
<th>種類</th>
<th>名前</th>
<th>画像</th>
<th>学名</th>
</tr>
<tr>
<td rowspan=”2″>哺乳類</td>
<td><a href=”https://ja.wikipedia.org/wiki/%E3%83%96%E3%82%BF”>ブタ</a></td>
<td><img src=”http://flat-icon-design.com/f/f_object_95/s512_f_object_95_0bg.png” alt=”ブタの画像” width=”150px” height=”150px”></td>
<td>Sus scrofa domesticus</td>
</tr>
<tr>
<td>
<a href=”https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%84%E3%82%B8″>ヒツジ</a></td>
<td><img src=”http://flat-icon-design.com/f/f_event_97/s512_f_event_97_0bg.png” alt=”ヒツジの画像” width=”150px” height=”150px”></td>
<td>Ovis aries</td>
</tr>
<tr>
<td>鳥類</td>
<td><a href=”https://ja.wikipedia.org/wiki/%E3%83%8B%E3%83%AF%E3%83%88%E3%83%AA”>ニワトリ</a></td>
<td><img src=”http://flat-icon-design.com/f/f_object_161/s512_f_object_161_1bg.png” alt=”ニワトリの画像” width=”150px” height=”150px”></td>
<td>Gallus gallus domesticus </td>
</tr>
</table>
</body>
このプログラムで、次の表が表示されます。一応名前をクリックすると、Wikiに飛ぶようになっています。
フォームの作成
フォームはWebページからデータサーバに送信するためのもので、テキストで打ち込んだり、プルダウンで選択したり、ラジオボタンで選択したりするなど、様々あります。
今後の学習内容にあるRubyなどを使ったサーバーサイドへの送信のために、HTTPリクエストメソッドというものを使用します。

HTTPリクエストメソッド?

HPPTリクエストメソッドのmethod(メソッド)は9種類あります。特に良く使うmethodに「GET」と「POST」があります。

「GET」と「POST」の違いを説明すると、
「GET」はサーバからデータを取得したいときに使用するmethodのこと(Webページ・画像などの取得)で、
「POST」はサーバにデータを送信したいときに使用するmethodのこと
(ログイン・アンケートなどのフォーム)だよ。
難しい内容は後に学習するとして、今回はいろいろな内容を書き込むことができるフォーム作りです。あまり深く考えると進めなくなるので、どんどん進めていきましょう。
フォーム作りに使うタグに<input>タグがあります。
input(インプット:フォーム入力)
フォームで入力できるのは、テキストやプルダウンなど様々あります。その内容を知りたい場合はMDNのinputを検索するとどのようなものかを調べることができます。
今回使用したinputタグは次のものです。
そして、プルダウンの設定に使用したのが2つのタグです。
お問合せ内容には、たくさん書き込むことができるタグを使用しました。
お問い合わせフォームを作成するときに、入力しないで送信してしまう間違いを防ぐためにバリデーション機能を使用します。
バリデーション
入力された内容が正しいかどうかをチェックすること。
<input>タグの中の最後にrequiredを書き込むと、そこのフォームを入力しないと注意が出て先に進めなくなります。
では、今回の学習で学んだことを利用して、お問い合わせフォームを作成するプログラムを書きました。
<h1>アルバイト応募フォーム</h1>
<form action=”#” method=”POST”>
<table border=”1″>
<tr>
<th>ふりがな*</th>
<td><input type=”text” name=”username” required></td>
</tr>
<tr>
<th>生年月日*</th>
<td><input type=”date” name=”date” required></td>
</tr>
<tr>
<th>性別*</th>
<td><input type=”radio” name=”gender” value=”male” checked>男性
<input type=”radio” name=”gender” value=”female”>女性
</td>
</tr>
<tr>
<th>電話番号*</th>
<td>
<input type=”tel” name=”tel” required>
</td>
</tr>
<tr>
<th>メールアドレス*</th>
<td>
<input type=”email” name=”email” required>
</td>
</tr>
<tr>
<th>現在の職業*</th>
<td>
<select name=”job” required>
<option value=”” selected>選択してください</option>
<option value=”student”>学生</option>
<option value=”part”>アルバイト・パートタイム</option>
<option value=”syain”>正社員</option>
<option value=”sonota”>その他</option>
</select>
</td>
</tr>
<tr>
<th>お問合せ内容</th>
<td>
<textarea name=”content”></textarea>
</td>
</tr>
</table>
<input type=”submit” value=”送信”>
<p>*の項目は入力必須となります。</p>
</form>
</body>
こんな感じのプログラムで、簡単なお問い合わせフォームを作成できました。
まだまだ形だけのお問い合わせフォームですが、入力できる、チェックできるものを自分が作ったということに達成感があります。
まとめ
今回でこのコースのHTMLは終了です。
基本的にはHTMLでできるようになったことは次のことです。
「画像を挿入できる」
「リンクが貼れる」
「表を挿入できる」
「フォームが作成できる」
後の見た目はCSSで学んでいくようですので、骨組みができるようになってきたということだと理解しています。
さらに学びを進めて、見栄えのするページが作れるようにがんばりましょう。