diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-25 01:02:49 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-31 23:52:30 +0900 |
| commit | f893c82acf3213515221cb0c113237ae165a0277 (patch) | |
| tree | 45eafb0aa24be93e23c27af62a6f976fe1782338 /files/ja | |
| parent | 89422f0dbce86857d72c54e0615dfef6936bd1d9 (diff) | |
| download | translated-content-f893c82acf3213515221cb0c113237ae165a0277.tar.gz translated-content-f893c82acf3213515221cb0c113237ae165a0277.tar.bz2 translated-content-f893c82acf3213515221cb0c113237ae165a0277.zip | |
2022/01/03 時点の英語版に同期
Diffstat (limited to 'files/ja')
| -rw-r--r-- | files/ja/learn/forms/your_first_form/index.md | 370 |
1 files changed, 189 insertions, 181 deletions
diff --git a/files/ja/learn/forms/your_first_form/index.md b/files/ja/learn/forms/your_first_form/index.md index a5878e3ce8..ebd2140f36 100644 --- a/files/ja/learn/forms/your_first_form/index.md +++ b/files/ja/learn/forms/your_first_form/index.md @@ -2,187 +2,196 @@ title: 初めてのフォーム slug: Learn/Forms/Your_first_form tags: - - Beginner + - 初心者向け + - CSS - CodingScripting - - Example - - Forms - - Guide - - HTML - - Learn - - Web - - ウェブ - - ガイド + - 例 - フォーム - - 初心者向け + - ガイド + - HTML - 学習 + - ウェブ translation_of: Learn/Forms/Your_first_form --- -<div> -<div>{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</div> -</div> - -<p class="summary">このシリーズの最初の記事では、簡単なフォームの設計、HTML フォームコントロールとその他の HTML 要素を使用した正しい実装、CSS によるとても簡単なスタイル付け、データをサーバーに送る方法を含めた、ウェブフォームを作成する本当に初歩的な経験をします。サブトピックは、モジュールの後で詳しく展開していきます。</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML を理解する</a>を理解していること。</td> - </tr> - <tr> - <th scope="row">目的:</th> - <td>ウェブフォームとは何か、何に使うのか、どうデザインするのか、サンプル事例に必要な基本の HTML 要素について熟知する。</td> - </tr> - </tbody> +{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}} + +このシリーズの最初の記事では、簡単なフォームの設計、HTML フォームコントロールとその他の HTML 要素を使用した正しい実装、CSS によるとても簡単なスタイル付け、データをサーバーに送る方法を含めた、ウェブフォームを作成する本当に初歩的な経験をします。 +サブトピックは、モジュールの後で詳しく展開していきます。 + +<table> + <tbody> + <tr> + <th scope="row">前提条件:</th> + <td> + 基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML を理解する</a>を理解していること。 + </td> + </tr> + <tr> + <th scope="row">目的:</th> + <td> + ウェブフォームとは何か、何に使うのか、どうデザインするのか、サンプル事例に必要な基本の HTML 要素について熟知する。 + </td> + </tr> + </tbody> </table> -<h2 id="What_are_HTML_forms" name="What_are_HTML_forms">ウェブフォームとは何か?</h2> +## ウェブフォームとは何か? -<p><strong>ウェブフォーム</strong>とは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。フォームによって、ユーザーは ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり (モジュール後半の<a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">サーバーにデータを送る</a>を見てください) 、クライアント側ですぐにインターフェイスを更新する(例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたり)こともあります。</p> +**ウェブフォーム**とは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。ユーザーはフォームによって、ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり（このモジュール後半の[サーバーにデータを送る](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data)を見てください）、クライアント側ですぐにインターフェイスを更新する（例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたりする）こともあります。 -<p>ウェブフォームは 1 つ以上の<strong>フォームコントロール</strong>(<strong>ウィジェット</strong>ともいいます)と、フォーム全体を構成するのに役立つ追加要素 — よく <strong>HTML フォーム</strong>と呼ばれます — とで作られます。それらのコントロールはテキストフィールド (単一行または複数行)、ドロップダウンボックス、ボタン、チェックボックスあるいはラジオボタンがあります。たいていは {{htmlelement("input")}} 要素を使って作成されますが、その他の要素もあります。</p> +ウェブフォームは 1 つ以上の**フォームコントロール**（**ウィジェット**ともいいます）と、フォーム全体を構成するのに役立つ追加要素 — よく **HTML フォーム**と呼ばれます — とで作られます。それらのコントロールは単一行または複数行のテキストフィールド、ドロップダウンボックス、ボタン、チェックボックス、ラジオボタンがあります。たいていは {{htmlelement("input")}} 要素を使って作成されますが、その他の要素もあります。 -<p>フォームコントロールは、特定フォームの値が入力されるのを強制する(<strong>フォーム検証</strong>)ためにもプログラミングされ、視力のある・盲目のユーザーいずれにとっても、用途を説明するラベルと対になります。</p> +フォームコントロールは、特定フォームの値が入力されるのを強制するためにもプログラミングされ（**フォーム検証**）、目の見えるユーザーと目の不自由なユーザーの両方に対して用途を説明するテキストのラベルと対になります。 -<h2 id="Designing_your_form" name="Designing_your_form">フォームを設計する</h2> +## フォームを設計する -<p>コードを書き始める前に、そこから離れてフォームについて考える時間をとるとよいでしょう。簡単なモデルを作ると、あなたがユーザーに入力を依頼したいデータの適切なセットを定義することの助けになります。ユーザー体験 (UX) の観点では、フォームが大規模になるとユーザーが不満を持って離れるリスクが高まると覚えておくことが重要です。簡単に、かつ集中するようにしてください。本当に必要なことだけをたずねてください。</p> +コードを書き始める前に、そこから離れてフォームについて考える時間をとるとよいでしょう。簡単なモデルを作ると、ユーザーに入力を依頼したいデータの適切なセットを定義することの助けになります。ユーザー体験 (UX) の観点では、フォームが大規模になるとユーザーが不満を持って離れるリスクが高まると覚えておくことが重要です。簡単に、かつ集中するようにしてください。本当に必要なことだけを尋ねてください。 -<p>フォームの設計は、サイトやアプリケーションを構築する際の大事なステップです。フォームのユーザー体験まで扱うと本記事の対象を超えてしまいますが、そこまで踏み込みたい場合は以下の記事をご覧ください。</p> +フォームの設計は、サイトやアプリケーションを構築する際の大切なステップです。フォームのユーザー体験まで扱うと本記事の対象を超えてしまいますが、そこまで踏み込みたい場合は以下の記事をご覧ください。 -<ul> - <li>Smashing Magazine に<a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external">フォームの UX に関するよい記事</a>がありますが、もっとも重要な記事は <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external">Extensive Guide To Web Form Usability</a> でしょう。</li> - <li>UXMatters もまた、<a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">複数ページのフォーム</a>といった複雑なことへの<a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external">基本的なベストプラクティス</a>から良いアドバイスを得られる、思慮深いリソースです。</li> -</ul> +- Smashing Magazine に[フォームの UX に関するよい記事](https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/)がありますが、もっとも重要な記事は [Extensive Guide To Web Form Usability](https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/) でしょう。 +- UXMatters もまた、[基本的なベストプラクティス](https://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php)から[複数ページのフォーム](https://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php)といった複雑なことに至るまで、良いアドバイスを得られる、思慮深いリソースです。 -<p>本記事では、シンプルな連絡フォームを作成します。簡単に図を描いてみましょう。</p> +本記事では、シンプルな問い合わせフォームを作成します。簡単に図を描いてみましょう。 -<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p> + -<p>このフォームには、3 つのテキストフィールドと 1 つのボタンがあります。要するに、ユーザーへ名前(Name)、メールアドレス(E-mail)、送信したいメッセージ(Message)をたずねます。ボタンを押すと、データをウェブサーバーに送信します。</p> +このフォームには、3 つのテキストフィールドと 1 つのボタンがあります。要するに、ユーザーへ名前 (Name)、メールアドレス (E-mail)、送信したいメッセージ (Message) を尋ねます。ボタンを押すと、データをウェブサーバーへ送信します。 -<h2 id="Get_your_hands_dirty_with_HTML" name="Get_your_hands_dirty_with_HTML">HTML を書きましょう</h2> +## アクティブラーニング: フォームの HTML の実装 -<p>これで、HTML に移ってフォームのコードを書く準備ができました。連絡フォームを作るために、以下の HTML 要素を使用します: {{HTMLElement("form")}}、{{HTMLElement("label")}}、{{HTMLElement("input")}}、{{HTMLElement("textarea")}}、{{HTMLElement("button")}} です。</p> +これで、HTML に移ってフォームのコードを書く準備ができました。問い合わせフォームを作るために、以下の HTML 要素を使用します: {{HTMLElement("form")}}、{{HTMLElement("label")}}、{{HTMLElement("input")}}、{{HTMLElement("textarea")}}、{{HTMLElement("button")}} です。 -<p>前に進む前に、<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">簡単な HTML テンプレート</a>をローカルにコピーします — ここにフォームの HTML を入力します。</p> +前に進む前に、[簡単な HTML テンプレート](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)をローカルにコピーします。 — ここにフォームの HTML を入力します。 -<h3 id="The_HTMLElementform_element" name="The_HTMLElement(form)_element">{{HTMLElement("form")}} 要素</h3> +### `<form>` 要素 -<p>すべてのフォームは、以下のように {{HTMLElement("form")}} 要素から始まります:</p> +すべてのフォームは、以下のように {{HTMLElement("form")}} 要素から始まります。 -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> +```html +<form action="/my-handling-form-page" method="post"> -</form></pre> +</form> +``` -<p>これは、フォームを正式に定義します。これは {{HTMLElement("div")}} 要素や {{HTMLElement("p")}} 要素と同様にコンテナ要素ですが、フォームの動作を設定するための固有の属性もサポートします。すべての属性は省略可能ですが、少なくとも <a href="/ja/docs/Web/HTML/Attributes/action"><code>action</code></a> 属性と <a href="/ja/docs/Web/HTML/Attributes/method"><code>method</code></a>属性は常に設定することがベストプラクティスであると考えられます。</p> +これは、フォームを正式に定義します。これは {{HTMLElement("section")}} や {{HTMLElement("footer")}} 要素と同様にコンテナー要素ですが、フォームを含めるのに特化しています。フォームの動作方法を設定するための特有の属性もにも対応しています。すべての属性は省略可能ですが、少なくとも [`action`](/ja/docs/Web/HTML/Attributes/action) 属性と [`method`](/ja/docs/Web/HTML/Attributes/method) 属性は常に設定するのがふつうです。 -<ul> - <li><code>action</code> 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します</li> - <li><code>method</code> 属性は、データを送信するために使用する HTTP メソッド ( <code>get</code> または <code>post</code> ) を定義します</li> -</ul> +- `action` 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します。 +- `method` 属性は、データを送信するために使用する HTTP メソッド（`get` または `post`）を定義します。 -<div class="note"> -<p><strong>注</strong>: これらの属性がどのように働くかについて、詳しくは<a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信と取得</a>で説明しています。</p> -</div> +> **Note:** これらの属性がどのように働くかについて、詳しくは[フォームデータの送信](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data)で説明しています。 -<p>今は、上の {{htmlelement("form")}} 要素を HTML 本文に追加します。</p> +今のところは、上の {{htmlelement("form")}} 要素を HTML の {{htmlelement("body")}} に追加します。 -<h3 id="Add_widgets_with_the_HTMLElementlabel_HTMLElementinput_and_HTMLElementtextarea_elements" name="Add_widgets_with_the_HTMLElement(label)_HTMLElement(input)_and_HTMLElement(textarea)_elements">{{HTMLElement("label")}}、{{HTMLElement("input")}} および {{HTMLElement("textarea")}} 要素でウィジェットを追加する</h3> +### `<label>`、`<input>`、`<textarea>` 要素 -<p>連絡フォームはとてもシンプルで 3 つのテキストフィールドを持っており、それぞれに 対応した {{HTMLelement("label")}} がついています。</p> +問い合わせフォームはとてもシンプルで、 3 つのテキストフィールドがあり、それぞれに対応する {{HTMLelement("label")}} がついています。 -<ul> - <li>名前の入力フィールドは、基本的な単一行のテキストフィールドです。</li> - <li>メールアドレスの入力フィールドは、メールアドレスだけを受け付ける単一行のテキストフィールドです。</li> - <li>メッセージの入力フィールドは、基本的な複数行のテキストフィールドです。</li> -</ul> +- 名前の入力フィールドは、基本的な{{HTMLelement("input/text", "単一行のテキストフィールド")}}です。 +- メールアドレスの入力フィールドは、{{HTMLelement("input/email", "email 型の入力フィールド")}}です。メールアドレスだけを受け付ける単一行のテキストフィールドです。 +- メッセージの入力フィールドは {{HTMLelement("textarea")}} です。複数行のテキストフィールドです。 -<p>HTML コードで、それらは以下のようになります:</p> +これらのフォームウィジェットを実装するためには、 HTML コードとしては、以下のようなものが必要です。 -<pre class="brush:html; notranslate" dir="rtl"><form action="/my-handling-form-page" method="post"> - <ul> - <li> - <label for="name">Name:</label> - <input type="text" id="name" name="user_name"> - </li> - <li> - <label for="mail">E-mail:</label> - <input type="email" id="mail" name="user_email"> - </li> - <li> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </li> - </ul> -</form></pre> +```html +<form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name"> + </li> + <li> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email"> + </li> + <li> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </li> + </ul> +</form> +``` -<p>フォームのコードを上に見えるようなものに更新してください。</p> +フォームのコードを上記のようなものに更新してください。 -<p>{{HTMLelement("li")}} 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするため (後述) に置いています。すべての {{HTMLElement("label")}} 要素における、<a href="/ja/docs/Web/HTML/Attributes/for"> <code>for</code> </a> 属性の使い方に注目してください。これは、ラベルとフォームウィジェットを関連付けるための正式な方法です。この属性は、対応するウィジェットの <a href="/ja/docs/Web/HTML/Attributes/id"><code>id</code></a> を参照します。</p> +{{HTMLelement("li")}} 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするため (後述) に置いています。 +ユーザビリティとアクセシビリティのため、それぞれのフォームコントロールに明示的にラベルをつけます。 +[`for`](/ja/docs/Web/HTML/Attributes/for) 属性をすべての {{HTMLElement("label")}} 要素に使用し、その値として関連付けるフォームコントロールの [`id`](/ja/docs/Web/HTML/Global_attributes/id) を取ります。これで、フォームコントロールをラベルと関連付けることができます。 -<p>これには利点があります — フォームコントロールにラベルを関連付けて、ユーザーがマウス、トラックパッド、タッチデバイスでラベルをクリックすると対応するウィジェットがアクティブになり、スクリーンリーダーのユーザーに読み上げられるアクセシブルな名前が提供されます。この属性の利点をさらに知りたいのでしたら、こちらの記事ですべてを詳しく説明しています: <a href="/ja/docs/HTML/Forms/How_to_structure_an_HTML_form" title="HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構築方法</a>.</p> +これには利点があります — フォームコントロールにラベルを関連付けて、ユーザーがマウス、トラックパッド、タッチ端末でラベルをクリックすると、対応するウィジェットがアクティブになり、画面リーダーのユーザーに読み上げられるアクセシブルな名前が提供されます。この属性の利点をさらに知りたいのでしたら、 [HTML フォームの構築方法](/ja/docs/Learn/Forms/How_to_structure_a_web_form) の記事ですべてを詳しく説明しています。 -<p>{{HTMLElement("input")}} 要素でもっとも重要な属性は、<code>type</code> 属性です。この属性は {{HTMLElement("input")}} 要素の見た目や動作を定義するため、とても重要です。これは要素を根本的に変えるものですから、注意してください。詳しく知りたい場合は、<a href="/ja/docs/HTML/Forms/The_native_form_widgets" rel="external" title="HTML/Forms/The_native_forms_widgets">ネイティブフォームウィジェット</a>の記事をご覧ください。</p> +{{HTMLElement("input")}} 要素において、もっとも重要な属性は、`type` 属性です。 +この属性は {{HTMLElement("input")}} 要素の見た目や動作を定義するため、とても重要です。 +これについてもっと詳しいことは、[基本的なネイティブフォームコントロール](/ja/docs/Learn/Forms/Basic_native_form_controls)の記事にあります。 -<ul> - <li>本記事の例では、最初の input に {{HTMLelement("input/text")}} という値を使用しています (これは属性の既定値であり、制御や検証を行わずあらゆるテキストを受け入れる、単一行のテキストフィールドを表します) 。</li> - <li>2番目の input では、正しくフォーマットされた E メールアドレスのみを受け付ける単一行として定義された {{HTMLelement("input/email")}} という値を使用しています。この値はベーシックなテキストフィールドを、ユーザーによって入力されたデータをチェックするようにする "知的な" フィールドへと変化させます。またスマートフォンのように動的なキーボードのある端末で、E メールアドレスを入力するのにふさわしいキーボードレイアウト (例えばデフォルトで @ 記号があるもの) が表示されるようにします。フォームの検証について詳しく知りたい場合は、<a href="/ja/docs/HTML/Forms/Data_form_validation" title="HTML/Forms/Data_form_validation">データフォームの検証</a> の記事をご覧ください。</li> -</ul> +- このシンプルな例では、最初の input に {{HTMLelement("input/text", "text")}} という値を使用しています。これはこの属性の既定値です。 + これはあらゆるテキストを受け入れる、単一行のテキストフィールドを表します。 +- 2 番目の input では、 {{HTMLelement("input/email", "email")}} という値を使用しています。これは正しい形式のメールアドレスのみを受け付ける単一行のテキストフィールドを定義します。 + この値は基本的なテキストフィールドを、ユーザーによって入力されたデータをチェックするようにする「賢い」フィールドへと変化させます。 + また、スマートフォンのように動的なキーボードのある端末で、メールアドレスを入力するのにふさわしいキーボードレイアウト（例えば既定で @ 記号があるもの）が表示されるようにします。 + フォームの検証について詳しく知りたい場合は、[データフォームの検証](/ja/docs/Learn/Forms/Form_validation)の記事をご覧ください。 -<p>大事なことを言い忘れましたが、<code><input></code> と <code><textarea></textarea></code> の構文に注意してください。これは HTML の変わったことの 1 つです。<code><input></code> タグは空要素です。つまり、終了タグは不要です。一方 {{HTMLElement("textarea")}} は空の要素ではないので、適切な終了タグで閉じる必要があります。これは HTML フォームの特定の機能、つまりデフォルト値の定義方法に影響があります。{{HTMLElement("input")}} 要素のデフォルト値を定義するには、次のように <a href="/ja/docs/Web/HTML/Attributes/value"><code>value</code></a> 属性を使う必要があります。</p> +大事なことを言い忘れましたが、`<input>` と `<textarea></textarea>` の構文に注意してください。 +これは HTML の奇妙な点の 1 つです。 +`<input>` タグは空要素です。つまり、終了タグは不要です。 +一方 {{HTMLElement("textarea")}} は空の要素ではないので、適切な終了タグで閉じる必要があります。これは HTML フォームの特定の機能、つまり既定値の定義方法に影響があります。 +{{HTMLElement("input")}} 要素の既定値を定義するには、次のように [`value`](/ja/docs/Web/HTML/Attributes/value) 属性を使う必要があります。 -<pre class="brush:html; notranslate"><input type="text" value="デフォルトではこの要素にはこの文章が挿入されます" /></pre> +```html +<input type="text" value="既定でこの要素にはこの文章が挿入されます"> +``` -<p>また、{{HTMLElement("textarea")}} のデフォルト値を定義したい場合は、デフォルト値を {{HTMLElement("textarea")}} の開始タグと終了タグの間に書いてください。以下のとおりです：</p> +一方、 {{HTMLElement("textarea")}} の既定値を定義したい場合は、次のように既定値を {{HTMLElement("textarea")}} の開始タグと終了タグの間に書いてください。 -<pre class="brush:html; notranslate"><textarea> -デフォルトではこの要素にはこの文章が挿入されます -</textarea></pre> +```html +<textarea> +既定でこの要素にはこの文章が挿入されます +</textarea> +``` -<h3 id="And_a_HTMLElementbutton_to_finish" name="And_a_HTMLElement(button)_to_finish">{{HTMLElement("button")}} を追加する</h3> +### `<button>` 要素 -<p>フォームはほぼできあがりました。あとは、ユーザーがフォームに記入したらデータを"送信"するためのボタンを追加します。これは、{{HTMLElement("button")}} 要素を使用して簡単にできます: 閉じタグの <code></ul></code> の直前に次の行を追加します:</p> +フォームはほぼできあがりました。あとは、ユーザーがフォームに記入したらデータを「送信」するためのボタンを追加します。 +これは、{{HTMLElement("button")}} 要素を使用して簡単にできます。終了タグ `</ul>` の直前に次の行を追加してください。 -<pre class="brush:html; notranslate"><li class="button"> - <button type="submit">メッセージを送信</button> -</li></pre> +```html +<li class="button"> + <button type="submit">メッセージを送信</button> +</li> +``` -<p>{{htmlelement("button")}} 要素は <code>type</code> 属性を受け付けます。3 種類の値を受け付けて、これは <code>submit</code>、<code>reset</code>、<code>button</code> です。</p> +{{htmlelement("button")}} 要素は `type` 属性を受け入れます。これは `submit`、`reset`、`button` の 3 種類の値のうち 1 つを受け入れます。 -<ul> - <li><code>submit</code> ボタンをクリックするとフォームのデータを、{{HTMLElement("form")}} 要素の <code>action</code> 属性で定義した ウェブページへ送信します。</li> - <li><code>reset</code> ボタンをクリックすると、直ちにすべてのフォームウィジェットを既定値にリセットします。UX の観点ではこのボタンはバッドプラクティスであると考えられており、どうしても必要な理由がない限りこのボタンの使用は避けるようにします。</li> - <li><code>button</code> ボタンをクリックすると...何もしません! おかしなことのように見えますが、JavaScript を使用してカスタムボタンを作成するために驚くほど役立ちます。</li> -</ul> +- `submit` ボタン（既定値）をクリックすると、フォームのデータを {{HTMLElement("form")}} 要素の `action` 属性で定義したウェブページへ送信します。 +- `reset` ボタンをクリックすると、直ちにすべてのフォームウィジェットを既定値にリセットします。 UX の観点では、このボタンは悪い行為であると考えられており、必要な理由がない限りこのボタンは使用しないようにしてください。 +- `button` ボタンをクリックすると...何もしません! おかしなことのように見えますが、独自のボタンを作成するのに驚くほど役立ちます。 JavaScript でその機能を定義することができます。 -<div class="note"> -<p>メモ: {{HTMLElement("input")}} 要素で対応する <code>type</code> を指定して、ボタンを作成することもできます。例えば <code><input type="submit"></code> のように。{{HTMLElement("button")}} 要素との大きな違いは、{{HTMLElement("input")}} 要素ではラベルとしてプレーンテキストしか許容しませんが、{{HTMLElement("button")}} 要素ではすべての HTML コンテンツを使用して、もっと複雑でクリエイティブなボタンコンテンツを作成できます。</p> -</div> +> **Note:** {{HTMLElement("input")}} 要素を使用して、対応する `type` を指定してボタンを作成することもできます。例えば `<input type="submit">` のように。{{HTMLElement("button")}} 要素との大きな違いは、{{HTMLElement("input")}} 要素ではラベルとしてプレーンテキストしか許容しませんが、{{HTMLElement("button")}} 要素ではすべての HTML コンテンツを使用して、もっと複雑でクリエイティブなボタンの内容を作成することができます。 -<h2 id="Lets_make_it_a_bit_nicer_with_CSS" name="Let's_make_it_a_bit_nicer_with_CSS">CSS でフォームを少し見栄えよくしましょう</h2> +## 基本的なフォームの整形 -<p>フォームのHTMLコードの記述ができました。このフォームをお気に入りのブラウザーで見ると、見栄えがよくないでしょう。</p> +フォームの HTML コードの記述ができました。このフォームを保存してブラウザーで見てみてください。今のところ、かなり不格好であることがわかると思います。 -<div class="note"> -<p><strong>メモ</strong>: あなたの HTML コードが正しくないと考える場合、完成例と比較してみてください — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> にあります (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html">ライブ版も見てください</a>)。</p> -</div> +> **Note:** 作成した HTML コードが正しくないと思われる場合は、完成例と比較してみてください — [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) にあります ([ライブ版も参照](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html))。 -<p>フォームを素敵にスタイル付けるのはトリッキーです。それはこの記事でフォームスタイリングについて教える範囲を超えています。なので当面はまずまずの見ばえとなる CSS を追加するだけにしましょう。</p> +フォームをきれいにスタイル付けするのは、なかなか難しいものです。フォームのスタイル付けを詳しく教えるのはこの記事の範囲外なので、とりあえず見た目が問題ないように CSS を追加してもらうだけにしておきましょう。 -<p>最初に、ページの HTML の head 内に {{htmlelement("style")}} 要素を追加します。次のようになります:</p> +最初に、ページの HTML の head 内に {{htmlelement("style")}} 要素を追加します。次のようになります。 -<pre class="brush: html notranslate"><style> +```html +<style> -</style></pre> +</style> +``` -<p><code class="language-html"><span class="tag token"><span class="tag token">style</span></span></code> タグの中に、次の CSS を追加します:</p> +`style` タグの中に、以下の CSS を追加してください。 -<pre class="brush:css; notranslate">form { - /* フォームをページの中央に置く */ +```css +form { + /* フォームをページの中央に配置 */ margin: 0 auto; width: 500px; - /* フォームの範囲がわかるようにする */ + /* フォームの輪郭 */ padding: 1em; border: 1px solid #CCC; border-radius: 1em; @@ -190,45 +199,47 @@ translation_of: Learn/Forms/Your_first_form ul { list-style: none; - padding: 0; + padding: 0; margin: 0; } + form li + li { margin-top: 1em; } label { - /* すべてのラベルを同じサイズにして、きちんと揃える */ + /* 大きさと配置を統一 */ display: inline-block; width: 90px; text-align: right; } -input, textarea { +input, +textarea { /* すべてのテキストフィールドのフォント設定を一致させる - デフォルトで、textarea は等幅フォントが設定されている */ + 既定で、 textarea には等幅フォントが設定されている */ font: 1em sans-serif; - /* すべてのテキストフィールドを同じサイズにする */ + /* テキストフィールドの大きさを統一 */ width: 300px; box-sizing: border-box; - /* テキストフィールドのボーダーの外見を同一にする */ + /* フォームフィールド境界に合わせる */ border: 1px solid #999; } input:focus, textarea:focus { - /* アクティブな要素を少し強調する */ + /* フォーカスのある要素を強調する */ border-color: #000; } textarea { - /* 複数行のテキストフィールドをラベルにきちんと揃える */ + /* 複数行のテキストフィールドをラベルに揃える */ vertical-align: top; - /* テキスト入力に十分な領域を与える */ + /* テキスト入力に十分な空間を与える */ height: 5em; } @@ -241,73 +252,70 @@ button { /* このマージンは、ラベルとテキストフィールドの間のスペースと おおよそ同じスペースを表す */ margin-left: .5em; -}</pre> +} +``` -<p>保存して再読み込みすると、フォームがよりきれいになりました。</p> +保存して再読み込みすると、フォームがよりきれいになりました。 -<div class="note"> -<p><strong>メモ</strong>: Github の <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> にあります(<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">ライブ版も見てください</a>)。</p> -</div> +> **Note:** Github の [first-form-styled.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html) にあります([ライブ版も確認](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html))。 -<h2 id="Sending_the_data_to_your_web_server" name="Sending_the_data_to_your_web_server">データをウェブサーバーに送信する</h2> +## データをウェブサーバーに送信する -<p>最後の、またもっともややこしいであろう部分が、サーバー側でのフォームデータの扱いです。{{HTMLElement("form")}} 要素は <a href="/ja/docs/Web/HTML/Attributes/action"><code>action</code></a> 属性と <a href="/ja/docs/Web/HTML/Attributes/method"><code>method</code></a> 属性により、どこへどのようにデータを送信するかを定義できます。</p> +最後の、またもっともややこしいであろう部分が、サーバー側でのフォームデータの扱いです。 +{{HTMLElement("form")}} 要素は [`action`](/ja/docs/Web/HTML/Attributes/action) 属性と [`method`](/ja/docs/Web/HTML/Attributes/method) 属性により、どこへどのようにデータを送信するかを定義できます。 -<p>フォームコントロールに <a href="/ja/docs/Web/HTML/Attributes/name"><code>name</code></a> をつけます。これらの名前はクライアント側とサーバー側の両側で重要です。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。</p> +フォームコントロールには [`name`](/ja/docs/Web/HTML/Attributes/name) をつけます。これらの名前はクライアント側とサーバー側の両側で重要です。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。 -<p>データに名前をつけるために、各々のデータを集めるフォームウィジェットの <code>name</code> 属性を使用しなければなりません。ここでもフォームのコードで見てみましょう:</p> +データに名前をつけるために、各々のデータを集めるフォームウィジェットの `name` 属性を使用しなければなりません。ここでもフォームのコードで見てみましょう: -<pre class="brush:html; notranslate"><form action="/my-handling-form-page" method="post"> - <ul> - <li> - <label for="name">Name:</label> - <input type="text" id="name" name="user_name" /> - </li> - <li> - <label for="mail">E-mail:</label> - <input type="email" id="mail" name="user_email" /> - </li> - <li> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </li> +```html +<form action="/my-handling-form-page" method="post"> + <ul> + <li> + <label for="name">Name:</label> + <input type="text" id="name" name="user_name" /> + </li> + <li> + <label for="mail">E-mail:</label> + <input type="email" id="mail" name="user_email" /> + </li> + <li> + <label for="msg">Message:</label> + <textarea id="msg" name="user_message"></textarea> + </li> ... -</pre> +``` -<p>この例では、フォームはそれぞれ "<code>user_name</code>"、"<code>user_email</code>"、"<code>user_message</code>" と名付けられた 3 つのデータを送信します。これらのデータは URL "<code>/my-handling-form-page</code>" へ、<a href="/ja/docs/Web/HTTP/Methods/POST">HTTP <code>POST</code></a> メソッドで送信します。</p> +この例では、フォームはそれぞれ "`user_name`"、"`user_email`"、"`user_message`" と名付けられた 3 つのデータを送信します。これらのデータは URL "`/my-handling-form-page`" へ、[HTTP `POST`](/ja/docs/Web/HTTP/Methods/POST) メソッドで送信します。 -<p>サーバー側では URL "<code>/my-handling-form-page</code>" のスクリプトが、HTTP リクエストに埋め込まれた 3 つのキーおよび値のアイテムリストとしてデータを受け取ります。スクリプトがデータを処理する方法は、あなた次第です。各サーバーサイド言語 (PHP、Python、Ruby、Java、C# など) は、これらのデータを扱う仕組みを持っています。これは本ガイドで踏み込んでいく範囲を超えますが、詳しく知りたい場合は<a href="/ja/docs/HTML/Forms/Sending_and_retrieving_form_data" title="HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信と取得</a>の記事にサンプルを載せていますのでご覧ください。</p> +サーバー側では URL "`/my-handling-form-page`" のスクリプトが、HTTP リクエストに埋め込まれた 3 つのキーおよび値のアイテムリストとしてデータを受け取ります。スクリプトがデータを処理する方法は、あなた次第です。各サーバーサイド言語 (PHP、Python、Ruby、Java、C# など) は、これらのデータを扱う仕組みを持っています。これは本ガイドで踏み込んでいく範囲を超えますが、詳しく知りたい場合は[フォームデータの送信](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data)の記事に例を載せていますのでご覧ください。 -<h2 id="Summary" name="Summary">まとめ</h2> +## まとめ -<p>おめでとうございます! 初めてのウェブフォームが完成しました。こちらが最終結果のデモです。</p> +おめでとうございます。初めてのウェブフォームが完成しました。こちらが最終結果のデモです。 -<p>{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}</p> +{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }} -<p>これはほんの開始点です、しかし — さて、より深く見ていくときが来ました。ウェブフォームはここで見てきたものよりさらに強力であり、ガイドの他の記事で残りの部分を習得できます。</p> +これはほんの開始点です、しかし — さて、より深く見ていくときが来ました。ウェブフォームはここで見てきたものよりさらに強力であり、ガイドの他の記事で残りの部分を習得できます。 -<p>{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}</p> +{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}} -<h2 id="In_this_module" name="In_this_module">このモジュール</h2> +## このモジュール内 -<ul> - <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> - <li><a href="/ja/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> - <li><a href="/ja/docs/Learn/Forms/Other_form_controls">Other form controls</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> - <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> - <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> -</ul> +- [初めてのフォーム](/ja/docs/Learn/Forms/Your_first_form) +- [フォームの構築方法](/ja/docs/Learn/Forms/How_to_structure_a_web_form) +- [基本的なネイティブフォームコントロール](/ja/docs/Learn/Forms/Basic_native_form_controls) +- [HTML5 入力型](/ja/docs/Learn/Forms/HTML5_input_types) +- [その他のフォームコントロール](/ja/docs/Learn/Forms/Other_form_controls) +- [フォームへのスタイル設定](/ja/docs/Learn/Forms/Styling_web_forms) +- [フォームへの高度なスタイル設定](/ja/docs/Learn/Forms/Advanced_form_styling) +- [UI 擬似クラス](/ja/docs/Learn/Forms/UI_pseudo-classes) +- [フォームデータの検証](/ja/docs/Learn/Forms/Form_validation) +- [フォームデータの送信](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data) -<h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> +### 上級トピック -<ul> - <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li> - <li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> - <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> -</ul> +- [カスタムフォームコントロールの作成方法](/ja/docs/Learn/Forms/How_to_build_custom_form_controls) +- [JavaScript によるフォームの送信](/ja/docs/Learn/Forms/Sending_forms_through_JavaScript) +- [フォームウィジェット向けプロパティ実装状況一覧](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls) |