【完全保存版】HTMLのformタグの使い方｜フォームの作り方を初心者向けに基本から徹底解説

お問い合わせフォームや申込みフォームなど、
ユーザーから情報を入力してもらう仕組みを作るときに使われるのが
HTMLの form（フォーム）タグ です。

この記事では、「html form」で検索した初心者の方に向けて、
HTMLでフォームを作成する基本から、正しい書き方、よくあるつまずきポイントまでを
実例つきでわかりやすく解説します。

HTMLのformタグとは何か

HTMLの form タグは、
ユーザーが入力したデータをまとめて送信するためのタグです。

お問い合わせフォーム
ログインフォーム
申し込みフォーム
検索フォーム

など、Webサイトでは欠かせない存在です。

formタグの基本構造

まずは、最もシンプルなフォームの構造を見てみましょう。

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

基本構造のポイント

form：フォーム全体を囲む
action：送信先のURL
method：送信方法（post / get）

action属性とmethod属性の意味

action属性

<form action="send.php">

入力内容を送信する先を指定
PHPやCGI、外部サービスURLなどを指定する

method属性

<form method="post">

method	特徴
get	URLにデータが表示される
post	データがURLに表示されない

お問い合わせフォームでは post が一般的です。

inputタグの使い方

フォームで最もよく使われるのが input タグです。

<input type="text" name="username">

主な type の種類

type	内容
text	1行テキスト
email	メールアドレス
password	パスワード
checkbox	チェックボックス
radio	ラジオボタン
submit	送信ボタン

textareaタグで複数行入力する

お問い合わせ内容など、
複数行の文章を入力してもらう場合に使います。

<textarea name="message"></textarea>

改行が可能
長文入力に適している

labelタグを使った正しい書き方

フォームでは、label タグを使うのが推奨されています。

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

labelを使うメリット

入力項目が分かりやすくなる
クリックしやすくなる
アクセシビリティ向上

buttonタグとinput submitの違い

input submit

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

buttonタグ

<button type="submit">送信</button>

現在は、デザインしやすい button タグが主流です。

フォームが送信されないときの原因

actionが未指定・間違っている

<form action="">

送信先が正しく設定されているか確認しましょう。

name属性がない

<input type="text">

name がないと、データが送信されません。

buttonのtypeが指定されていない

<button>送信</button>

フォーム内では、必ず type="submit" を指定しましょう。

HTML formとCSSの関係

HTMLは構造、CSSは見た目を担当します。

HTML：入力項目・送信の仕組み
CSS：レイアウト・色・サイズ調整

フォームのデザインは、CSSで行うのが基本です。

JavaScriptを使わないフォームは作れる？

はい、作れます。

HTML + CSS → 見た目と基本動作
JavaScript → 入力チェックや動的処理

初心者の方は、まずHTMLのform構造を理解することが最優先です。

よくある質問

formタグは入れ子にできますか

できません。
formタグの中に、別のformタグを入れることはHTML仕様上NGです。

フォームはSEOに影響しますか

直接的な影響はありませんが、
使いやすいフォームはユーザー満足度向上につながります。

まとめ

HTMLのformタグは、
ユーザーとのやり取りを実現する重要な要素です。

formタグで送信範囲を指定する
input・textareaで入力項目を作る
action・methodを正しく設定する
labelを使って分かりやすくする

「html form」で検索した方は、
まず 基本構造と必須属性を正しく理解すること から始めてみてください。
フォームを正しく作れるようになると、Webサイトの実用性が大きく向上します。

【完全保存版】HTMLのformタグの使い方｜フォームの作り方を初心者向けに基本から徹底解説