<form>

<form action="送信先URL" method="post">
  <!-- フォーム部品をここに配置 -->
  <input type="text" name="username">
  <button type="submit">送信</button>
</form>

sample_form.html

<!-- 基本的なお問い合わせフォーム（POST送信） -->
<form action="/contact.php" method="post" autocomplete="on">

  <div>
    <label for="name">お名前（必須）</label>
    <input type="text" id="name" name="name" required>
  </div>

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

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

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

</form>

<!-- 検索フォーム（GET送信）: URLにパラメータが付く -->
<form action="/search" method="get">
  <input type="search" name="q" placeholder="キーワードを入力">
  <button type="submit">検索</button>
</form>
<!-- 送信後のURL例: /search?q=HTML -->

<!-- ファイルアップロードフォーム（enctype必須） -->
<form action="/upload.php" method="post" enctype="multipart/form-data">
  <label for="file">ファイルを選択：</label>
  <input type="file" id="file" name="file" accept="image/*">
  <button type="submit">アップロード</button>
</form>

お名前・メールアドレスの入力欄とテキストエリア、送信ボタンが表示されます。「送信する」ボタンをクリックすると入力内容が検証され、問題がなければ『/contact.php』に POST 送信されます。検索フォームは送信後にURLが『/search?q=入力値』の形式になります。ファイルアップロードフォームでは画像ファイルのみ選択できます。

サンプルページはこちら

JavaScriptの『FormData』オブジェクトを使うと、フォームの入力値を簡単に取得してAJAX送信できます。ページをリロードせずにデータを送信したい場合に活用します。

<form id="contactForm">
  <input type="text" name="name" placeholder="お名前" required>
  <input type="email" name="email" placeholder="メールアドレス" required>
  <textarea name="message" rows="4"></textarea>
  <button type="submit">送信</button>
</form>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault(); // デフォルトの送信を阻止

  var formData = new FormData(this); // フォームの入力値を自動収集

  // 個別の値を取得
  console.log(formData.get('name'));
  console.log(formData.get('email'));

  // fetch でAJAX送信
  fetch('/api/contact', {
    method: 'POST',
    body: formData // Content-Typeは自動でmultipart/form-dataになる
  })
  .then(function(res) { return res.json(); })
  .then(function(data) {
    alert('送信しました');
  });
});
</script>

フォームのデフォルトスタイルはブラウザごとに異なります。統一されたデザインにするには、ブラウザのデフォルトスタイルを上書きするCSSを書きます。

<style>
  form { max-width: 480px; }

  /* ラベルと入力欄を縦並びにする */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
  }

  /* 入力欄の共通スタイル */
  input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
  }

  /* フォーカス時に枠線を強調 */
  input:focus, textarea:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
  }

  /* エラー状態 */
  input:invalid:not(:placeholder-shown) {
    border-color: #e74c3c;
  }

  /* 送信ボタン */
  button[type="submit"] {
    padding: 10px 24px;
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
  }
  button[type="submit"]:hover { background: #2c6fbc; }
</style>

『method="get"』は検索フォームのようにURLにデータを残したい場合に適しており、『method="post"』はパスワードや個人情報など、URLに含めたくないデータの送信に使います。パスワードや個人情報を送信するフォームには必ず『method="post"』を使い、かつHTTPS通信であることを確認してください。

『enctype』属性はデフォルトが『application/x-www-form-urlencoded』で、通常のテキストデータの送信には問題ありません。ファイルアップロード機能を含む場合は必ず『multipart/form-data』を指定します。指定を忘れるとファイルが正しく送信されません。

フォームの中に配置できる入力部品（テキスト入力など）については 『input（テキスト系）』 をご覧ください。

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

3 以降 ○

2 以前 ×

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

2 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

『FormData』APIを使うと、フォームのデータをJavaScriptで簡単に取得・送信できます。Ajax（非同期）でフォームを送信する際の標準的な方法です。

<form id="contact-form">
  <label for="name">お名前</label>
  <input type="text" id="name" name="name" required>

  <label for="message">メッセージ</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">送信</button>
  <p id="result"></p>
</form>

<script>
  document.getElementById('contact-form').addEventListener('submit', function(e) {
    e.preventDefault(); // デフォルトの送信を止める

    // FormData でフォームのデータを一括取得
    var formData = new FormData(this);

    // fetch APIで非同期送信
    fetch('/api/contact', {
      method: 'POST',
      body: formData // Content-Typeは自動でmultipart/form-dataになる
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      document.getElementById('result').textContent = '送信が完了しました。';
    })
    .catch(function(error) {
      document.getElementById('result').textContent = '送信に失敗しました。';
    });
  });
</script>

フォームのアクセシビリティを高めるためのポイントをまとめます。