メール問い合わせなどを行うためのフォーム設置って難しいですか？
HTML言語以外にもPHP言語の知識が必要となりますが、仕組みさえ理解すれば簡単です。
HTMLを学習されている方の中にはFormに抵抗を持っている方も多いのではないでしょうか？
データ送信といった動作が必要になるためにどうしてもその他の言語(簡単なところで言うとPHP言語)の知識が必要となることから苦手とされる方が多いのだと思いますが、HTML Formは外見だけならHTMLのみで作ることが可能です。
PHP言語を必要とする部分は別の記事で書くことにして、今回はこのフォームの仕組みや外観を構成するタグの使い方について解説していきたいと思います。
HTML Formとは
HTML Formというとまず一番最初に想像するのはメールフォームでしょう。
このメールフォームは、世にあるほぼ全てのWebサイトで目にすることが出来ます。
HTML Formはメール以外でも応募フォームといったものまで幅広く利用されています。
エンドユーザーも各種フォームが設置されていないサイトは非常に使い難いと思うため、もしWebサイトを手掛けるならば、必ず設置した方が良いでしょう。
HTML Formの仕組み
HTML Formの動作には必ずサーバーとクライアントの間で通信が必要となります。
表面上は、送信ボタンを押した瞬間に送信完了が表示されて終わりですが、内部では以下の順で処理が行われています。
- (1) フォームの送信ボタンを押すと同時にPHPスクリプトにフォーム内容が渡ります。
- (2) フォーム内容が渡った先のファイル(※)に記述されているスクリプトが実行されます。
※ 作り方によってはフォーム設置ファイルと同一のファイルとなります。 - (3) スクリプトによって成形された情報がサーバーに投げられます。
HTMLとPHP
上記が一連の流れとなりますが、このスクリプトは全てPHP言語で記述する必要があるため、どうしてもHTML言語の知識しかない方は難しく感じてしまいます。
「プログラムには興味がないから…」と思っている方もいるかもしれませんが、HTMLもPHPも同じプログラミング言語です。
仕様を正しく理解すればPHPもさほど難しい言語ではありません。
また、今やリッチサイトを代表する動的HTMLは当たり前の時代となっています。
HTMLコーディングをする上でPHP言語はもはや避けては通れない道となりつつあるため、まずこの二つの言語についての簡単な解説をします。
HTML
HTMLもプログラミング言語のひとつです。
ブラウザで表示させる内容を、タグを使い組み立てる作業自体がもはやプログラミングだといえます。
もし一般的に認識されている他言語プログラミングが機能を司るなら、HTMLは外観を司ります。
洋服に置き換えると、どんなに機能性が豊かでも外見がとても残念な洋服は切るに値しませんよね？
HTMLはこの外見を成形する非常に重要な部分だといえます。
PHP
広義ではありませんが、この記事でのPHP言語の役割はフォームに係る機能を構築するための言語です。
フォームを設置したからと言って、フォームだけでは動作しません。
正しいPHPスクリプトで記述されたファイルがあって初めてフォームが動作します。
PHPを言い換えるなら、HTMLとは対照的に洋服の機能を決めるための部分だと認識してください。
フォームの使い方
ここではPHP言語を必要とする部分以外のHTML Formの作り方について解説します。
<form>タグ
早速ですが、まずは<form>タグについてです。
このタグはフォームを構成する上で必ず必要となるタグです。
フォームを開始する位置に<form>、終了させる位置に</form>を記述することでフォームを設置することが出来ます。
<body> <form action="/form.php" method="post"> フォームの部品が入る </form> </body>
<form>タグには”action” , “method”の二つを記述しなければなりません。
action＝フォーム情報送信先のファイルパス。
method＝フォーム情報の送信方法(post/get)。
<label>タグ
<label>タグはフォーム部品に対してラベル(名前)を付けることが出来るタグです。
<body> <form action="" method="post"> <div> <label for="name">名前</label> </div> <div> <label for="mail">Eメール</label> </div> <div> <label for="message">本文</label> </div> </form> </body>
<label>タグの中に「for=”name”」といった感じで”for”句がついていることに気付いたでしょうか？
詳しくは後述しますが、これはフォーム情報を紐付けるためにとても重要となります。
<label>タグは別のタグ(<p>タグや<span>タグなど)でも代用は可能なものですが、正式に準備されているタグはこの<label>タグとなるため、できる限りこちらを使用するようにしてください。
for＝<input> , <textarea> , <select>などのタグ内に記述された”id=”と同一の名前にすることで紐付け出来る。
<input>タグ
フォーム部品の中でも最も使用頻度が高いタグがこの<input>タグです。
「ラジオボタン」や「チェックボックス」、「パスワード」「ファイル送信」といった入力系フィールド(プルダウン式のセレクトや複数行のテキスト以外)でのを設置する場合に使用します。
<body> <form action="" method="post"> <div> <label for="name">名前</label> <input type="text" id="name" name="name"> </div> <div> <label for="mail">Eメール</label> <input type="email" id="mail" name="mail"> </div> <div> <label for="message">本文</label> </div> <input type="submit" value="送信する"> </form> </body>
また、情報を送信する際に必要な”submit”ボタンもこの<input>タグを使って設置します。
<input>タグの中にある”id”は先ほどlabelで説明した”for”と連動しています。
<label>タグの”for”に記述したものと同一にすることで、Webブラウザでラベル部分のテキストをクリックした際、そのラベルに紐付けられたフィールドにポインタが移動する仕組みとなっています。
また”name=”の部分は、フォーム情報を送信する際にどのフィールドの情報なのかをプログラムが把握する上で必要となります。
type＝フィールドの種類。
id＝<label>タグの”for=”部分に記述された名前と揃えることで、紐付けされる。
name＝情報送信の際にどのフィールドの情報なのかを把握するために必要。
<textarea>タグ
複数行のテキスト情報を送信する場合にはこちらの<textarea>タグを使用する。
<body> <form action="" method="post"> <div> <label for="name">名前</label> <input type="text" id="name" name="name"> </div> <div> <label for="mail">Eメール</label> <input type="email" id="mail" name="mail"> </div> <div> <label for="message">本文</label> <textarea id="message" name="message"></textarea> </div> <input type="submit" value="送信する"> </form> </body>
<input>タグには終了タグはありませんが、この<textarea>タグには終了タグが必要となるため、混同しないようにしましょう。
id＝<label>タグの”for=”部分に記述された名前と揃えることで、紐付けされる。
name＝情報送信の際にどのフィールドの情報なのかを把握するために必要。
まとめ
いかがでしたか？
今回はHTML Formについての基本的知識とタグの使い方について解説してみました。
PHP言語を必要とする部分については解説を省略させていただきましたが、興味があればPHP言語についての学習もお勧めします。
PHP言語は他のプログラミング言語と比較しても大変柔軟なコードとなっているため、学習コストもそれほど高くありません。
今やPHP言語を使用していない静的サイトはないといっても過言ではないため、怖がらずに挑戦してみてください。
