path: root/files/ja/learn/forms/index.html

---
title: HTML フォーム
slug: Learn/Forms
tags:
  - Beginner
  - Featured
  - Forms
  - Guide
  - HTML
  - Landing
  - Learn
  - Web
translation_of: Learn/Forms
---
<div>{{LearnSidebar}}</div>

<p class="summary">このモジュールでは、ウェブフォームの習得に役立つ一連の記事をそろえています。ウェブフォームは、ユーザーとやり取りするための強力なツールです — 通常、ユーザーデータを集めたり、ユーザーインターフェイスの制御に使われてきました。しかし歴史的および技術的な理由から、その能力を十分に生かして使用する方法は、必ずしも明確とは限りません。このガイドではウェブフォームの構造からスタイル、データの検証やサーバーへの送信まであらゆる本質的な側面を取り上げます。</p>

<h2 id="Prerequisites" name="Prerequisites">前提条件</h2>

<p>このモジュールを始める前に、少なくとも <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を一通り読んでおくべきです。ここでは簡単に理解できる{{anch("Introductory guides", "導入ガイド")}}が見つかり、<a href="/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームコントロール</a>ガイドも利用できます。</p>

<p>しかしそれ以外のモジュールは HTML 知識よりも少し高度です — ページにフォームウィジェットを置くのは簡単ですが、高度なフォームの機能や CSS や JavaScript を使わないと実際に活用できません。このため、その他の節を見る前にまずは <a href="/ja/docs/Learn/CSS">CSS</a> と <a href="/ja/docs/Learn/JavaScript">JavaScript</a> を学んでおくのをお勧めします。</p>

<p>上記のテキストは、ウェブフォームを HTML、CSS、JavaScript エリアに混ぜずに、独立したモジュールに置くことの良い指針です — フォーム要素は HTML要素より複雑で、最大限利用するには、関連する CSS と JavaScript テクニックを最大限活用する。</p>

<div class="note">
<p><strong>注</strong>: 自分のファイルを作ることができないコンピューター/タブレット/その他の端末で作業している場合、(大半の) コード例を <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことができます。</p>
</div>

<h2 id="Introductory_guides" name="Introductory_guides">導入ガイド</h2>

<dl>
 <dt><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのウェブフォーム</a></dt>
 <dd>このシリーズの最初の記事では ウェブフォーム作成のほんの最初を提供し、それには簡単なフォームのデザインや、適切な HTML 要素で実装することや、CSS で簡単なスタイルづけをすることや、データがサーバーに送られる方法などが含まれます。</dd>
 <dt><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a></dt>
 <dd>基本的な話と共に、ここではフォームの色々な部分に構造と意味を与えるのに使う要素を詳しく見ていきます。</dd>
</dl>

<h2 id="What_form_widgets_are_available" name="What_form_widgets_are_available">どんなフォームウィジェットが利用できますか？</h2>

<dl>
 <dt><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></dt>
 <dd>オリジナルの HTML {{htmlelement("input")}}タイプの詳細や、色々なデータ型を集めるのにどんなオプションが使えるかを見ていきます。</dd>
 <dt><a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 入力タイプ</a></dt>
 <dd>ここでは <code>&lt;input&gt;</code> 要素を深く見ていき、HTML5 リリースにて追加された入力タイプや、さまざまな UI コントロールとデータコレクションの改良を見ます。さらには、{{htmlelement('output')}} 要素も見ます。</dd>
 <dt><a href="/ja/docs/Learn/Forms/Other_form_controls">その他のフォームコントロール</a></dt>
 <dd>次には<code>&lt;input&gt;</code> 以外のフォームコントロールと関連するツール、例えば {{htmlelement('select')}}、{{htmlelement('textarea')}}、{{htmlelement('meter')}}、{{htmlelement('progress')}} を見ていきます。</dd>
</dl>

<h2 id="Form_styling_guides" name="Form_styling_guides">フォームのスタイルガイド</h2>

<dl>
 <dt><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">ウェブフォームをスタイリングする</a></dt>
 <dd>この記事では基本的なスタイリング作業のために知るべき基本を含む、フォームを CSS でスタイリングするための入門を紹介します。</dd>
 <dt><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">ウェブフォームの高度なスタイリング</a></dt>
 <dd>ここでは、スタイルが難しい要素を扱うために必要な、さらに高度なフォームスタイリングテクニックを紹介します。</dd>
 <dt><a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI 擬似クラス</a></dt>
 <dd>現在の状態に応じて制御される HTML フォームコントロールを可能とする、UI 擬似クラス の入門です。</dd>
</dl>

<h2 id="Validating_and_submitting_form_data" name="Validating_and_submitting_form_data">フォームデータを検証して送信する</h2>

<dl>
 <dt><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">クライアント側のフォームデータ検証</a></dt>
 <dd>データ送信だけで充分ではありません — ユーザーがフォームに記入したデータが、我々が処理に成功するような正しいフォーマットであり、アプリケーションが破綻しないかを確認する必要があります。またユーザーが正しくフォームを記入してアプリを使うのにイライラしないよう手助けしたいです。フォーム検証はこの目的を達成するのに役立ちます — この記事では知っておくべきことを教えます。</dd>
 <dt><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの</a><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">送信</a></dt>
 <dd>この記事ではユーザーがフォームを送信するときに何が起こるのかを見ます — データがどこに行くのか、そしてそこでデータを受けたらどう扱うかなどです。また、フォームデータ送信に関連するセキュリティ上の懸念もその一部です。</dd>
</dl>

<h2 id="Advanced_guides" name="Advanced_guides">高度なガイド</h2>

<p>下記の記事は学習コースに必須ではないですが、上記のテクニックをマスターしてそれ以上知りたいときには、興味深く役立つものでしょう。</p>

<dl>
 <dt><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">カスタムフォームコントロールの作成方法</a></dt>
 <dd>場合によってはネイティブのフォームウィジェットが必要となるものを提供していないことがあるでしょう。例えばスタイリングや機能で。この場合、生の HTML から自分自身のフォームウィジェットを作る必要があります。この記事ではその方法と考慮すべき点を、実際のケーススタディと一緒に説明します。</dd>
 <dt><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></dt>
 <dd>この記事では、標準フォームの送信ではなく、カスタム JavaScript 内で HTTP リクエストを組み立てて送る方法を見ます。またそうしたい理由と、そうする意味も見ていきます(<a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a>もご覧ください)。</dd>
</dl>

<dl>
 <dt><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">フォームコントロール用の CSS プロパティ互換性テーブル</a></dt>
 <dd>この最後の記事では、どの CSS プロパティがフォーム要素に互換性があるのかを引くことのできるハンディリファレンスを提供します。</dd>
</dl>

<dl>
</dl>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/HTML/Element#Forms">HTML フォーム要素リファレンス</a></li>
 <li><a href="/ja/docs/Web/HTML/Element/input">HTML &lt;input&gt; タイプリファレンス</a></li>
 <li><a href="/ja/docs/Web/HTML/Attributes">HTML 属性リファレンス</a></li>
</ul>