テーブル、投稿フォームの作成

極力毎日更新しようと思ってたが二日目にしてミッション失敗するという三日坊主にすら笑われてしまうこのていたらく。
別に学習や更新が面倒というわけではないんだけどなぁ・・・という言い訳を一応言ってみる(´・ω・`)

さて、というわけで今回ですが、テーブルと投稿フォームの作成について書いてみようかと思います。

正直、HTMLでこんな事までできるんだなーとびっくりしました。テーブルについてはボーダーうまく調整してやったりするのかなとか思ってましたし・・・

と、ここでいうテーブルっていうのは表の事ですね。このテーブルを作成するには、table,tr,th,tdの四つのタグを使います。tableタブでテーブルを構成し、trタグで行を、thタグで見出しセル、tdタグでデータセルを構成して作成します。形としては、tableの中にtr、その中にthとtdになりますね。
trの行を構成するってイマイチピンときにくいですが、まぁこのタグの中身が一行の内容となる感じです。thタグの見出しセルというのは、そのまんま見出しを記載したセル。tdタグのデータセルはその見出しについての内容を記載したセルになっている、と。

試しに、２行だけですがテーブルをHTML編集で入れてみました。

１行目見出し	１行目データ
２行目見出し	２行目データ

というわけで、これがテーブルです。ソースでみると、

<table>
<tbody>
<tr>
<th>１行目見出し</th>
<td>１行目データ</td>
</tr>
<tr>
<th>２行目見出し</th>
<td>２行目データ</td>
</tr>
</tbody>
</table>

こうなります。・・・このtbodyってなんなんでしょうね、勝手に追加されましたが・・・あとで調べておきましょう。
ともあれ、表をページに入れるにはこのtableなどのタグをうまく使う必要がありますね。これもしっかり覚えておきたいです。

そして、次に投稿フォームの作成。これは、よくあるお問い合わせページのような名前やコメントなどの情報を設定した場所に送るアレですね。ホームページ作成して運営するならこの手のものは必須でしょうし、こっちも重要そう。

投稿フォームの作成に主に使うタグは、投稿フォームであるという意味付けを行うform、ユーザーが情報を入力できる場所や送信するボタン等を作成するinput、コメント等複数行の情報を入力できる場所を作成するtextarea、これらの入力欄が何の入力欄なのか明確にさせるラベルの意味付けをするlabelの４つ。これらを使って、投稿フォームを作成します。
また、inputやtextareaタグを使う時には、name属性でコントロール名を指定する必要があります。このコントロール名は、要は送られた情報を仕分ける為の名前のようなものですね。二つの別々の情報が送られた時、片方は名前で片方はメアドだ、と判別するためのような感じです。

例えば、名前とコメントを入力して送信してもらう場所を作る場合、

<form>
<p><input type="text" name="name"></p>
<p><textarea name="comment"></p>
<p><input type="submit"></p>
</form>

といったようになります。ここでinputにあるtype属性は、テキストの入力欄を作成するのか送信する為のボタンを作成するのか等の判別のためのものですね。textareaにtype属性がないのは、元々テキストを複数行入力する為のタグですので、type属性での指定は必要ないから・・・と、思われます。・・・ここ本には書いてないので推測ですが。

ここでは省略しちゃってますが、もちろんこのテーブルと投稿フォームも、見やすいようにスタイルシートで調整しないといけないんですよね・・・テーブルとか、初期のままだと見づらすぎて仕方ないですし。

タグの使い方に加えて、それを良く見せるための方法も学んでおかないといけないのが大変な所ですねー・・・とはいえ、それが楽しくもあるわけなんですが。