HTMLフォームの作り方入門｜名前・メール・メッセージ入力欄を作る基本例

HTML
2025.10.01

こんにちは！駆け出しエンジニアのまるです👓🦍

前回はHTMLタグについて解説しました。今回はその応用として、Webページに欠かせないフォームの作り方を紹介します。

お問い合わせフォームや会員登録フォームなど、入力欄を作るときに必ず登場するのが「HTMLフォーム」です。

まずは「名前」「メール」「メッセージ」を入力できるシンプルなフォームを作ってみましょう！

フォームとは？

フォームとは、Webページからユーザーが入力した情報を送信できる仕組みのことです。

例えば：

  • お問い合わせページの「お名前・メール・内容」入力欄
  • 会員登録やログイン画面
  • ショッピングサイトの購入画面

👉 フォームがあることで、ただ見るだけのページから「やり取りできるページ」に進化します。

基本フォームのコード例

<form action="#" method="post">
  <label>お名前：<input type="text" name="name"></label><br>
  <label>メール：<input type="email" name="email"></label><br>
  <label>メッセージ：<textarea name="message"></textarea></label><br>
  <input type="submit" value="送信">
</form>

コードの解説

  1. <form>
    フォーム全体を囲む箱です。
    ・action=”#”　→　入力した内容をどこに送るか（今は「＃」で仮）
    ・method=”post”　→　情報の送り方（基本はこの書き方でOK）
    👉フォームを作る時は、まずこの「大きな箱」で囲みます。
  2. <input type=”text”>
    これは１行だけの文字を入力する欄です。
    ・「お名前」や「ユーザー名」を入れるのに使います。
  3. <input type=”email”>
    これはメールアドレス専用の欄です。
    ・＠が入っていないとエラーになるなど、ちゃんとチェックしてくれます。
  4. <textarea>
    これはたくさんの文字を書ける大きな入力欄です。
    ・お問い合わせの内容やコメントを書く場所に使います。
  5. <input type=”submit”>
    これを押すと、入力した内容が送られます。

表示結果

ブラウザで表示すると、
「お名前」「メール」「メッセージ」と入力欄が並び、最後に「送信ボタン」が表示されます。

まとめ

  • <form> → フォーム全体を囲む箱
  • <input type=”text”> → 一行の文字入力
  • <input type=”email”> → メールアドレス専用
  • <textarea> → 複数行の入力欄
  • <input type=”submit”> → 送信ボタン

今回はHTMLフォームの基礎として「名前・メール・メッセージを入力する基本フォーム」を作りました。

このようにフォームを使うことで、ユーザーとWebページが“やり取り”できるようになります。

次回は、チェックボックスやラジオボタンといった、さらに便利なフォーム要素について紹介します！

フォームはWebページに命を吹き込む道具！今回覚えた基本フォームで、まずは”入力できるページ”を作ってみよう。
次回は、さらにパワーアップして”選べるフォーム”を作っていくよ！

コメント