From f893c82acf3213515221cb0c113237ae165a0277 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 25 Jan 2022 01:02:49 +0900 Subject: 2022/01/03 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/learn/forms/your_first_form/index.md | 370 +++++++++++++------------- 1 file changed, 189 insertions(+), 181 deletions(-) (limited to 'files') 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 --- -
-
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
-
- -

このシリーズの最初の記事では、簡単なフォームの設計、HTML フォームコントロールとその他の HTML 要素を使用した正しい実装、CSS によるとても簡単なスタイル付け、データをサーバーに送る方法を含めた、ウェブフォームを作成する本当に初歩的な経験をします。サブトピックは、モジュールの後で詳しく展開していきます。

- - - - - - - - - - - - +{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}} + +このシリーズの最初の記事では、簡単なフォームの設計、HTML フォームコントロールとその他の HTML 要素を使用した正しい実装、CSS によるとても簡単なスタイル付け、データをサーバーに送る方法を含めた、ウェブフォームを作成する本当に初歩的な経験をします。 +サブトピックは、モジュールの後で詳しく展開していきます。 + +
前提条件:基本的なコンピューターリテラシーと、HTML を理解するを理解していること。
目的:ウェブフォームとは何か、何に使うのか、どうデザインするのか、サンプル事例に必要な基本の HTML 要素について熟知する。
+ + + + + + + + + +
前提条件: + 基本的なコンピューターリテラシーと、HTML を理解するを理解していること。 +
目的: + ウェブフォームとは何か、何に使うのか、どうデザインするのか、サンプル事例に必要な基本の HTML 要素について熟知する。 +
-

ウェブフォームとは何か?

+## ウェブフォームとは何か? -

ウェブフォームとは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。フォームによって、ユーザーは ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり (モジュール後半のサーバーにデータを送るを見てください) 、クライアント側ですぐにインターフェイスを更新する(例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたり)こともあります。

+**ウェブフォーム**とは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。ユーザーはフォームによって、ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり（このモジュール後半の[サーバーにデータを送る](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data)を見てください）、クライアント側ですぐにインターフェイスを更新する（例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたりする）こともあります。 -

ウェブフォームは 1 つ以上のフォームコントロール(ウィジェットともいいます)と、フォーム全体を構成するのに役立つ追加要素 — よく HTML フォームと呼ばれます — とで作られます。それらのコントロールはテキストフィールド (単一行または複数行)、ドロップダウンボックス、ボタン、チェックボックスあるいはラジオボタンがあります。たいていは {{htmlelement("input")}} 要素を使って作成されますが、その他の要素もあります。

+ウェブフォームは 1 つ以上の**フォームコントロール**（**ウィジェット**ともいいます）と、フォーム全体を構成するのに役立つ追加要素 — よく **HTML フォーム**と呼ばれます — とで作られます。それらのコントロールは単一行または複数行のテキストフィールド、ドロップダウンボックス、ボタン、チェックボックス、ラジオボタンがあります。たいていは {{htmlelement("input")}} 要素を使って作成されますが、その他の要素もあります。 -

フォームコントロールは、特定フォームの値が入力されるのを強制する(フォーム検証)ためにもプログラミングされ、視力のある・盲目のユーザーいずれにとっても、用途を説明するラベルと対になります。

+フォームコントロールは、特定フォームの値が入力されるのを強制するためにもプログラミングされ（**フォーム検証**）、目の見えるユーザーと目の不自由なユーザーの両方に対して用途を説明するテキストのラベルと対になります。 -

フォームを設計する

+## フォームを設計する -

コードを書き始める前に、そこから離れてフォームについて考える時間をとるとよいでしょう。簡単なモデルを作ると、あなたがユーザーに入力を依頼したいデータの適切なセットを定義することの助けになります。ユーザー体験 (UX) の観点では、フォームが大規模になるとユーザーが不満を持って離れるリスクが高まると覚えておくことが重要です。簡単に、かつ集中するようにしてください。本当に必要なことだけをたずねてください。

+コードを書き始める前に、そこから離れてフォームについて考える時間をとるとよいでしょう。簡単なモデルを作ると、ユーザーに入力を依頼したいデータの適切なセットを定義することの助けになります。ユーザー体験 (UX) の観点では、フォームが大規模になるとユーザーが不満を持って離れるリスクが高まると覚えておくことが重要です。簡単に、かつ集中するようにしてください。本当に必要なことだけを尋ねてください。 -

フォームの設計は、サイトやアプリケーションを構築する際の大事なステップです。フォームのユーザー体験まで扱うと本記事の対象を超えてしまいますが、そこまで踏み込みたい場合は以下の記事をご覧ください。

+フォームの設計は、サイトやアプリケーションを構築する際の大切なステップです。フォームのユーザー体験まで扱うと本記事の対象を超えてしまいますが、そこまで踏み込みたい場合は以下の記事をご覧ください。 - +- 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)といった複雑なことに至るまで、良いアドバイスを得られる、思慮深いリソースです。 -

本記事では、シンプルな連絡フォームを作成します。簡単に図を描いてみましょう。

+本記事では、シンプルな問い合わせフォームを作成します。簡単に図を描いてみましょう。 -

The form to build, roughly sketch

+![The form to build, roughly sketch](form-sketch-low.jpg) -

このフォームには、3 つのテキストフィールドと 1 つのボタンがあります。要するに、ユーザーへ名前(Name)、メールアドレス(E-mail)、送信したいメッセージ(Message)をたずねます。ボタンを押すと、データをウェブサーバーに送信します。

+このフォームには、3 つのテキストフィールドと 1 つのボタンがあります。要するに、ユーザーへ名前 (Name)、メールアドレス (E-mail)、送信したいメッセージ (Message) を尋ねます。ボタンを押すと、データをウェブサーバーへ送信します。 -

HTML を書きましょう

+## アクティブラーニング: フォームの HTML の実装 -

これで、HTML に移ってフォームのコードを書く準備ができました。連絡フォームを作るために、以下の HTML 要素を使用します: {{HTMLElement("form")}}、{{HTMLElement("label")}}、{{HTMLElement("input")}}、{{HTMLElement("textarea")}}、{{HTMLElement("button")}} です。

+これで、HTML に移ってフォームのコードを書く準備ができました。問い合わせフォームを作るために、以下の HTML 要素を使用します: {{HTMLElement("form")}}、{{HTMLElement("label")}}、{{HTMLElement("input")}}、{{HTMLElement("textarea")}}、{{HTMLElement("button")}} です。 -

前に進む前に、簡単な HTML テンプレートをローカルにコピーします — ここにフォームの HTML を入力します。

+前に進む前に、[簡単な HTML テンプレート](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)をローカルにコピーします。 — ここにフォームの HTML を入力します。 -

{{HTMLElement("form")}} 要素

+### `
` 要素 -

すべてのフォームは、以下のように {{HTMLElement("form")}} 要素から始まります:

+すべてのフォームは、以下のように {{HTMLElement("form")}} 要素から始まります。 -
<form action="/my-handling-form-page" method="post">
+```html
+
 
-</form>
+
+``` -

これは、フォームを正式に定義します。これは {{HTMLElement("div")}} 要素や {{HTMLElement("p")}} 要素と同様にコンテナ要素ですが、フォームの動作を設定するための固有の属性もサポートします。すべての属性は省略可能ですが、少なくとも action 属性と method属性は常に設定することがベストプラクティスであると考えられます。

+これは、フォームを正式に定義します。これは {{HTMLElement("section")}} や {{HTMLElement("footer")}} 要素と同様にコンテナー要素ですが、フォームを含めるのに特化しています。フォームの動作方法を設定するための特有の属性もにも対応しています。すべての属性は省略可能ですが、少なくとも [`action`](/ja/docs/Web/HTML/Attributes/action) 属性と [`method`](/ja/docs/Web/HTML/Attributes/method) 属性は常に設定するのがふつうです。 - +- `action` 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します。 +- `method` 属性は、データを送信するために使用する HTTP メソッド（`get` または `post`）を定義します。 -
-

注: これらの属性がどのように働くかについて、詳しくはフォームデータの送信と取得で説明しています。

-
+> **Note:** これらの属性がどのように働くかについて、詳しくは[フォームデータの送信](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data)で説明しています。 -

今は、上の {{htmlelement("form")}} 要素を HTML 本文に追加します。

+今のところは、上の {{htmlelement("form")}} 要素を HTML の {{htmlelement("body")}} に追加します。 -

{{HTMLElement("label")}}、{{HTMLElement("input")}} および {{HTMLElement("textarea")}} 要素でウィジェットを追加する

+### `