一つ目の壁、フォーム作成

こんにちは。今回は、私がwebコーディングの学習を始めて一番最初に躓いたフォームの作り方について書いていこうと思います。

まず、皆さんはフォームというものがどんなものであるか知っていますか？言葉で説明すると少しわかりにくいと思ったので、画像を載せておきます。

今回は上記のようなフォームを作るために必要な知識を、順番に説明していきたいと思います。（いくつか追加する内容もあります）

※上の画像にはCSSでの加工を加えてあります。

<form>タグ

<form>タグとは、フォームを作成するために使用されるタグです。フォームを形成する各要素をひとつにまとめる役割を持っており、イメージとしてはフォーム全体を構成するタグと考えて良いと思います。

また、<form>タグにはいくつかの属性があります。属性とは、タグにそれぞれ役割を与えてあげるといった性質があります。

<form action="#" method="post" name="register-form">
<!--ここにフォーム内の部品を書き込みます-->
</form>

上記のコードは、<form>タグにaction 、method、 name属性をつけています。action属性は、データの送信先を指定することができ、method属性は、データを転送する方法を指定できます。また、name属性は、フォームの名前を指定するという役割を持ちます。<form>タグの主な属性はこの3つですので、ひとまずこれらを押さえておいてください。

<input>タグ

<input>タグとは、フォーム内の部品を作るときに使用するタグです。<input>タグも、<form>タグと同じように、属性を付け加えなければなりません。

このような、名前のテキストを入力するフォームを作りたい場合、type属性でtextという属性値を指定してやるとうまく作れます。

氏名：<input type="text">

例ではtextという属性値を使いましたが、ほかにも主要なものがいくつかあります。

email：メールアドレスの入力欄を作るために用いる。

submit：送信ボタンを作るために用いる。 など様々な種類があります。

ちなみに、email という属性値を使うと、最初に載せいてたフォーム画像２行目のような項目を作ることが可能ですが、 submitという属性値は単体で使っても、送信という文字が書かれたボタンを作ることができません。

このような送信ボタンを作る際に必要となるコードは以下のようになります。

<input type="submit" value="送信">

新たにvalue="送信"というコードが出てきました。valueという属性は、ボタンの枠組み（箱の中）に入れておきたい文字を表示させる役割を持つ属性です。つまり、value属性に指定する文字を変更するだけで、いろんな種類のボタンが作れるという訳です。

始めに登場したフォーム画像に使用されている<input>タグは、これまでに説明したもののみとなっておりますが、<input type="radio">（ラジオボタンを作る）や、<input type="checkbox">（複数選択可能なチェックボックスを作る）といった物もあります。発展的なフォームを作る際にはどれも欠かせないので、私自身もしっかり覚えていかないといけないなと思います。

<textarea>タグ

<textarea>タグとは、アンケートフォームなどの最後にある、自由記述欄のような複数行に渡るテキストの入力欄を作るためのタグです。

上のようなメッセージ欄を作るためには、<textarea>タグだけでなくさらに、入力欄の中に予め入れておきたい文字を指定するためのplaceholder属性を知っていなければなりません。このメッセージ欄の例でいくと、青文字で書かれている箇所にplaceholder属性が使われています。

placeholder属性は、特別<textarea>タグにのみ使われるのではなく、これまでに紹介した<input>タグにも使えます。予め入れておきたい文字を指定することで、フォームを入力する側にとってよりわかりやすいフォームを作ることが可能になります。

これで一通り、例のような基本的なフォームを作るための知識を揃えることができました。知識的には特に難しいところはなかったと思いますが、最後に一つだけ注意点があります。

それは、凡ミスに気をつけることです。

お手本に倣って、丁寧に記述しているのになぜかレイアウトが崩れてしまうという状況が、webの勉強を始めるようになると頻繁に起こってきます。実際に私は、コードの中に全角スペースを一つ入れてしまっていたために、相当な無駄足を踏んでしまったことがあります。皆さん、凡ミスにだけは気を付けてお勉強していきましょう...！