HTMLのformタグの書き方を完全ガイド！actionとmethod属性の意味を初心者向けにやさしく解説

HTML formタグの書き方｜action・method属性の意味

先生と生徒の会話形式で理解しよう

生徒

「HTMLのformタグって何をするためのタグなんですか？」

先生

「formタグは、名前やメールアドレスなどの入力データを送信するための大切なタグです。」

生徒

「actionとかmethodって書いてあるのを見たことがありますが、あれは何ですか？」

先生

「actionはデータの送り先、methodはデータの送り方を決める設定です。順番にわかりやすく見ていきましょう。」

1. HTMLのformタグとは何か

HTMLのformタグとは、Webページで入力フォームを作成するための基本タグです。お問い合わせフォームやログイン画面、会員登録画面などで必ず使われます。HTMLフォームの基礎として最初に覚えておきたい重要なタグです。

formタグは、入力欄や送信ボタンをひとまとめにする箱のような役割を持っています。この箱の中にテキストボックスやパスワード欄、チェックボックスなどを入れていきます。そして最後に送信ボタンを押すと、中に入力されたデータがサーバーへ送られます。

サーバーとは、インターネット上でデータを受け取ったり保存したりするコンピュータのことです。少し難しく感じるかもしれませんが、手紙を送るポストのような存在だと考えると理解しやすくなります。

2. formタグの基本的な書き方

まずはHTMLのformタグの基本構造を確認しましょう。とてもシンプルな例から始めます。


<form action="send.php" method="post">
    <input type="text" name="username">
    <button type="submit">送信</button>
</form>

ブラウザ表示

formタグの中にinputタグとbuttonタグがあります。inputは入力欄、buttonは送信ボタンです。actionとmethodという属性がformタグに設定されています。

属性とは、タグに追加情報を与えるための設定項目です。どこに送るのか、どの方法で送るのかを指定するのがaction属性とmethod属性です。

3. action属性の意味と役割

action属性は、入力データの送り先を指定するための設定です。たとえばactionにsend.phpと書かれていれば、send.phpというプログラムにデータが送信されます。

これは手紙でいう宛先の住所のようなものです。正しい住所を書かなければ、手紙は届きません。HTMLフォームでも同じで、正しい送り先を指定する必要があります。


<form action="contact.php" method="post">
    <input type="text" name="yourname">
    <button type="submit">送信する</button>
</form>

ブラウザ表示

この例では、contact.phpがデータの送り先になります。action属性を省略すると、現在表示しているページ自身にデータが送信されるという動きになります。

4. method属性の意味と種類

method属性は、データの送り方を決める設定です。主にgetとpostの二種類があります。HTMLフォーム基礎では必ず覚えておきたい重要ポイントです。

getは、入力データをURLの後ろに付けて送る方法です。postは、URLに表示されない形で送る方法です。URLとは、Webページのアドレスのことです。


<form action="search.php" method="get">
    <input type="text" name="keyword">
    <button type="submit">検索</button>
</form>

ブラウザ表示

この場合、検索キーワードがURLに表示されます。一方でパスワードなどの大切な情報はpostを使うのが一般的です。

5. getとpostの違いをやさしく理解する

getとpostの違いを、買い物に例えてみましょう。getは透明な袋に入れて持ち歩くようなイメージです。中身が見えます。postは箱に入れて送るイメージです。外からは中身が見えません。

そのため、検索フォームなど公開しても問題ないデータはget、ログイン情報や個人情報の送信にはpostが使われます。HTML formタグのactionとmethod属性の意味を理解することは、Web制作やホームページ作成の基本です。

6. 入力項目を増やしたフォーム例

実際のHTMLフォームでは、複数の入力欄を使います。名前とメールアドレスを送る簡単な例を見てみましょう。


<form action="mail.php" method="post">
    <label>お名前</label>
    <input type="text" name="name">
    <label>メールアドレス</label>
    <input type="email" name="email">
    <button type="submit">送信</button>
</form>

ブラウザ表示

labelタグは入力欄の説明文です。emailというtypeを使うと、メールアドレス形式の入力チェックが自動で行われます。このようにHTMLフォームは少しずつ機能を追加できます。

7. actionとmethodを正しく使う重要性

HTMLのformタグの書き方で特に大切なのがaction属性とmethod属性の正しい設定です。送り先が間違っているとデータは届きませんし、methodの使い方を誤ると情報が見えてしまう場合があります。

初心者のうちは、ログインやお問い合わせなど個人情報を扱う場合はpostを使うと覚えておくと安心です。HTMLフォーム基礎をしっかり理解しておくことで、Webアプリ開発やホームページ制作の土台が安定します。

formタグはWeb制作の中でも非常に使用頻度が高い重要なタグです。action属性の意味、method属性の違い、getとpostの特徴を理解して、正しいHTMLコードを書けるようになりましょう。

まとめ

今回は、HTMLのformタグの書き方を中心に、action属性とmethod属性の意味と役割について基礎から丁寧に確認しました。HTMLフォームは、Webページで入力データを送信するための重要な仕組みです。お問い合わせフォーム、ログインフォーム、会員登録フォーム、検索フォームなど、さまざまなWebサイトやホームページ制作の現場で必ず使われています。

formタグは入力欄や送信ボタンをひとつにまとめる箱のような存在です。その中にinputタグやbuttonタグ、labelタグなどを配置し、ユーザーが入力したデータをサーバーへ送信します。ここで重要になるのがaction属性とmethod属性です。action属性はデータの送り先を指定する設定であり、どのプログラムやどのページに送信するのかを決めます。method属性はデータの送り方を指定する設定であり、getとpostという二種類の方法を選択できます。

getはURLの後ろにデータを付けて送信する方法で、検索フォームなど公開しても問題ない情報に向いています。一方、postはURLに表示されない形でデータを送信する方法で、パスワードや個人情報など重要なデータを扱う場合に適しています。HTMLフォーム基礎を理解するうえで、getとpostの違いを正しく把握することはとても大切です。

また、inputタグのtype属性を使い分けることで、textやemailなど目的に応じた入力欄を作成できます。emailを指定するとメールアドレス形式の入力チェックが自動で行われるため、ユーザーにとっても使いやすいフォームになります。labelタグを使えば、入力欄の説明を明確にでき、アクセシビリティや使いやすさの向上にもつながります。

HTMLのformタグの書き方を正しく理解することは、Web制作初心者にとって大きな第一歩です。action属性の意味、method属性の種類、getとpostの違い、inputタグの基本的な使い方をひとつずつ確認しながらコードを書くことで、自然とHTMLコーディングの力が身についていきます。ホームページ作成やWebアプリ開発の基礎として、何度も手を動かしながら練習することが上達への近道です。

サンプルプログラムで総復習

ここで、action属性とmethod属性、そして複数のinputタグを使ったフォームの総復習をしてみましょう。これまで学んだHTMLフォームの基礎をすべて含んだ例です。


<form action="confirm.php" method="post">
    <h2>お問い合わせフォーム</h2>
    <label>お名前</label>
    <input type="text" name="username">
    <label>メールアドレス</label>
    <input type="email" name="useremail">
    <label>お問い合わせ内容</label>
    <input type="text" name="message">
    <button type="submit">送信する</button>
</form>

ブラウザ表示

このHTMLコードでは、action属性にconfirm.phpを指定し、method属性にpostを設定しています。お名前、メールアドレス、お問い合わせ内容という三つの入力項目を用意し、最後に送信ボタンを配置しています。HTMLフォームの基本構造として非常にわかりやすい形です。実際のWebサイト制作でも、ほとんど同じ構造でフォームが作られています。

HTMLのformタグの書き方を理解すると、データ送信の流れが見えてきます。ユーザーが入力する、送信ボタンを押す、actionで指定した送り先にmethodで指定した方法でデータが送られる。この一連の流れをイメージできるようになることが重要です。仕組みを理解すれば、エラーが出たときも原因を考えやすくなります。

先生と生徒の振り返り会話

生徒

「HTMLのformタグは、入力データを送信するための大切なタグだとわかりました。actionは送り先、methodは送り方でしたよね。」

先生

「その通りです。HTMLフォームの基本はその二つです。action属性でどこに送るかを決め、method属性でどの方法で送るかを決めます。」

生徒

「getはURLに表示されて、postは表示されない方法でした。検索フォームはget、ログインやお問い合わせはpostを使うと覚えました。」

先生

「よく理解できていますね。さらにinputタグのtypeやlabelタグも組み合わせることで、使いやすいフォームが作れます。HTMLのformタグの書き方をしっかり身につければ、Web制作の基礎は安心です。」

生徒

「これからは実際にコードを書いて、actionやmethodを変えながら動きを確認してみます。HTMLフォーム基礎を何度も練習して理解を深めたいです。」

先生