Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<form>

『<form>』はユーザーが入力したデータをサーバーに送信するためのフォームコンテナで、送信先・送信方法などを属性で指定します。

構文

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

属性一覧

属性	概要
action	フォームデータの送信先URLを指定します。省略すると現在のページのURLに送信されます。
method	送信方法を指定します。『get』（URLにデータを付加）か『post』（リクエストボディに含める）を指定します。
enctype	送信データのエンコード形式を指定します。ファイルアップロード時は『multipart/form-data』を指定します。
novalidate	この属性を付けると、ブラウザ標準のバリデーション（入力チェック）を無効にします。
autocomplete	フォーム全体に対してオートコンプリートを有効（『on』）・無効（『off』）にします。
target	送信結果を表示するウィンドウを指定します。『_blank』で新しいタブに表示します。

サンプルコード

<!-- 基本的なお問い合わせフォーム -->
<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>

<!-- ファイルアップロードフォーム -->
<form action="/upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">アップロード</button>
</form>

実行結果

お名前・メールアドレスの入力欄とテキストエリア、送信ボタンが表示されます。「送信する」ボタンをクリックすると入力内容が検証され、問題がなければ『/contact.php』に POST 送信されます。

概要

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

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

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