Webサイトでよく見かける「お問い合わせフォーム」や「ログイン画面」は、HTMLのformタグで作られています。
formタグを使うことで、ユーザーが入力したデータをサーバーへ送信できます。
この記事では、初心者向けに
- formタグの基本構造
- action・methodの役割
- inputとの関係
- 実際に動くサンプルコード
- よくあるミスと対処法
をわかりやすく解説します。
formタグとは？
formタグは、ユーザーが入力した情報をまとめて送信するためのタグです。
例えば：
- お問い合わせフォーム
- 会員登録フォーム
- ログイン画面
- 検索フォーム
など、すべてformタグで作られています。
formタグの基本構造
最も基本的な構造は以下です。
<form action="送信先URL" method="送信方法">
入力欄やボタン
</form>
ポイント
- formタグの中に入力項目を入れる
- 送信ボタンを押すとデータが送信される
action属性とmethod属性の役割
action属性（送信先）
action="https://example.com/form"
入力されたデータを送るURLを指定します。
method属性（送信方法）
method="post"
主に2種類あります。
| method | 特徴 |
|---|---|
| get | URLにデータが表示される（検索など） |
| post | データがURLに表示されない（フォーム送信） |
基本ルール
- お問い合わせ → post
- 検索フォーム → get
inputタグとの関係
formタグの中には、入力欄としてinputタグを使います。
例：
<form>
<input type="text">
</form>
inputタグは「入力部品」で、formタグは「送信の枠」です。
よく使うフォームの例（コピペOK）
基本的なお問い合わせフォーム
<form action="#" method="post">
<p>お名前</p>
<input type="text" name="name">
<p>メールアドレス</p>
<input type="email" name="email">
<p>お問い合わせ内容</p>
<textarea name="message"></textarea>
<br><br>
<button type="submit">送信する</button>
</form>
各要素の意味
- text：文字入力
- email：メール形式の入力
- textarea：複数行入力
- button：送信ボタン
labelタグで使いやすくする
labelタグを使うと、クリックしやすくなります。
<label for="name">お名前</label>
<input type="text" id="name" name="name">
メリット
- ラベルをクリックしても入力できる
- アクセシビリティが向上する
よくあるミスと対処法
送信しても何も起きない
原因：
- actionが未設定
- 送信先が存在しない
データが送られない
原因：
- name属性がない
<input type="text" name="name">
nameがないとデータは送信されません。
ボタンを押しても送信されない
原因：
- buttonに type=”submit” がない
formタグの注意点（WordPressで使う場合）
WordPressでは注意が必要です。
ポイント
- formだけではメール送信はできない
- PHPやプラグインが必要
よく使う方法
- Contact Form 7
- WPForms
- Snow Monkey Forms
HTMLは「見た目」、送信処理は「サーバー側」が担当します。
まとめ
- formタグは入力データを送信するためのタグ
- actionで送信先、methodで送信方法を指定
- inputやtextareaを組み合わせてフォームを作る
- name属性がないとデータは送信されない
- WordPressではプラグイン併用が基本
フォームはWebサイトに必須の機能なので、しっかり理解しておきましょう。
著者からのひと言
formタグは「HTMLの中でも実用性が非常に高いタグ」です。最初は難しく感じますが、基本構造はとてもシンプルです。まずは簡単な入力フォームを作り、実際に動きを確認することが理解への近道です。
おすすめ記事
- input type属性まとめ（email・date・numberなど）
- textareaの使い方と文字数制限
- select・optionで選択ボックスを作る方法
- placeholder・requiredの使い方
⇒ HTML講座TOPはこちら
⇒ CSS講座TOPはこちら
この記事が役に立ったら、いいね！お願いします！
