フォームとは
フォームとは、ユーザーが入力した情報をサーバーに送信するためのページ
<form>は入力・送信フォームを作成します。
<form>～</form>の間に、 <input>・<select>・ <textarea>などのタグにより、 一行テキストボックス・ボタン・チェックボックス・ラジオボタン・セレクトボックス・スクロールテキストボックス等の部品を配置します。
フォームの仕組み
フォームはサーバーとのやり取りが必要となるのでPHPでサーバーとのやり取りを記述しなければなりません。
HTMLではフォームの入力する部分などの外観を作ります。
その入力された値をPHPに渡すことで、PHPでPOST送信（簡単に言うと個人情報を扱うときに使う方法）を行ってサーバーに送信されます。
formタグの使い方
HTMLではフォームを作るためにformタグを使います。<form>～</form>
またformタグの中に下のタグなどを使って作っていきます。
- inputタグ
- labelタグ
- textareaタグ
- selectタグ
formタグ
formタグはフォームを構成する部品を囲って、どのプログラムに値を渡すか、どのようなメソッド（方法）でデータを送信するかを決めることができます。
<form action="×××.php" method="post">
ここにテキストフィールドやチェックボックスなどのhtmlタグを書いていく
</form>
</html>
↑
ブラウザで見てみても、フォームの部品を作っていないので何も起きていないように見えます。
しかしここでは、「action="×××.php"」として、実際に動かすPHPのプログラムのパスを設定しています。
また「method="post"」では、POSTメソッドで送信させるということを設定しています。
※action=""には送信ボタンを押したあとに移動するページのURLを記入します。
ここでは入力内容の確認画面へ移動することを想定した「×××.php」というページの名前をサンプルで入れています。
※method=""にはフォームの入力内容のデータの送信形式を指定します。
GETとPOSTの2種類があり、お問い合わせフォームの場合はPOSTにするのが一般的です。
inputでテキストフィールドをつくる
テキストフィールドは改行なしの文章などを入力するためのフォームです。作成するにはinputタグを使用します。
※inputではtype="〇〇"に書く内容によって表示されるテキストフィールドの種類を指定します。
ここでは通常のテキスト入力欄をつくるためにtype="text"としました。
※その他にも数字専用の入力フィールドにするならtype="number"やメールアドレスの入力フィールドにするならtype="email"などがあります。
name="〇〇"は個々の入力項目を管理するid/class名のようなものです。
半角英数字で自由につけることができますが、一般的にその入力項目に関連する内容を英訳したものが多いです。例えば「名前」ならname="yourname"、「電話番号」ならname="tel"などです。
name属性はその入力項目のデータをjavascriptやphpといったプログラミング言語で操作するときに使用します。
ラベル（label) による関連付け
labelタグを使えば項目とフィールドを連動させることができます。
labelありのテキストフィールドでは「名前」をクリックすると入力欄が選択状態になります。
数字入力のテキストフィールド
inputのtype属性をnumberとすることで半角数字しか入力できないテキストフィールドをつくることができます。
メールアドレス入力のテキストフィールド
inputのtype属性をemailにすることでメールアドレスの入力欄をつくることができます。
「xx@xxxx.xx」という形式に当てはまらない場合エラー文を表示します。
textareaで長い文章の入力
テキストエリアを表示するにはtextareaタグを使用します。
テキストエリアのサイズは、cols属性に文字数、rows属性に行数を記述して指定します。
textareaは</textarea>と、閉じタグを書かなければいけないので注意。
コメント：の文字が下になってしまったのでCSSで調整します
checkboxでチェックボックスを作成
複数の選択肢の中から項目をチェックさせることができるのがチェックボックスで、複数選択できます。
チェックボックスを表示するにはinputのtype属性をtype="checkbox"とします。
ラジオボタンと同じくlabelのforとinputのidを同じにすることで項目とチェックボックスを連動させることができます。
<p>好きな食べ物</p>
<label><input type="checkbox" name="food" value="onigiri">おにぎり</label>
<label><input type="checkbox" name="food" value="curry">カレー</label>
<label><input type="checkbox" name="food" value="pasta">パスタ</label>
好きな食べ物
各項目にスペースを入れて見やすくするためにCSSへ記述 ※クラス名にinputを入れてください。
CSS
.space input {
margin-left:30px;
}
<p>好きな食べ物</p>
<div class="space">
<label><input type="checkbox" name="food" value="onigiri">おにぎり</label>
<label><input type="checkbox" name="food" value="curry">カレー</label>
<label><input type="checkbox" name="food" value="pasta">パスタ</label>
</div>
好きな食べ物
radioでラジオボタンを作成
複数の選択肢から1つ選ばせることができるのがラジオボタンです。
ラジオボタンの特徴として1つの項目を選択するともともとチェックの入っていた項目のチェックが外れます。
<p>あなたの血液型</p>
<div class="space">
<label><input type="radio" name="blood-type" value="a">A型</label>
<label><input type="radio" name="blood-type" value="b">B型</label>
<label><input type="radio" name="blood-type" value="o">O型</label>
<label><input type="radio" name="blood-type" value="ab">AB型</label>
</div>
あなたの血液型
selectでセレクトボックス（セレクトメニュー）を作成
ボタンをクリックするとプルダウンで選択肢が表示されるのがセレクトボックスです。
セレクトボックスでは複数の選択肢から1つだけを選択させることができます。
セレクトボックスをつくるには各選択肢をoptionで囲い、全体をselectで囲みます。
セレクトボックスは選択肢が最低3つ以上ある時に使用しましょう。
<p>群馬県のどこに住んでいますか</p>
<select name="city">
<option value="maebashi">前橋市</option>
<option value="takasaki">高崎市</option>
<option value="isesaki">伊勢崎市</option>
<option value="other">その他</option>
</select>
群馬県のどこに住んでいますか
submitで送信ボタンを表示
最後のフォーム項目である送信ボタン
送信ボタンの表示はとっても簡単でinputのtype属性をtype="submit"とするだけです。
value="ボタンの文字"とすることで送信ボタンに表示される文字を自由に変えることができます。
<input type="submit" value="送信する">
reset リセットボタン・ back 戻るボタン
<input type="submit" value="送信する">
<input type="reset" value="クリア">
<input type="button" value="戻る">
その他
フォームはCSSでデザインをして使いやすくするすることができます。
ここで使用したフォームサンプルは「omo.zip」でダウンロードできます。
formタグを使ってフォームの作成方法を記しましたが、実際に使えるようにするにはPHPなどのプログラミング言語を使う必要があります。
もっと簡単にフォーム作りたい人は「コンタクトフォームサービス」を利用するのもよいかもしれません。
Googleフォームやformrunなどおススメです。