バナー画像

メール問い合わせなどを行うためのフォーム設置って難しいですか?

HTML言語以外にもPHP言語の知識が必要となりますが、仕組みさえ理解すれば簡単です。

HTMLを学習されている方の中にはFormに抵抗を持っている方も多いのではないでしょうか?

データ送信といった動作が必要になるためにどうしてもその他の言語(簡単なところで言うとPHP言語)の知識が必要となることから苦手とされる方が多いのだと思いますが、HTML Formは外見だけならHTMLのみで作ることが可能です。

PHP言語を必要とする部分は別の記事で書くことにして、今回はこのフォームの仕組みや外観を構成するタグの使い方について解説していきたいと思います。

HTML Formとは

HTML Formというとまず一番最初に想像するのはメールフォームでしょう。

このメールフォームは、世にあるほぼ全てのWebサイトで目にすることが出来ます。

HTML Formはメール以外でも応募フォームといったものまで幅広く利用されています。

エンドユーザーも各種フォームが設置されていないサイトは非常に使い難いと思うため、もしWebサイトを手掛けるならば、必ず設置した方が良いでしょう。

HTML Formの仕組み

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言語を使用していない静的サイトはないといっても過言ではないため、怖がらずに挑戦してみてください。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。