フォームを作成する時に必要なhtmlタグとは？送信先の設定方法と仕組み

「htmlでフォームを作成しないといけないけれど、方法がわからない」とお悩みではありませんか？

本記事では、htmlでフォームを作成する基本的な方法から、フォーム作成を効率化できる便利なツールまでを分かりやすく解説します。

「formrun」で簡単！ノーコードでフォーム作成ができる！
「formrun」を使えば、プログラミングの知識がなくてもクリックだけでフォームを作成できます。formrunには以下の特徴があります。

・デザインに優れた120種類以上のテンプレートを提供
・万全なセキュリティ対策で、個人情報も安全に取り扱える
・顧客管理もメールの送信もformrunで対応可能

メールアドレスがあれば、無料ですぐに利用を開始できます。まずはフォームを作成してみましょう。

無料でフォームを作成する

formrunについて知りたい方はこちらをご覧ください。
>> formrunについて知る

目次 [非表示]

フォーム作成に必要となるhtmlタグ
フォームの送信先の設定方法
htmlのフォームの仕組みとは？
業務効率化をお助け！フォーム作成ツール「formrun」

フォーム作成に必要となるhtmlタグ

フォーム作成に使用するhtmlタグには、必須の基本タグがあります。これらを理解することで、簡単なフォームから複雑なフォームまで柔軟に作成が可能です。

以下で主要なタグと役割について解説します。

フォーム作成に必須：formタグ

フォームの作成に欠かせないhtmlタグが、「formタグ（<form></form>）」です。formタグは、フォームの内容を送る場所や通信方法を指定する役割があります。

フォームを構成する項目を<form></form>で囲んで使用します。

＜例＞

<form action="submit.php" method="post">

  <!-- ここにフォーム要素を記述 -->

</form>

上記コードのそれぞれの意味は、以下の通りです。

・<!– ここにフォーム要素を記述 –> ：入力欄や送信ボタンなどのフォーム要素を記載。

・action：送信先のURLを指定。

・method：フォームのデータの送信方法を指定。

methodには、「GET」と「POST」の2種類があり、「GET」はデータをURLに含めて送り、「POST」はデータを見えない形で送ります。「GET」は「検索」や「データ取得」の場面で、「POST」は「データ送信」や「フォームで入力された情報の保存」などの場面で使用します。

テキストフィールドを作成：inputタグ

「inputタグ（<input>）」は、ユーザーが文字を入力する欄を作成する際に使用するタグです。

＜例＞

<input type="text" name="username" placeholder="お名前">

上記コードのそれぞれの意味は、以下の通りです。

・type=”text”：テキスト入力欄。

・name：入力されたデータを区別する名前を指定。

・placeholder：何の入力欄かを教えるためのテキストを表示。

テキストエリアを作成：textareaタグ

長い文章を入力してもらう場合には、「textareaタグ（<textarea></textarea>）」を使います。

＜例＞

<textarea name="message" rows="5" cols="30">ここにメッセージを入力してください</textarea>

「rows」で入力欄の縦サイズを、「cols」で入力欄の横サイズを指定します。

送信ボタンを作成：submit

入力された内容を送信するボタンは「inputタグ（<input>）」にsubmitを指定して作成します。

＜例＞

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

上記コードのそれぞれの意味は、以下の通りです。

・type=”submit”：送信ボタンとして動作することを指定。

・value：ボタンに表示されるテキストを指定する（例：送信）

htmlを使ったフォーム作成のついてより詳しく知りたい方は、下記の記事もぜひご覧ください。
>>コピペで簡単！htmlを使ったメールフォームの作り方

フォームの送信先の設定方法

フォームで入力された情報をフォーム送信先やフォーム回答者に送るには、送信先の設定が必要です。

そのため、htmlの属性やサーバー側のプログラムを使って、正しく送信できるようにします。

送信先を指定する

「action」属性に送信先のメールアドレスやURLを置くことで、送信先の指定が可能です。

例えば、入力内容を指定したメールアドレス宛に送る場合や、サーバー上の特定の処理スクリプト PHP（例：「contact.php」）に送信する場合があります。

以下は基本的な記述例です。

＜例＞

<form action="contact.php" method="post">

  <!-- 入力欄をここに記載 -->

</form>

PHPとは、動的なWebサイトを構築するためのサーバーサイドスクリプト言語です。htmlと組み合わせて使うことで、フォームから送信されたデータの処理や、データベースへの保存、メールの送信などが可能になります。

詳しくは下記の記事をご覧ください。
>>初めてでも簡単！PHPを使ったお問合せフォームの作り方とコード例

回答者に自動でメールを送る

フォーム回答者に対して自動で「フォーム内容を受け付けました」などの返信をしたい場合は、PHPを使います。

以下は簡単な記述例です。

＜例＞

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    $to = $_POST['email']; // フォーム回答者のメールアドレス

    $subject = "フォーム受信のお知らせ";

    $message = "ご連絡ありがとうございます。フォーム内容を受け付けました。";

    $headers = "From: no-reply@yourwebsite.com";




    mail($to, $subject, $message, $headers);

}

必要に応じて、メッセージの内容や送信者のアドレスをカスタマイズすることで、より親切な自動返信メールを設定可能です。