HTMLフォームの作り方｜input・textarea・buttonの基本を初心者向けに解説

学習ロードマップ
2026.06.24

HTMLフォームは、ユーザーが入力した内容を送信するための部品です。

お問い合わせフォーム、検索フォーム、ログインフォーム、会員登録フォームなど、WebサイトやWebアプリではよく使われます。

フォームの見た目はHTMLとCSSで作ります。

入力された内容を受け取って処理する部分は、PHPやNode.jsなどのサーバー側で作ります。

この記事では、HTMLでフォームを作る基本を、実際のコードを書きながら解説します。

この記事で作るフォーム

この記事では、お問い合わせフォームのような画面を作ります。

使う主なHTMLタグは次の通りです。

タグ役割
<form>フォーム全体を囲む
<label>入力欄の説明を書く
<input>1行の入力欄を作る
<textarea>複数行の入力欄を作る
<select>選択式の入力欄を作る
<button>送信ボタンを作る

最終的に、名前、メールアドレス、件名、問い合わせ種別、本文、送信ボタンを持つフォームを作ります。

作業用フォルダとファイルを作る

まず、練習用のフォルダを作ります。

デスクトップやドキュメントなど、分かりやすい場所に次の名前でフォルダを作ってください。

html-form-practice

Visual Studio Codeでこのフォルダを開きます。

  1. Visual Studio Codeを開く
  2. 「ファイル」をクリックする
  3. 「フォルダーを開く」をクリックする
  4. html-form-practiceフォルダを選ぶ

フォルダを開いたら、次の2つのファイルを作ります。

index.html
style.css

index.htmlにはHTMLを書きます。

style.cssには見た目を整えるCSSを書きます。

基本のフォームを作る

まず、index.htmlにお問い合わせフォームのHTMLを書きます。

今回は追記ではなく、index.html全体を次のコードに書き換えてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLフォームの練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <main class="form-container">
    <h1>お問い合わせフォーム</h1>

    <form action="#" method="post">

      <div class="form-item">
        <label for="name">お名前</label>
        <input type="text" id="name" name="name" placeholder="山田 太郎">
      </div>

      <div class="form-item">
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" placeholder="sample@example.com">
      </div>

      <div class="form-item">
        <label for="subject">件名</label>
        <input type="text" id="subject" name="subject" placeholder="お問い合わせの件名">
      </div>

      <div class="form-item">
        <label for="category">お問い合わせ種別</label>
        <select id="category" name="category">
          <option value="">選択してください</option>
          <option value="question">質問</option>
          <option value="request">依頼</option>
          <option value="other">その他</option>
        </select>
      </div>

      <div class="form-item">
        <label for="message">お問い合わせ内容</label>
        <textarea id="message" name="message" rows="6" placeholder="お問い合わせ内容を入力してください"></textarea>
      </div>

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

    </form>
  </main>

</body>
</html>

次に、style.cssにCSSを書きます。

style.css全体を次のコードに書き換えてください。

body {
  font-family: sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  padding: 40px;
}

.form-container {
  max-width: 600px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
}

h1 {
  font-size: 28px;
  margin-bottom: 24px;
}

.form-item {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
}

input,
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

textarea {
  resize: vertical;
}

button {
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
}

ここまで書いたら、index.htmlとstyle.cssを保存します。

画面で確認する

index.htmlをブラウザで開きます。

Visual Studio Codeのファイル一覧からindex.htmlを右クリックして、「既定のブラウザーで開く」を選びます。

または、エクスプローラーでindex.htmlをダブルクリックして開いても確認できます。

画面にお問い合わせフォームが表示されればOKです。

formタグの基本

フォーム全体は、<form>タグで囲みます。

<form action="#" method="post">
  フォームの部品を書く
</form>

actionには、フォームの送信先を書きます。

今回はHTMLの練習なので、仮の値として#を入れています。

実際にPHPで処理する場合は、次のように送信先のPHPファイルを書くことがあります。

<form action="contact.php" method="post">

methodには、送信方法を書きます。

method使う場面
get検索フォームなど、URLに条件を含めたい場合
postお問い合わせフォームやログインフォームなど、入力内容を送信する場合

お問い合わせフォームでは、基本的にpostを使います。

inputタグの基本

<input>は、1行の入力欄を作るタグです。

文字を入力する欄は、次のように書きます。

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

メールアドレス用の入力欄は、type="email"を使います。

<input type="email" id="email" name="email">

typeには、入力欄の種類を指定します。

type内容
text通常のテキスト入力
emailメールアドレス入力
passwordパスワード入力
number数字入力
date日付入力
checkboxチェックボックス
radioラジオボタン

placeholderを使うと、入力前の案内文を表示できます。

<input type="text" name="name" placeholder="山田 太郎">

name属性は、フォーム処理で重要です。

PHPなどのサーバー側では、このnameを使って入力内容を受け取ります。

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

PHP側では、次のように受け取ることがあります。

$_POST["username"]

つまり、フォームを作るときはname属性を忘れないようにします。

label・textarea・select・buttonの基本

<label>は、入力欄の説明を書くためのタグです。

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

labelのforと、入力欄のidを同じ値にします。

このように書くと、ラベルをクリックしたときに対応する入力欄を選択できます。

複数行の入力欄を作る場合は、<textarea>を使います。

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

rowsには、表示する行数を指定します。

選択式の入力欄を作る場合は、<select>と<option>を使います。

<label for="category">お問い合わせ種別</label>
<select id="category" name="category">
  <option value="">選択してください</option>
  <option value="question">質問</option>
  <option value="request">依頼</option>
  <option value="other">その他</option>
</select>

optionのvalueには、送信される値を書きます。

画面に表示される文字と、送信される値は別にできます。

送信ボタンは、<button>で作ります。

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

type="submit"を指定すると、ボタンを押したときにフォームが送信されます。

必須入力にする方法

入力を必須にしたい場合は、requiredを使います。

たとえば、お名前とメールアドレスを必須にする場合は、次のように書きます。

<input type="text" id="name" name="name" required>

<input type="email" id="email" name="email" required>

textareaにもrequiredをつけられます。

<textarea id="message" name="message" rows="6" required></textarea>

requiredをつけると、未入力のまま送信しようとしたときに、ブラウザ側で入力を求める表示が出ます。

ただし、ブラウザ側のチェックだけで完了とは考えません。

実際のフォームでは、PHPなどのサーバー側でも入力チェックを行います。

チェックボックスとラジオボタン

チェックボックスは、複数選択できる入力です。

<p>興味のある内容</p>

<label>
  <input type="checkbox" name="interest" value="html">
  HTML
</label>

<label>
  <input type="checkbox" name="interest" value="css">
  CSS
</label>

<label>
  <input type="checkbox" name="interest" value="javascript">
  JavaScript
</label>

ラジオボタンは、複数の選択肢から1つだけ選ぶ入力です。

<p>希望する連絡方法</p>

<label>
  <input type="radio" name="contact" value="email">
  メール
</label>

<label>
  <input type="radio" name="contact" value="phone">
  電話
</label>

ラジオボタンでは、同じグループのnameを同じ値にします。

上の例では、どちらもname="contact"にしています。

これにより、「メール」か「電話」のどちらか一方だけを選べるようになります。

フォームでよくあるミス

HTMLフォームでよくあるミスは、name属性を書き忘れることです。

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

このようにnameがないと、サーバー側で入力内容を受け取りにくくなります。

フォーム処理まで考えるなら、次のようにnameを書きます。

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

もう一つ多いのは、labelのforと入力欄のidが合っていないことです。

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

この場合、for="username"とid="name"が一致していません。

正しくは、次のように同じ値にします。

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

また、送信ボタンのtypeを忘れることもあります。

<button>送信する</button>

フォームの送信ボタンとして使うなら、次のように書いておくと分かりやすいです。

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

まとめ

HTMLフォームは、ユーザーが入力した内容を送信するための仕組みです。

基本的には、<form>タグの中に、input、textarea、select、buttonなどを入れて作ります。

フォームを作るときに特に重要なのは、次の点です。

  • formタグでフォーム全体を囲む
  • actionに送信先を書く
  • methodに送信方法を書く
  • inputにはname属性を書く
  • labelのforと入力欄のidを合わせる
  • 複数行の入力にはtextareaを使う
  • 選択式の入力にはselectを使う
  • 送信ボタンにはtype="submit"を指定する

HTMLだけでは、送信された内容を保存したり、メール送信したりすることはできません。

フォームの見た目をHTMLとCSSで作り、送信後の処理はPHPやNode.jsなどのサーバー側で作ります。

まずは、HTMLでフォームの形を作れるようになり、そのあとPHPなどで入力内容を受け取る練習へ進むと分かりやすいです。

タイトルとURLをコピーしました