今回は、HTMLでフォームの外観を作成する方法について解説します。
formとは
フォームとは、ユーザーが入力した情報をサーバーに送信するためのページになります。サーバーとのやり取りが必要になるので、Webサイトを作る中でもこのフォームを扱うページはPHPなどの言語で書かれることが多くなります。HTMLではフォームの入力する部分などの外観を作ります。
その入力された値をPHPで渡すことで、PHPでPOST通信（個人情報を扱うときに使う方法）を行ってサーバーに送信されます。
actionで送信先を指定する
フォームデータの送信先はaction属性で指定します。具体的にはform action="送信先のURL"という形になります。何も指定されていない場合は、現在のページのURLが送信先になります。
<form action="/example.php">
</form>
methodで送信方法を指定する
formのmethod属性では、データをどのように送るか指定します。ここで使用できるメソッドはGETとPOSTの２種類があります。お問い合わせフォームの場合はPOSTにするのが一般的です。
<form action="/example.php" method="post">
</form>
formに書くこれら２つの属性についてはhtmlを学習中の段階では深く理解してなくても問題ありません。PHPを使用してフォームのデータ処理をするときに理解できれば大丈夫です。
フォーム部品一覧
次にフォームの各項目について学んでいきましょう。
の中にはテキストの入力欄やチェックボックス、ファイルのアップロードなどさまざまな部品を入れます。ここでは特に覚えておきたいフォーム部品を中心に紹介していきます。inputタグ
まずはテキストフィールドの作り方です。テキストフィールドは改行なしの文章を入力するためのフォームです。作成にはinputタグを使用します。
<input type="text" id="name" name="name">
inputタグではに書く内容によって表示されるテキストフィールドの種類を指定します。今回は名前の入力欄を作るためにtype="text"としました。
その他にも数字専用の入力フィールドにするなら、メールアドレスにするならなどがあります。
labelタグ
labelタグは、inputなどの入力欄にラベル（項目名や説明）をつけるために使用します。
<label for="email">E-mail</label>
<input type="mail" id="email" name="email">
「何を入力する欄なのか」がわかるようにするために使うということです。
ここで決めているid属性(input id="○○")がlabelのfor属性(label for="○○")と紐づいています。こうすることで項目とフォームを連動させることができます。
「name="○○"」は、それぞれのフォームで入力された値を管理するidやclass名のようなものです。name属性はその入力項目のデータをPHPで操作するときに使用します。これにより、一度に複数の値が送信された場合でも、どれがどの値かを認識することができます。
textareaタグ
タグは複数行の入力欄を設置するために使います。textareaはテキストを入れ子にする必要はありませんが、閉じタグを書かなければいけないので注意しましょう。
<label for="message">MESSAGE</label>
<textarea id="message" name="message"></textarea>
テキストエリアの入力フィールドは、ボックスの右下をドラッグすることでサイズを自由に変更することができます。もしサイズの変更ができない場合は、CSSでresize :both;と指定します。
まとめ
今回はHTMLでフォームの外観を作る方法について解説してきました。ここで解説したのはほんの一部で、他にもoptionタグやbottomタグなどがあります。
自分の作りたいフォームに合わせて、調べながらコーディングしていきましょう。