0Pricing
HTML Academy · レッスン

form要素：action、method、enctype

action、method、enctypeを指定してform要素を設定します。

「form要素：action、method、enctype」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

フォームとは

HTMLフォームは、ユーザーがサーバーにデータを送信するための基本的な手段です：

  • ログインと登録
  • 検索クエリ
  • 購入手続きと支払い
  • 問い合わせとフィードバック

すべてのフォームは<form>要素から始まります。

form要素

<form>要素は、すべてのフォームコントロールを囲みます：

<form action="/submit" method="post">
  <!-- form controls go here -->
  <button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
     to the URL specified in action using the method specified -->

action属性

action属性は、フォームデータの送信先を指定します：

<form action="/api/login">...</form>      <!-- relative path -->
<form action="https://api.example.com/form">...</form>  <!-- absolute -->
<form action="">...</form>                 <!-- current URL (empty) -->
<form>...</form>                           <!-- no action = current URL -->

method属性

method属性は、データの送信方法を制御します：

<form method="get">...</form>
<!-- GET: appends data to URL as query string
     example.com/search?q=html&sort=date
     Used for: search forms, filters, bookmarkable results -->

<form method="post">...</form>
<!-- POST: sends data in the request body
     Data is not visible in the URL
     Used for: login, registration, file uploads, sensitive data -->

GETとPOSTの違い

GETとPOSTには異なる特徴があります：

  • GET — URLにデータを含める（長さに制限あり）、ブックマーク可能、キャッシュされる、冪等
  • POST — 本文にデータを含める（長さに制限なし）、ブックマーク不可、キャッシュされない、冪等ではない

目安として、送信によってサーバーの状態が変わらない場合はGET、変わる場合はPOSTを使用します。

enctype属性

enctype属性は、POSTリクエスト用のフォームデータのエンコード方法を制御します：

<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">

<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">

novalidate属性

novalidate属性は、ブラウザー組み込みのバリデーションを無効にします：

<form action="/submit" method="post" novalidate>
  <!-- Validation handled by JavaScript instead -->
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

formのtarget属性

target属性は、レスポンスを表示する場所を制御します：

<form action="/search" target="_blank">
  <!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->

formのautocomplete属性

autocomplete属性は、ブラウザーの自動入力を制御します：

<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">

<!-- On (default): allow autofill -->
<form autocomplete="on">

<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->

JavaScriptでフォームを送信する

デフォルトの送信を防ぎ、JavaScriptで処理します：

<form id="contact-form" action="/contact" method="post">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();  // stop normal browser submission
  const data = new FormData(e.target);
  const res = await fetch('/contact', { method: 'POST', body: data });
  // handle response...
});
</script>

actionとmethodを組み合わせる

actionとmethodを正しく指定したフォームの完全な例：

<form action="/api/newsletter" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->

確認問題

ファイルをアップロードするときは、どのフォームのmethodを使用すべきですか？

まとめ：form要素

フォーム要素の要点：

  • action — フォームデータを受け取るURL
  • method="get" — URLにデータを含める（検索、フィルター）
  • method="post" — 本文にデータを含める（機密データ、状態の変更）
  • enctype="multipart/form-data" — ファイルのアップロードに必須
  • novalidate — ブラウザーのバリデーションを無効にする

よくある質問

「form要素：action、method、enctype」レッスンは無料ですか？

はい。「form要素：action、method、enctype」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「form要素：action、method、enctype」で何を学びますか？

action、method、enctypeを指定してform要素を設定します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「form要素：action、method、enctype」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. form要素：action、method、enctype
  2. 入力タイプ：text、password、email、number、tel
  3. label要素とアクセシビリティ
  4. button要素：submit、reset、button
← HTML Academyに戻る