【2026年8月最新】HTMLのformタグでお問い合わせフォームを作る方法｜label・input・textareaの使い方を1から解説

「お問い合わせフォームをHTMLで作りたいけど、formタグって何から書けばいいの？」——自社サイトの改修や新規ページ制作の中で、この疑問にぶつかった方は多いはずです。

フォームは、名前・メールアドレス・お問い合わせ内容といったユーザーの入力を受け取り、サーバーに送信する仕組みです。見た目だけならHTMLの数タグを覚えれば誰でも作れますが、label・input・textareaの使い分けやGETとPOSTの違い、入力チェックの基本を理解していないと、「動くけど使いにくい」「セキュリティ的に危ういフォーム」になりがちです。

この記事では、formタグの基本構文から実践的なお問い合わせフォームの作り方、入力チェック・スパム対策まで、実際に動くコード例を交えて丁寧に解説します。さらに後半では、非エンジニアの経営者がこの仕組みを知っておくべき理由と、Claude Codeを使えばHTMLを覚えなくてもフォーム制作・改修を任せられるという実践的な選択肢まで紹介します。

代表菅澤

フォームは会社のWebサイトの中でも「お客様と直接つながる入口」です。作り方の細部まで自分で書けなくても、仕組みを理解しておくと、制作会社への発注やAIへの指示が驚くほどスムーズになります。

AI鬼管理山崎

今日はHTMLタグの正確な使い方を1つずつ整理しつつ、「これ、結局エンジニアじゃなくても対応できるのか？」という視点でも解説していきます。最後まで読めば、フォーム制作の全体像が掴めるはずです。

この記事を最後まで読むと、次の7つが明確になります。

01 WHAT IS A FORM そもそも「フォーム」とは何か Webサイトの「入力窓口」の正体を理解する

「フォーム」とは、Webページ上でユーザーが名前・メールアドレス・お問い合わせ内容などの情報を入力し、送信ボタンを押すことでサーバーに送る仕組み全体を指します。会員登録画面、検索ボックス、ログイン画面、お問い合わせページなど、私たちが日常的に触れているWebサイトのほとんどにフォームが使われています。

フォームは大きく分けて「見た目（外観）」と「受け取ったデータをどう処理するか（裏側の処理）」の2つの要素で構成されます。見た目の部分はHTMLだけで作成できますが、「受け取ったデータをメールで送る」「データベースに保存する」といった裏側の処理には、PHPやJavaScript（サーバーサイド）などのプログラムが別途必要になります。

1-1. フォームが使われる代表的な場面

実務でフォームが登場する場面は多岐にわたります。

AI鬼管理山崎

どの場面のフォームも、実は使われているHTMLタグの種類はほとんど同じです。「何を入力させたいか」の組み合わせが違うだけなので、基本タグを1つずつ理解すれば応用が効きます。

02 HOW IT WORKS フォームの仕組み：入力から送信までの流れ ユーザーの入力がサーバーに届くまでの4ステップ

formタグの書き方に入る前に、「入力した内容がどうやってサーバーに届くのか」という全体の流れを押さえておきましょう。仕組みを理解しておくと、この後の各タグの役割がスムーズに頭に入ります。

この流れの中で、HTMLのformタグが担うのは主にStep 1〜3です。「どの入力欄を用意するか（label/input/textarea）」「どこに送るか（action属性）」「どんな方法で送るか（method属性）」の3つを指定すれば、ブラウザが自動的にデータをまとめて送信してくれます。

2-1. GETとPOST：2つの送信方法の違い

フォームのデータ送信方法にはGETとPOSTの2種類があり、method属性で指定します。この2つの違いを正確に理解しておくことは、フォーム設計において非常に重要です。

代表菅澤

個人的には「GETは検索窓、POSTはそれ以外の入力フォーム全般」くらいの大雑把な理解で最初は十分だと思っています。細かい仕様を全部覚えるより、まず使い分けの感覚を掴むほうが実務では役立ちます。

03 FORM TAG BASICS formタグの基本構文（action・method属性） 全ての入力欄を1つにまとめる「箱」の役割

formタグは、その中に配置したlabel・input・textareaなどの入力欄をひとまとめにし、「どこに」「どんな方法で」送信するかを指定する箱（コンテナ）のような役割を持ちます。

<form action="/contact/submit" method="post">
  <!-- この中に入力欄（label・input・textareaなど）を配置する -->
</form>

formタグの主な属性は次の2つです。

3-1. name属性の役割：サーバーが受け取るデータの「見出し」

formタグ自体の話からは少し外れますが、この後何度も登場するname属性についても先に触れておきます。input・textareaなどの入力欄には必ずname属性を指定しますが、これはサーバー側がデータを受け取るときの「見出し（キー）」になります。

例えばname="email"と指定した入力欄に「taro@example.com」と入力して送信すると、サーバー側には「email という項目に taro@example.com という値が届いた」という形でデータが渡ります。name属性を書き忘れると、その入力欄の内容はサーバーに送信されません。

04 LABEL TAG labelタグの使い方 入力欄に「見出し」を付け、使いやすさを底上げする

labelタグは、input・textareaなどの入力欄に「これは何を入力する欄か」を示す見出しを付けるためのタグです。見た目だけならただのテキストでも代用できそうに見えますが、labelタグを正しく使うことで使いやすさ（ユーザビリティ）が大きく向上します。

<label for="name">お名前</label>
<input type="text" id="name" name="name">

ポイントは、label要素のfor属性と、input要素のid属性を同じ値にして紐付けることです。この紐付けにより、label要素のテキスト部分をクリックしただけでも、対応する入力欄にカーソルが移動（フォーカス）します。

特にチェックボックスやラジオボタンでは、この効果が顕著です。labelで紐付けておくと、小さな丸や四角のアイコン部分だけでなく、隣接する文字列全体がクリック対象になるため、スマートフォンでの誤タップも減らせます。

<label><input type="checkbox" name="agree" value="yes"> 利用規約に同意する</label>

上記のように、labelタグでinputタグ全体を囲む書き方（for属性を省略できる書き方）も可能です。この場合はid属性がなくても紐付けが成立します。

AI鬼管理山崎

labelタグを省略しているフォームは、スマホで見ると「今どの欄を入力しているか分からない」状態になりがちです。見た目のシンプルさより、迷わず入力できることの方が結果的にコンバージョン率に効いてきます。

05 INPUT TAG inputタグ：type属性で変わる入力欄の種類 1つのタグで10種類以上の入力欄を作り分ける

inputタグは、フォームの中で最も登場回数が多いタグです。type属性の値を変えるだけで、テキスト欄・メール欄・チェックボックス・ラジオボタンなど、まったく違う見た目と挙動の入力欄を作り分けられます。

代表的なtype属性の値と特徴を整理します。

5-1. checkboxとradioの違い：似ているようで役割が別

checkboxとradioは見た目こそ似ていますが、役割はまったく異なります。checkboxは複数選択が可能、radioは同じname属性を持つグループの中から1つだけしか選べません。

<!-- ラジオボタン：同じname="contact_method"の中から1つだけ選べる -->
<p>ご希望の連絡方法</p>
<label><input type="radio" name="contact_method" value="email" checked> メール</label>
<label><input type="radio" name="contact_method" value="tel"> 電話</label>

<!-- チェックボックス：複数を同時にチェックできる -->
<p>ご興味のあるサービス（複数選択可）</p>
<label><input type="checkbox" name="interest_automation" value="1"> 業務自動化</label>
<label><input type="checkbox" name="interest_cc" value="1"> Claude Code導入支援</label>

5-2. placeholderとvalueの違い

inputタグにはplaceholder属性とvalue属性があり、どちらも入力欄に文字を表示できますが、役割はまったく異なります。

06 TEXTAREA TAG textareaタグ：複数行入力欄の作り方 お問い合わせ内容など、長文入力に使う欄

textareaタグは、お問い合わせ内容や自由記述欄のような複数行にわたる長文を入力してもらうためのタグです。inputタグと違い、開始タグと終了タグの両方が必要な点が大きな違いです。

<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="6" cols="40" placeholder="お問い合わせ内容をご記入ください"></textarea>

rows属性とcols属性で、入力欄の見た目の大きさを指定できます。

よくある間違いとして、textareaタグにvalue属性を指定してしまうケースがあります。textareaにはvalue属性は存在せず、初期値を入れたい場合は開始タグと終了タグの間に直接テキストを書きます。

<!-- 誤り：textareaにvalue属性は効かない -->
<textarea name="message" value="初期テキスト"></textarea>

<!-- 正しい：開始タグと終了タグの間に書く -->
<textarea name="message">初期テキスト</textarea>

代表菅澤

inputとtextareaの違いを知らずに「value属性で初期値を入れようとしてうまくいかない」という相談は、実は制作の現場でも定番の質問です。仕様の違いを知っているだけで、無駄な試行錯誤を減らせます。

07 HANDS-ON 実践：お問い合わせフォームを1から作る ここまでのタグを組み合わせて実際に動く形にする

ここまで解説してきたform・label・input・textareaタグを組み合わせて、実際のお問い合わせフォームを1から組み立ててみましょう。

<form action="/contact/submit" method="post">

  <!-- お名前 -->
  <label for="name">お名前<span class="required">必須</span></label>
  <input type="text" id="name" name="name" placeholder="山田 太郎" required>

  <!-- メールアドレス -->
  <label for="email">メールアドレス<span class="required">必須</span></label>
  <input type="email" id="email" name="email" placeholder="taro@example.com" required>

  <!-- 電話番号（任意） -->
  <label for="tel">電話番号</label>
  <input type="tel" id="tel" name="tel" placeholder="09012345678">

  <!-- ご希望の連絡方法 -->
  <p>ご希望の連絡方法</p>
  <label><input type="radio" name="contact_method" value="email" checked> メール</label>
  <label><input type="radio" name="contact_method" value="tel"> 電話</label>

  <!-- お問い合わせ内容 -->
  <label for="message">お問い合わせ内容<span class="required">必須</span></label>
  <textarea id="message" name="message" rows="6" placeholder="お問い合わせ内容をご記入ください" required></textarea>

  <!-- 送信ボタン -->
  <button type="submit">送信する</button>

</form>

この1つのコードだけで、「お名前」「メールアドレス」「電話番号」「連絡方法の選択」「お問い合わせ内容」を受け付ける、実務レベルのお問い合わせフォームの外観が完成します。ポイントを振り返ります。

7-1. button要素とinput type="submit"の違い

送信ボタンは<button type="submit">送信する</button>のようにbutton要素で作る方法と、<input type="submit" value="送信する">のようにinput要素で作る方法の2通りがあります。

08 VALIDATION & SPAM 入力チェック・スパム対策の基本 「動くフォーム」から「安心して使えるフォーム」へ

フォームは見た目が完成しても、それだけでは実務投入には不十分です。入力ミスの防止と、悪意あるスパム送信への対策も、フォーム設計の重要な要素です。

8-1. required属性によるブラウザ側チェック

input・textareaにrequired属性を付けると、その項目が空欄のまま送信しようとした際、ブラウザが標準機能で送信をブロックし、注意を促す吹き出し（ツールチップ）を表示します。特別なプログラムを書かなくても、HTMLの属性1つだけで基本的な入力チェックができる便利な仕組みです。

8-2. スパム対策の代表的な手法

お問い合わせフォームを公開すると、自動プログラム（ボット）による無関係な送信、いわゆるスパム送信が一定数届くようになります。完全に防ぐことは難しいものの、代表的な対策を組み合わせることで大幅に減らせます。

AI鬼管理山崎

フォームのセキュリティ・スパム対策は、一度作って終わりではなく、届いた迷惑送信の傾向を見ながら継続的に調整していく領域です。この地道な調整こそ、後述するAIに任せやすい業務の1つだと感じています。

09 WHY IT MATTERS 【独自】非エンジニアの経営者がformタグを知っておくべき理由 コードを書かなくても、仕組みを知るだけで得られるメリット

ここまで解説してきたformタグの仕組みは、正直なところ「経営者が自分でコードを書く」ために必要な知識ではありません。しかし、仕組みの概要だけでも知っておくと、実務上いくつかの明確なメリットがあります。

9-1. 理由1：制作会社・外注先との会話が正確になる

自社サイトのお問い合わせフォームを外注する場面で、「action属性の送信先はどこになっていますか」「必須項目はどれとどれですか」といった質問が具体的にできるようになると、認識のズレによる手戻りを未然に防げます。逆に仕組みを知らないままだと、「フォームが動かない」というトラブルが起きても、原因がHTML側なのかサーバー側なのかの切り分けすら難しくなります。

9-2. 理由2：フォームの入力項目設計は経営判断に直結する

「必須項目を何個にするか」は、一見エンジニアの領分に見えて、実は問い合わせ数（コンバージョン率）に直結する経営判断です。入力項目が多すぎるフォームは離脱率が高くなりやすく、逆に少なすぎると営業に必要な情報が不足します。この設計判断は、HTMLの書き方以前に「何を必須にするか」というビジネス側の意思決定であり、経営者自身が関わるべき領域です。

9-3. 理由3：フォームの不具合に自分で気づけるようになる

フォームの仕組みをざっくり理解していると、「送信ボタンを押しても反応がない」「必須マークがあるのに送信できてしまう」といった不具合に、専門家に聞く前に自分でも気づけるようになります。特にお問い合わせフォームは会社の売上に直結する接点であるため、不具合が放置される期間が長いほど機会損失も大きくなります。

代表菅澤

弊社でも、フォームの入力項目を1つ減らしただけで問い合わせ数が明確に増えた経験があります。「コードが書けるかどうか」より「フォームがビジネスにどう影響するかを理解しているか」の方が、経営者にとってはるかに重要な視点だと思っています。

10 GENAI CASE STUDY 【独自データ】GENAI社内のフォーム関連業務とClaude Code実運用 HTMLを書けるメンバーがいなくても回っている理由

ここでは、弊社（株式会社GENAI）が実際にフォーム制作・改修を含む開発業務をどのように回しているかを、実データを交えて紹介します。

弊社では、経営・営業・広告・開発・経理・秘書業務・個人業務まで社内のあらゆる業務にClaude Codeを絡める方針で運用しています。フォームの新規作成や項目の追加・修正といった開発業務も例外ではなく、「都度数時間かかっていた作業がその場で数分に短縮される」という肌感で回っています。

特にフォームのように「項目を1つ増やす」「必須マークの位置を変える」「入力チェックの条件を変更する」といった細かい修正依頼は、従来であれば都度エンジニアへの依頼やタスク化が必要でした。しかしClaude Codeを使えば、非エンジニアの担当者が「お問い合わせフォームに会社名の入力欄を追加して、必須にして」と日本語で伝えるだけで、該当箇所のコードが自動で生成・修正されます。

この4ステップを2〜3ヶ月かけて回していくと、気がつけば社内のあらゆる開発関連業務にClaude Codeが絡んでいる状態になります。フォームのような小さな改修は、この横展開の「最初の1業務」として選ばれやすい領域でもあります。

AI鬼管理山崎

以前は「フォームに1項目追加してほしい」という依頼だけで、着手から完了まで数日かかることもありました。今はその場で指示を出して数分〜十数分で確認まで終わることが多く、細かい修正依頼へのハードルが大きく下がった実感があります。

11 AI ASSIST Claude Codeにフォーム制作・改修を任せる方法 非エンジニアでも「要件を日本語で伝える」だけでフォームが手に入る

ここまで見てきた通り、formタグの正確な構文・label/input/textareaの使い分け・入力チェック・スパム対策まですべてを正確に覚えて書くのは、非エンジニアの方にとって現実的ではありません。しかし、Claude Codeを使えば、この記事で紹介した注意点を踏まえたフォームのコードを自動で生成させることができます。

<!-- Claude Codeが生成するコード例のパターン -->
<!-- 指示:「会社名（任意）・お名前・メールアドレス・お問い合わせ内容の
     フォームを作って。会社名以外は必須にして。」 -->

<form action="/contact/submit" method="post">
  <label for="company">会社名</label>
  <input type="text" id="company" name="company" placeholder="株式会社◯◯">

  <label for="name">お名前<span class="required">必須</span></label>
  <input type="text" id="name" name="name" required>

  <label for="email">メールアドレス<span class="required">必須</span></label>
  <input type="email" id="email" name="email" required>

  <label for="message">お問い合わせ内容<span class="required">必須</span></label>
  <textarea id="message" name="message" rows="6" required></textarea>

  <button type="submit">送信する</button>
</form>

この例のように、Claude Codeへの指示で重要なのは「どの項目を用意したいか」「どれを必須にするか」の2点を明確に伝えることです。この2点さえ伝われば、この記事で解説したようなlabel・required・type属性の使い分けまで考慮したコードが返ってきます。

代表菅澤

HTMLが書けるかどうかより、「自社のフォームに何を入力してほしいか」を具体的に言語化できるかどうかの方が、AIを使いこなす上ではよほど重要なスキルだと感じています。

12 CONCLUSION まとめ 仕組みを理解した上で、書く作業はAIに任せる選択肢もある

この記事では、HTMLのformタグの基本構文から、label・input・textareaの使い分け、GETとPOSTの違い、入力チェック・スパム対策、非エンジニアの経営者が知っておくべき理由、そしてClaude Codeを使った効率化までを整理しました。最後にポイントを振り返ります。

フォームは一見地味なパーツですが、正確に理解していないと「動くけど使いにくい」「セキュリティ的に危うい」フォームになりやすい領域です。「仕組みを理解した上で、実際にコードを書く作業はAIに任せる」という組み合わせが、非エンジニアの方にとって最も現実的な向き合い方だと弊社では考えています。

代表菅澤

弊社では「AI鬼管理」というサービスで、Claude Codeを使ったWeb制作・業務のコード生成・自動化の設計から伴走まで支援しています。「エンジニアがいないけど、自社サイトのフォームを改善したい」という方は、無料相談で具体的にお答えしますので、お気軽にどうぞ。

フォーム制作を含むサイト改修・業務のコード化を、AI鬼管理が一緒に設計します

formタグの正確な書き方やスパム対策の仕組みを覚えなくても、Claude Codeに要件を伝えるだけで実務レベルのフォームが手に入ります。
弊社の実運用ノウハウをベースに、個別に導入設計のご相談を承ります。

AI鬼管理山崎

「エンジニアがいない」「フォーム改修のためだけに毎回外注するほどでもない」という業務ほど、Claude Codeとの相性が良い領域です。まずは無料相談で、あなたの業務に当てはめられる範囲を一緒に見つけましょう。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？

AI活用を自社で回せるようになりたい方へ

AI鬼管理

Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。

AI鬼管理を詳しく見る →

業務を丸ごと任せたい方へ

AIBPO by AI鬼管理

請求処理・データ入力・問い合わせ対応などの定型業務を、AI×人の品質管理体制で丸ごと代行。いまのコストの50%目安で、日々は成果物を承認するだけ。

AIBPOを詳しく見る →

よくある質問

Q. formタグのaction属性を省略するとどうなりますか？

A. action属性を省略すると、多くのブラウザでは現在表示しているページ自身にデータが送信されます。ただし挙動はページ構成やブラウザによって差が出ることがあるため、実務では「どこに送るフォームか」を一目で分かるように、action属性は必ず明示的に指定しておくことをおすすめします。省略に頼った実装は、後から見返したときにトラブルの原因を特定しにくくなります。

Q. GETとPOST、結局どちらを使えばいいですか？

A. 検索ボックスのように「送信結果のURLをブックマークや共有で使いたい」場合はGET、お問い合わせフォームや会員登録のように個人情報を含む入力を送る場合はPOSTを使うのが基本の考え方です。GETはURLに入力内容がそのまま表示されるため、氏名やメールアドレスなどを含むフォームでGETを使うのは避けるべきです。迷った場合は、入力フォーム全般に対してPOSTを選んでおけば大きな失敗はありません。

Q. labelタグを使わずにplaceholderだけで項目名を示すのは問題ですか？

A. 推奨されません。placeholderは入力欄が空のときだけ表示されるヒント文字で、実際に文字を入力し始めると消えてしまいます。そのため、入力の途中で「これは何の欄だったか」が分からなくなりやすく、特に長いフォームや複数項目が並ぶ画面では入力ミスやユーザーの離脱につながります。labelタグを使って、常に見える形で項目名を示すのが基本です。

Q. required属性を付ければセキュリティ対策は十分ですか？

A. 十分ではありません。required属性やtype="email"によるチェックは、あくまでブラウザ上での簡易的な確認であり、ブラウザの開発者ツールなどを使えばこれらの制限を回避して送信することも技術的には可能です。個人情報を扱うフォームでは、HTML側のチェックに加えて、サーバー側でも改めて必須項目や形式のチェックを行う「二重チェック」が欠かせません。

Q. textareaにvalue属性で初期値を設定できますか？

A. できません。textarea要素にはvalue属性が存在せず、初期値を表示したい場合は開始タグ<textarea>と終了タグ</textarea>の間に直接テキストを記述します。input要素との仕様の違いを知らないまま実装すると、「value属性を書いたのに反映されない」という状態になりやすいため、この違いは正確に押さえておく必要があります。

Q. チェックボックスとラジオボタンはどう使い分けますか？

A. 複数の選択肢を同時に選ばせたい場合はチェックボックス、選択肢の中から1つだけを選ばせたい場合はラジオボタンを使います。ラジオボタンは同じname属性を持つ項目同士がグループとして扱われ、1つを選ぶと他の選択が自動的に外れる仕組みです。name属性を項目ごとに変えてしまうと排他選択にならないため、実装時は必ずグループ内でname属性を統一してください。

Q. Claude Codeにフォーム制作を依頼するとき、何を伝えればいいですか？

A. 最低限「どんな項目を用意したいか（お名前・メールアドレス・お問い合わせ内容など）」と「どの項目を必須にしたいか」の2点を日本語で具体的に伝えるのが効果的です。この情報があれば、label・input・textareaの使い分けやrequired属性の付け方まで考慮したコードが生成されます。既存フォームの改修であれば、現在のコードと変更したい内容を合わせて伝えると、より精度の高い修正が得られます。

監修 最終更新日: 2026年8月13日

菅澤 孝平 株式会社GENAI 代表取締役

• AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
• Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
• 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
• 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
• メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
• 明治大学政治経済学部卒

現在は AI鬼管理（Claude Code活用の伴走型パーソナルトレーニング）を主事業とし、経営者と二人三脚で「AIに業務を任せる仕組み」を実装。「実行を強制する環境」を AI で構築する手法を、自社の実運用知見をもとに発信している。

▸ 代表 菅澤孝平 のプロフィール詳細を見る