Udemydeでプログラミングに挑戦②　HTMLがどこまでできるか【初心者】

HTMLの第２弾です。

今回の演習はテーブルの作り方からフォームの作り方です。

HTMLの基本演習は今回で終了のようで、この後はCSSへとコースは進んでいくようです。

HTMLが終わるまでに４６コース。一つのコースが約５～１０分程度なので、ここまでで３時間くらいのコース時間になります。

多くのプログラミング学習の先駆者たちの話では、暗記するのではなく「何をすれば、どのようになるか」を学ぶことが大切とのことです。

４６コースでHTMLで、どのようなコードを書けば、何をすることができるのかを学んでいきたいと思います。

これまでの学習

<h1>～<h6> ・・・見出しを作る。
<p>　　　　・・・段落を付けて、見出し以外の文章を作る。
<img>　　　・・・画像の貼り付けをするとき。
<div>　　　・・・ブロックでの枠組みを作る。
<span>　　　・・・途中の文字に要素を加える時に使う（インライン要素）
<a>　　　　　・・・リンクを付ける時に使う。

他にも<src>や<href＞などの属性を付けることも学習してきました。

今回のHTML第２弾で完成させたページはこれです。

完成テーブル

完成フォーム

今回はテーブルとフォームの作成です。

完成テーブル
完成フォーム

テーブル
フォームの作成
まとめ

テーブル

テーブルとは、表のことになります。ワードやエクセルなどのソフトを使うと、簡単にクリックだけで挿入できていた表も、実は裏でこんなプログラムを書いていたと思うと、ソフトを作った人の偉大さを感じさせられますね。

基本のプログラムは次の通りです。これを覚えれば表を作ることができます。

<table> テーブルを作るという宣言のタグ
<tr>　　１つの行の表を作成するタグ
<th>　　テーブルヘッド（それぞれの列の名前を付ける場合）のタグ
<td>　　テーブルデータ（表の中のデータ全てに使える）タグ

この４つのタグが使えれば表を作ることは簡単です。

簡単な表作成の説明の後はすぐに演習となります。学習したことをもとに、ちょっと違う表を今回は作成しました。アウトプットが大切ですよね。

今回のプログラムはこちら。

<body>
<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（メソッド）は９種類あります。特に良く使うmethodに「GET」と「POST」があります。

プチ犬

「GET」と「POST」の違いを説明すると、

「GET」はサーバからデータを取得したいときに使用するmethodのこと（Webページ・画像などの取得）で、

「POST」はサーバにデータを送信したいときに使用するmethodのこと

（ログイン・アンケートなどのフォーム）だよ。

難しい内容は後に学習するとして、今回はいろいろな内容を書き込むことができるフォーム作りです。あまり深く考えると進めなくなるので、どんどん進めていきましょう。

フォーム作りに使うタグに<input>タグがあります。

input（インプット：フォーム入力）

フォームで入力できるのは、テキストやプルダウンなど様々あります。その内容を知りたい場合はMDNのinputを検索するとどのようなものかを調べることができます。

MDNでinuputを調べてみよう。

今回使用したinputタグは次のものです。

そして、プルダウンの設定に使用したのが２つのタグです。

お問合せ内容には、たくさん書き込むことができるタグを使用しました。

お問い合わせフォームを作成するときに、入力しないで送信してしまう間違いを防ぐためにバリデーション機能を使用します。

バリデーション

入力された内容が正しいかどうかをチェックすること。

<input>タグの中の最後にrequiredを書き込むと、そこのフォームを入力しないと注意が出て先に進めなくなります。

では、今回の学習で学んだことを利用して、お問い合わせフォームを作成するプログラムを書きました。

<body>
<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>

こんな感じのプログラムで、簡単なお問い合わせフォームを作成できました。

お問い合わせフォームのページ

まだまだ形だけのお問い合わせフォームですが、入力できる、チェックできるものを自分が作ったということに達成感があります。