diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-07-12 10:11:30 +0900 |
|---|---|---|
| committer | potappo <potappo@gmail.com> | 2021-07-18 18:33:18 +0900 |
| commit | fd1e2435671adf89d5a2718fc7d1454828f147ae (patch) | |
| tree | 769a406472882e3bafda9e32fb8b4414cfcfb1d5 /files/ja/learn/forms | |
| parent | b0caefeaf81fd55008397bfd6f7765e15cecd224 (diff) | |
| download | translated-content-fd1e2435671adf89d5a2718fc7d1454828f147ae.tar.gz translated-content-fd1e2435671adf89d5a2718fc7d1454828f147ae.tar.bz2 translated-content-fd1e2435671adf89d5a2718fc7d1454828f147ae.zip | |
remove wiki.developer.mozilla.org links
Diffstat (limited to 'files/ja/learn/forms')
12 files changed, 142 insertions, 142 deletions
diff --git a/files/ja/learn/forms/advanced_form_styling/index.html b/files/ja/learn/forms/advanced_form_styling/index.html index aa82c80611..472758fd61 100644 --- a/files/ja/learn/forms/advanced_form_styling/index.html +++ b/files/ja/learn/forms/advanced_form_styling/index.html @@ -22,7 +22,7 @@ original_slug: Learn/Forms/Advanced_styling_for_HTML_forms <tbody> <tr> <th scope="row">前提条件:</th> - <td>基本的なコンピューターリテラシーと、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</td> + <td>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</td> </tr> <tr> <th scope="row">目的:</th> @@ -37,17 +37,17 @@ original_slug: Learn/Forms/Advanced_styling_for_HTML_forms <ul> <li>チェックボックスとラジオボタン</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> </ul> <p><strong>劣悪</strong>: いくつかの要素は CSS でスタイル設定できません。これらが含まれます:</p> <ul> <li>ドロップダウンウィジェットを作成する要素、{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}}を含む</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> <li>{{HTMLElement("progress")}} and {{HTMLElement("meter")}}</li> </ul> @@ -105,7 +105,7 @@ original_slug: Learn/Forms/Advanced_styling_for_HTML_forms <h3 id="Taming_search_boxes" name="Taming_search_boxes">検索ボックスを変更する</h3> -<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code> は基本的に単なるテキスト入力のため、なぜ <code>appearance: none;</code> が便利なのでしょうか? 答えは macOS での Chromium ベースのブラウザーでは、検索ボックスはスタイル設定の制限があります — 例えば <code>height</code> や <code>font-size</code> を自在に調整できません。この理由は macOS以外の <a href="https://www.wired.com/2013/04/blink/">Chrome ブラウザーはもう WebKit レンダリングエンジンを使っていません</a> 、これは既定では、いくつかのフォームコントロールで Aqua の見た目が有効です。Aqua が有効だと、いくつかのフォームコントロールは <a href="https://webkit.org/blog/28/buttons/">scalable</a> となりません。</p> +<p><code><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code> は基本的に単なるテキスト入力のため、なぜ <code>appearance: none;</code> が便利なのでしょうか? 答えは macOS での Chromium ベースのブラウザーでは、検索ボックスはスタイル設定の制限があります — 例えば <code>height</code> や <code>font-size</code> を自在に調整できません。この理由は macOS以外の <a href="https://www.wired.com/2013/04/blink/">Chrome ブラウザーはもう WebKit レンダリングエンジンを使っていません</a> 、これは既定では、いくつかのフォームコントロールで Aqua の見た目が有効です。Aqua が有効だと、いくつかのフォームコントロールは <a href="https://webkit.org/blog/28/buttons/">scalable</a> となりません。</p> <p>これは デフォルトの Aqua を無効にする <code>appearance: none;</code>で修正できます:</p> @@ -250,7 +250,7 @@ input[type=checkbox]:disabled { color: gray; }</pre> -<p>こうした疑似クラスなどは、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">次の記事</a>で見つけられますが、上記は次のことをしています:</p> +<p>こうした疑似クラスなどは、<a href="/ja/docs/Learn/Forms/UI_pseudo-classes">次の記事</a>で見つけられますが、上記は次のことをしています:</p> <ul> <li><code>:checked</code> — チェックボックス (やラジオボタン) がチェックされた状態にあります — ユーザーがクリック/有効化しています。</li> @@ -276,7 +276,7 @@ input[type=checkbox]:disabled { <h2 id="劣悪な要素に何ができるか">"劣悪な"要素に何ができるか?</h2> -<p>今度は"劣悪な"コントロールに注目しましょう — これは完全にスタイル設定するのが本当に難しいものです。簡単にいうと、これはドロップダウンボックス、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color">color</a></code> や <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> のような複合コントロールタイプ、フィードバック — {{HTMLElement("progress")}} や {{HTMLElement("meter")}}のような指向性コントロールです。</p> +<p>今度は"劣悪な"コントロールに注目しましょう — これは完全にスタイル設定するのが本当に難しいものです。簡単にいうと、これはドロップダウンボックス、<code><a href="/ja/docs/Web/HTML/Element/input/color">color</a></code> や <code><a href="/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> のような複合コントロールタイプ、フィードバック — {{HTMLElement("progress")}} や {{HTMLElement("meter")}}のような指向性コントロールです。</p> <p>問題は、要素はブラウザー同士でいろいろな既定の見た目があって、それにスタイル設定できても、内部のいくつかはスタイル設定できないことです。</p> @@ -344,7 +344,7 @@ button { <div class="blockIndicator note"> <p><strong>注記</strong>: 多数のブラウザーで同時にこの例をテストしたい場合、<a href="https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html">live版をここで見つけてください</a> (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/styling-examples/ugly-controls.html">ソースコードも見てください</a>)。</p> -<p>また JavaScript をページに追加してコントロール自身の下にあるファイルピッカー自身で選択されたファイルを一覧しているのを心に留めておいてください。これは <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file#Examples"><input type="file"></a></code> リファレンスページの例を簡単にしたバージョンです。</p> +<p>また JavaScript をページに追加してコントロール自身の下にあるファイルピッカー自身で選択されたファイルを一覧しているのを心に留めておいてください。これは <code><a href="/ja/docs/Web/HTML/Element/input/file#Examples"><input type="file"></a></code> リファレンスページの例を簡単にしたバージョンです。</p> </div> <p>ご覧のとおり、これらをモダンブラウザー全体で均一に見せることはかなりうまくいっています。</p> @@ -387,7 +387,7 @@ button { appearance: none; }</pre> -<p>次に生成されたコンテンツを使って独自のアイコンを作成します。コントロールの周りに特別なラッパーを置いていて、その理由は<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/::before">::before</a></code>/<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/::after">::after</a></code> が <code><select></code> 要素では動作しなしためです (これは生成されたコンテンツが要素がフォーマットするボックスに対し相対的に配置されますが、フォーム入力は置換された要素 — 表示がブラウザーによって生成されて順番に配置されるもの — として動作するので、1 つもないためです):</p> +<p>次に生成されたコンテンツを使って独自のアイコンを作成します。コントロールの周りに特別なラッパーを置いていて、その理由は<code><a href="/ja/docs/Web/CSS/::before">::before</a></code>/<code><a href="/ja/docs/Web/CSS/::after">::after</a></code> が <code><select></code> 要素では動作しなしためです (これは生成されたコンテンツが要素がフォーマットするボックスに対し相対的に配置されますが、フォーム入力は置換された要素 — 表示がブラウザーによって生成されて順番に配置されるもの — として動作するので、1 つもないためです):</p> <pre class="brush: html notranslate"><div class="select-wrapper"><select id="select" name="select"> <option>Banana</option> @@ -409,7 +409,7 @@ button { position: absolute; }</pre> -<p>2 つ目のもう少し有名な問題は、<code><select></code> ボックスをクリックして開いたときに出てくる、オプションを含んだボックスを制御できないことです。オプションが親でセットされたフォントを継承していないのに気づくでしょう。また余白スペースや色のようなものも一貫してセットできません。例えば、Firefox では<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/option"><option></a></code> 要素に <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/color">color</a></code> と <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a></code> を適用できますが、Chrome ではそうなりません。どちらも余白スペース (例 <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a></code>)を適用できません。同じことはデータリスト用に出てくるオートコンプリートのリストにも当てはまります。</p> +<p>2 つ目のもう少し有名な問題は、<code><select></code> ボックスをクリックして開いたときに出てくる、オプションを含んだボックスを制御できないことです。オプションが親でセットされたフォントを継承していないのに気づくでしょう。また余白スペースや色のようなものも一貫してセットできません。例えば、Firefox では<code><a href="/ja/docs/Web/HTML/Element/option"><option></a></code> 要素に <code><a href="/ja/docs/Web/CSS/color">color</a></code> と <code><a href="/ja/docs/Web/CSS/background-color">background-color</a></code> を適用できますが、Chrome ではそうなりません。どちらも余白スペース (例 <code><a href="/ja/docs/Web/CSS/padding">padding</a></code>)を適用できません。同じことはデータリスト用に出てくるオートコンプリートのリストにも当てはまります。</p> <p>本当にオプションをスタイル設定する必要がある場合、カスタムコントロールを生成するライブラリを使用するか、独自のカスタムコントロールを作成するかのどちらかが必要で、あるいは <code>multiple</code>属性を使う select の場合、これはページ上に出てくるすべてのオプションを作成し、この特殊な問題を避けることができます:</p> @@ -421,17 +421,17 @@ button { <h3 id="Date_input_types" name="Date_input_types">日付入力タイプ</h3> -<p>日付/時間の入力タイプ (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/time">time</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/week">week</a></code>, <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/month">month</a></code>) にはすべて同じ重大な関連した問題があります。実際のボックスはテキスト入力と同じくスタイル設定が容易であり、デモ内で得たものの見た目は良いです。</p> +<p>日付/時間の入力タイプ (<code><a href="/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/time">time</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/week">week</a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/month">month</a></code>) にはすべて同じ重大な関連した問題があります。実際のボックスはテキスト入力と同じくスタイル設定が容易であり、デモ内で得たものの見た目は良いです。</p> <p>しかし、コントロールの内部パーツ (例 日付をピックアップするのに使うポップアップカレンダー、値を増減するスピナー) はまったくスタイル設定できず、<code>appearance: none;</code>を使ってスタイルを除去できません。スタイル設定に完全なコントロールが必要な場合、カスタムコントロールを生成するライブラリを使うか、自分で作らねばなりません。</p> <div class="blockIndicator note"> -<p><strong>注</strong>: ここでも<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code> は触れる価値があります — これにも値を増減するスピナーがあるので、同じ問題に悩まさされます。しかし、<code>number</code> タイプを使った場合にデータは簡単に集められて、単に <code>text</code> 入力を (あるいはモバイルブラウザーで数字キーパッドを表示するのに <code>tel</code> を) 代わりに使うのも簡単です</p> +<p><strong>注</strong>: ここでも<code><a href="/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code> は触れる価値があります — これにも値を増減するスピナーがあるので、同じ問題に悩まさされます。しかし、<code>number</code> タイプを使った場合にデータは簡単に集められて、単に <code>text</code> 入力を (あるいはモバイルブラウザーで数字キーパッドを表示するのに <code>tel</code> を) 代わりに使うのも簡単です</p> </div> <h3 id="Range_input_types" name="Range_input_types">Range 入力タイプ</h3> -<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code> はスタイル設定が煩わしいです。下記のようなものを使ってデフォルトのスライダートラックを完全に削除してカスタムスタイル (ここでは、薄い赤のトラック)に置き換えます:</p> +<p><code><a href="/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code> はスタイル設定が煩わしいです。下記のようなものを使ってデフォルトのスライダートラックを完全に削除してカスタムスタイル (ここでは、薄い赤のトラック)に置き換えます:</p> <pre class="brush: css notranslate">input[type="range"] { appearance: none; @@ -490,13 +490,13 @@ label[for="file"]:active { box-shadow: inset 1px 1px 3px #ccc; }</pre> -<p>上記の CSS スタイル設定の結果は、下記のライブ実行の例で見ることができます (<a href="https://mdn.github.io/learning-area/html/forms/styling-examples/styled-file-picker.html">styled-file-picker.html</a> のライブと、<a href="https://wiki.developer.mozilla.org/enhttps://github.com/mdn/learning-area/blob/master/html/forms/styling-examples/styled-file-picker.html-US/docs/">ソースコード</a>も見てください)。</p> +<p>上記の CSS スタイル設定の結果は、下記のライブ実行の例で見ることができます (<a href="https://mdn.github.io/learning-area/html/forms/styling-examples/styled-file-picker.html">styled-file-picker.html</a> のライブと、<a href="/enhttps://github.com/mdn/learning-area/blob/master/html/forms/styling-examples/styled-file-picker.html-US/docs/">ソースコード</a>も見てください)。</p> <p>{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-file-picker.html", '100%', 200)}}</p> <h3 id="Meters_and_progress_bars" name="Meters_and_progress_bars">メーターとプログレスバー</h3> -<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/meter"><meter></a></code> と <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/progress"><progress></a></code> は多くの中で最悪かもしれません。前の例で見たように、希望する幅にだいたい正確に設定できました。しかしそれを超えると、どんな方法でもスタイル設定が本当に難しいです。高さの設定をお互いに、ブラウザー間で一貫して処理できず、背景は色付けできるものの、前面のバーはできず、<code>appearance: none</code> を設定すると良くならず、より悪くなります。</p> +<p><code><a href="/ja/docs/Web/HTML/Element/meter"><meter></a></code> と <code><a href="/ja/docs/Web/HTML/Element/progress"><progress></a></code> は多くの中で最悪かもしれません。前の例で見たように、希望する幅にだいたい正確に設定できました。しかしそれを超えると、どんな方法でもスタイル設定が本当に難しいです。高さの設定をお互いに、ブラウザー間で一貫して処理できず、背景は色付けできるものの、前面のバーはできず、<code>appearance: none</code> を設定すると良くならず、より悪くなります。</p> <p>スタイル設定を制御したい場合は、この機能のカスタムソリューションを作ったり、<a href="http://kimmobrunfeldt.github.io/progressbar.js/#examples">progressbar.js</a> のようなサードパーティのソリューションを使うのは簡単です。</p> @@ -522,13 +522,13 @@ label[for="file"]:active { <h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> -<p>この記事の最後に到達しましたが、重要な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a> を見てください。心に留めておくこととして、この評価シリーズでの質問は、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">次の記事</a>の知識も前提していてるので、試す前にその記事に取り組むとよいかもしれません。</p> +<p>この記事の最後に到達しましたが、重要な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a> を見てください。心に留めておくこととして、この評価シリーズでの質問は、<a href="/ja/docs/Learn/Forms/UI_pseudo-classes">次の記事</a>の知識も前提していてるので、試す前にその記事に取り組むとよいかもしれません。</p> <h2 id="Summary" name="Summary">まとめ</h2> <p>HTML フォームで CSS を使用するのはまだ困難ですが、しばしばそれらを回避する方法があります。クリーンでユニバーサルな解決方法はありませんが、最新のブラウザーでは新しい可能性があります。今のところ、最良の解決策は、HTML フォームウィジェットに適用されたときに異なるブラウザーが CSS をサポートする方法の詳細を学ぶことです。</p> -<p>このガイドの次の記事では、モダンブラウザーでさまざまな状態のフォームをスタイル設定できるさまざまな <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>を見ていきます。</p> +<p>このガイドの次の記事では、モダンブラウザーでさまざまな状態のフォームをスタイル設定できるさまざまな <a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>を見ていきます。</p> <p>{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}} </p> @@ -551,7 +551,7 @@ label[for="file"]:active { <h3 id="Advanced_Topics" name="Advanced_Topics">Advanced Topics</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form controls</a></li> + <li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> </ul> diff --git a/files/ja/learn/forms/form_validation/index.html b/files/ja/learn/forms/form_validation/index.html index 1d4ade7c06..156709f76a 100644 --- a/files/ja/learn/forms/form_validation/index.html +++ b/files/ja/learn/forms/form_validation/index.html @@ -37,7 +37,7 @@ translation_of: Learn/Forms/Form_validation <p>クライアント側検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。もしも無効なデータがサーバーに送られてから拒否される場合、サーバーへの往復とクライアント側に戻ってユーザーにデータを修正するように指示することにより、かなり時間を浪費します。</p> -<p>しかし、クライアント側の検証はセキュリティ対策<em>とは考えられません</em>!アプリは常に<em>サーバー側でも</em>クライアント側と<strong>同様に</strong>送信されたデータのセキュリティをチェックします。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。何が起こり得るかは <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を見てください。サーバー側検証はこのガイドの範囲を超えますが、覚えておいてください。</p> +<p>しかし、クライアント側の検証はセキュリティ対策<em>とは考えられません</em>!アプリは常に<em>サーバー側でも</em>クライアント側と<strong>同様に</strong>送信されたデータのセキュリティをチェックします。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。何が起こり得るかは <a href="/ja/docs/Learn/Server-side/First_steps/Website_security">ウェブサイトセキュリティ</a>を見てください。サーバー側検証はこのガイドの範囲を超えますが、覚えておいてください。</p> <h2 id="What_is_form_validation" name="What_is_form_validation">フォーム検証とは何か</h2> @@ -81,7 +81,7 @@ translation_of: Learn/Forms/Form_validation <li><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>属性: データ長の最小値と最大値を指定します。</li> <li><code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code>属性: 値の最小値と最大値を指定します。</li> <li><code>type</code> 属性: その入力データが数値や、E メールアドレスや、特定の指定型かを指定します。</li> - <li><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性: データが指定された<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>にマッチするかどうかを指定します。</li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性: データが指定された<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>にマッチするかどうかを指定します。</li> </ul> <p>入力データをこの指定されたルールに基いて検証します。検証にパスすれば妥当で検証にパスしなければ妥当ではないと考えます。</p> @@ -132,7 +132,7 @@ input:valid { <h3 id="The_required_attribute" name="The_required_attribute">required 属性</h3> -<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/required">required</a></code> 属性は、使うのがもっとも簡単な HTML5 の検証機能です。入力欄を必須にしたい場合は、この属性を使用して要素をマークすることができます。この属性が設定されていて、要素が {{cssxref(':required')}} にマッチすると、UI疑似クラスとフォームは送信されず、入力が空の場合のエラーメッセージが表示されるでしょう。空のままでは、この入力は不正とみなされ、{{cssxref(':invalid')}} 疑似クラスにマッチします。</p> +<p><code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code> 属性は、使うのがもっとも簡単な HTML5 の検証機能です。入力欄を必須にしたい場合は、この属性を使用して要素をマークすることができます。この属性が設定されていて、要素が {{cssxref(':required')}} にマッチすると、UI疑似クラスとフォームは送信されず、入力が空の場合のエラーメッセージが表示されるでしょう。空のままでは、この入力は不正とみなされ、{{cssxref(':invalid')}} 疑似クラスにマッチします。</p> <p>以下のように、<code>required</code> 属性を入力欄に追加しましょう。</p> @@ -187,7 +187,7 @@ input:valid { <li><code>abc|xyz</code> — <code>abc</code> の並びまたは <code>xyz</code> の並びに一致する。これは <code>abcxyz</code> や <code>a</code> や <code>y</code> などには一致しない。</li> </ul> -<p>正規表現には多くの組合せがあるので例はここまでとする。完全な一覧や多くの例は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>ドキュメントを参照してください。</p> +<p>正規表現には多くの組合せがあるので例はここまでとする。完全な一覧や多くの例は、<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>ドキュメントを参照してください。</p> <p>使用例を実装しましょう。HTML を更新して <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性を追加しましょう:</p> @@ -215,12 +215,12 @@ input:valid { <p>この例では、{{HTMLElement("input")}} 要素は "banana"、"Banana"、"cherry" または "Cherry" という 4 つの文字列値のうち 1 つを受け付けます。正規表現は大文字小文字を区別しますが、中括弧にはさまれた"Aa"のパターンを使って小文字と同様に先頭が大文字のバージョンをサポートします。</p> -<p>この時点で、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性の中の値を以前に見たいくつかの例と同じ値に変更してみて、入力欄が有効になるように入力する値がどのように影響するかを確認してください。自分で考えた値も書いてみて、どのようになるか確認しましょう。果物に関する値を可能にすれば、例が分かりやすくなります。</p> +<p>この時点で、<a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性の中の値を以前に見たいくつかの例と同じ値に変更してみて、入力欄が有効になるように入力する値がどのように影響するかを確認してください。自分で考えた値も書いてみて、どのようになるか確認しましょう。果物に関する値を可能にすれば、例が分かりやすくなります。</p> <p>もし {{HTMLElement("input")}} の空ではない値が正規表現パターンに一致しなかった場合、この <code>input</code> は {{cssxref(':invalid')}} 疑似クラスに一致します。</p> <div class="blockIndicator note"> -<p><strong>メモ:</strong> {{HTMLElement("input")}} 要素の型によっては、検証のために <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性が必要ないことがあります。例えば <code>email</code> 型を指定すると、入力された文字列を、妥当な形式のメールアドレスまたは、 <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 属性がある場合はカンマで区切られたメールアドレスのリストであることを確認する正規表現で検証します。</p> +<p><strong>メモ:</strong> {{HTMLElement("input")}} 要素の型によっては、検証のために <a href="/ja/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> 属性が必要ないことがあります。例えば <code>email</code> 型を指定すると、入力された文字列を、妥当な形式のメールアドレスまたは、 <a href="/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 属性がある場合はカンマで区切られたメールアドレスのリストであることを確認する正規表現で検証します。</p> </div> <div class="blockIndicator note"> @@ -235,7 +235,7 @@ input:valid { <h3 id="Constraining_the_values_of_your_entries" name="Constraining_the_values_of_your_entries">入力欄の値に制約を加える</h3> -<p>数値のフィールド (例えば <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code>) の場合、<code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性によって入力に制限を加えられます。もしそのフィールドの値がこの範囲を超える場合、そのフィールドは妥当ではありません。</p> +<p>数値のフィールド (例えば <code><a href="/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code>) の場合、<code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性と <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性によって入力に制限を加えられます。もしそのフィールドの値がこの範囲を超える場合、そのフィールドは妥当ではありません。</p> <p>他の例を見てみましょう。<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> ファイルの新しいコピーを作成してください。</p> @@ -281,7 +281,7 @@ div { </div> <div class="blockIndicator note"> -<p><strong>注</strong>: <code><input type="number"></code> （及び <code>range</code> や <code>date</code> のような他の型）は <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/step"><code>step</code></a> 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の刻みを設定することができます。上の例では <code>step</code> 属性を入れていませんので、既定値の <code>1</code> となります。つまり 3.2 のような浮動小数でも、不正になります。</p> +<p><strong>注</strong>: <code><input type="number"></code> （及び <code>range</code> や <code>date</code> のような他の型）は <a href="/ja/docs/Web/HTML/Attributes/step"><code>step</code></a> 属性を取ることもでき、入力コントロール（数値の増加・減少ボタンなど）を使用するときに上げ下げすることができる値の刻みを設定することができます。上の例では <code>step</code> 属性を入れていませんので、既定値の <code>1</code> となります。つまり 3.2 のような浮動小数でも、不正になります。</p> </div> <h3 id="Full_example" name="Full_example">サンプル全体</h3> @@ -368,7 +368,7 @@ input:focus:invalid { <p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p> -<p>入力値と、それをサポートする入力タイプの制約に使える属性の完全なリストは、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">検証関連の属性</a>を見てください。</p> +<p>入力値と、それをサポートする入力タイプの制約に使える属性の完全なリストは、<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes">検証関連の属性</a>を見てください。</p> <div class="blockIndicator note"> <p><strong>注</strong>: GitHub の <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> でライブサンプルを見ることができます(<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">ソースコード</a>も見てください)</p> @@ -380,15 +380,15 @@ input:focus:invalid { <h3 id="The_HTML5_constraint_validation_API" name="The_HTML5_constraint_validation_API">HTML5 の制約検証 API</h3> -<p>多くのブラウザーが <a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation">制約検証API</a> に対応しています。この API は各フォーム要素で使用できる一連のメソッドやプロパティで構成されています。</p> +<p>多くのブラウザーが <a href="/ja/docs/Web/API/Constraint_validation">制約検証API</a> に対応しています。この API は各フォーム要素で使用できる一連のメソッドやプロパティで構成されています。</p> <ul> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/button"><button></a></code> 要素を表現)</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/fieldset"><fieldset></a></code> 要素を表現)</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> ( <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input"><input></a></code> 要素を表現)</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/output"><output></a></code> 要素を表現)</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/select"><select></a></code> 要素を表現)</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/textarea"><textarea></a></code> 要素を表現)</li> + <li><code><a href="/ja/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (<code><a href="/ja/docs/Web/HTML/Element/button"><button></a></code> 要素を表現)</li> + <li><code><a href="/ja/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (<code><a href="/ja/docs/Web/HTML/Element/fieldset"><fieldset></a></code> 要素を表現)</li> + <li><code><a href="/ja/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> ( <code><a href="/ja/docs/Web/HTML/Element/input"><input></a></code> 要素を表現)</li> + <li><code><a href="/ja/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (<code><a href="/ja/docs/Web/HTML/Element/output"><output></a></code> 要素を表現)</li> + <li><code><a href="/ja/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (<code><a href="/ja/docs/Web/HTML/Element/select"><select></a></code> 要素を表現)</li> + <li><code><a href="/ja/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (<code><a href="/ja/docs/Web/HTML/Element/textarea"><textarea></a></code> 要素を表現)</li> </ul> <p id="Constraint_validation_API_properties">制約検証 API には、上記の要素で利用できる、次のプロパティがあります。</p> @@ -413,7 +413,7 @@ input:focus:invalid { <p id="Constraint_validation_API_methods">制約検証 API には、上記の要素で利用できる、次のメソッドがあります。</p> <ul> - <li><code>checkValidity()</code>: 要素の値で妥当性の問題がない場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。要素が不正である場合、このメソッドは要素で {<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> イベント</a>を発生させます。</li> + <li><code>checkValidity()</code>: 要素の値で妥当性の問題がない場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。要素が不正である場合、このメソッドは要素で {<a href="/ja/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code> イベント</a>を発生させます。</li> <li><code>setCustomValidity(<em>message</em>)</code>: 要素に独自のエラーメッセージを追加します。独自のエラーメッセージを設定すると、要素が不正であるとみなされる場合に指定したエラーが表示されます。これにより JavaScript で、標準の HTML5 制約検証 API で提供されるもの以外の検証不合格状態を作り出すことができます。ユーザーに問題を報告する際に、メッセージが表示されます。</li> </ul> @@ -430,7 +430,7 @@ input:focus:invalid { <p><img alt="Example of an error message with Firefox in French on an English page" src="https://wiki.developer.mozilla.org/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p> -<p>これらのメッセージの外見やテキストを変更するには、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation" rel="external">制約検証 API</a> の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。</p> +<p>これらのメッセージの外見やテキストを変更するには、<a href="/ja/docs/Web/API/Constraint_validation" rel="external">制約検証 API</a> の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。</p> <p>いくつかの簡単な HTML で開始します (空の HTML ファイルにこれを入力します; もしよければ、<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> を基礎としてもいいでしょう):</p> @@ -454,7 +454,7 @@ email.addEventListener("input", function (event) { <p>ここでメールアドレス入力への参照を保管して、入力値が変更されるたびに制約コードが走るためのイベントリスナーを追加します。</p> -<p>制約コードの中で、メールアドレス入力の <code>validity.typeMismatch</code> プロパティが <code>true</code>かどうか、つまり値がメールアドレスの形式のパターンにマッチしていないかを確認します。その場合、カスタムメッセージとともに <a href="https://wiki.developer.mozilla.org/ja/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> を呼び出して、フォームを送信するときに、送信が失敗してカスタムエラーメッセージが表示されます。</p> +<p>制約コードの中で、メールアドレス入力の <code>validity.typeMismatch</code> プロパティが <code>true</code>かどうか、つまり値がメールアドレスの形式のパターンにマッチしていないかを確認します。その場合、カスタムメッセージとともに <a href="/ja/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> を呼び出して、フォームを送信するときに、送信が失敗してカスタムエラーメッセージが表示されます。</p> <p><code>validity.typeMismatch</code> が <code>false</code>の場合、空文字で <code>setCustomValidity()</code> メソッドを呼び出します。これは入力が妥当となり、フォームが送信されます。</p> @@ -485,7 +485,7 @@ email.addEventListener("input", function (event) { <p>この簡単なフォームでは、ブラウザーの自動検証を無効にするために <code><a href="/ja/docs/Web/HTML/Attributes/novalidate">novalidate</a></code> 属性を使用しています。これで、検証を制御するためにスクリプトを使用できます。ただし、これは制約検証 API の対応や CSS の疑似クラス {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}}, {{cssxref(":out-of-range")}} の適用を無効にするわけではありません。つまり、データを送信する前にブラウザーが自動的なフォームの妥当性確認を行わないとしても、あなた自身で確認を行って、フォームの状態に応じたスタイル設定ができます。</p> -<p>検証する入力は <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/email"><input type="email"></a></code>で、これは <code>required</code>(入力必須)で、8文字の <code>minlength</code> があります。これをわれわれのコードで確認して、それぞれカスタムエラーメッセージを表示させてみましょう。</p> +<p>検証する入力は <code><a href="/ja/docs/Web/HTML/Element/input/email"><input type="email"></a></code>で、これは <code>required</code>(入力必須)で、8文字の <code>minlength</code> があります。これをわれわれのコードで確認して、それぞれカスタムエラーメッセージを表示させてみましょう。</p> <p><code><span></code>要素の中にエラーメッセージを表示させようとしています。 <code><span></code>にセットされた <a href="/ja/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> 属性は、スクリーンリーダーのような支援技術を使用している人々を含む皆に、独自のエラーメッセージを提示するようにします。</p> @@ -608,7 +608,7 @@ function showError() { <ul> <li>入力値を変えるたびに、それが妥当なデータを含んでいるかをチェックします。その場合は表示されたエラーメッセージを削除します。データが不正の場合は、適当なエラーを表示する <code>showError()</code> を実行します。</li> - <li>フォームの送信を試すごとに、またデータが妥当かチェックします。その場合はフォームの送信を許可します。そうでない場合、適当なエラーを表示する <code>showError()</code> を実行し、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Event/preventDefault">preventDefault()</a></code>でフォーム送信を停止します。</li> + <li>フォームの送信を試すごとに、またデータが妥当かチェックします。その場合はフォームの送信を許可します。そうでない場合、適当なエラーを表示する <code>showError()</code> を実行し、<code><a href="/ja/docs/Web/API/Event/preventDefault">preventDefault()</a></code>でフォーム送信を停止します。</li> <li><code>showError()</code> 関数は、入力の <code>validity</code> オブジェクトのさまざまなプロパティを使ってエラーがどれかを決めて、適当なエラーメッセージを表示します。</li> </ul> @@ -623,7 +623,7 @@ function showError() { <p>制約検証 API はフォーム検証を制御するための強力なツールであり、HTML および CSS のみで検証を行うよりもはるかにユーザーインターフェイスをコントロールできます。</p> <div class="blockIndicator note"> -<p><strong>注</strong>: さらなる情報は、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証ガイド</a>と<a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Constraint_validation">制約検証 API</a> リファレンスを見てください。</p> +<p><strong>注</strong>: さらなる情報は、<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証ガイド</a>と<a href="/ja/docs/Web/API/Constraint_validation">制約検証 API</a> リファレンスを見てください。</p> </div> <h3 id="Validating_forms_without_a_built-in_API" name="Validating_forms_without_a_built-in_API">組み込み API を使用しないフォーム検証</h3> @@ -817,7 +817,7 @@ addEvent(form, "submit", function () { <li>どこでエラーが発生しているかを正確に示してください（特に大きなフォームで）。</li> </ul> -<p>フォームが正しく埋められたことをチェックしたら、送信することができます。次の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">データ送信</a>でカバーします。</p> +<p>フォームが正しく埋められたことをチェックしたら、送信することができます。次の<a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">データ送信</a>でカバーします。</p> <p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p> @@ -827,11 +827,11 @@ addEvent(form, "submit", function () { <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> @@ -839,7 +839,7 @@ addEvent(form, "submit", function () { <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> <ul> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> </ul> diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html index 4034b1998b..f1250eb590 100644 --- a/files/ja/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html @@ -677,7 +677,7 @@ window.addEventListener('load', function () { }); });</pre> -<p>上記のコードで、<code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/HTMLElement/tabIndex" title="/ja/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code> プロパティを使用していることは注目に値します。このプロパティは、ネイティブコントロールにフォーカスが当たらないようにすることと、ユーザーがキーボードやマウスを使用するとカスタムコントロールがフォーカスを得るようにするために必要です。</p> +<p>上記のコードで、<code><a href="/ja/docs/Web/API/HTMLElement/tabIndex" title="/ja/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code> プロパティを使用していることは注目に値します。このプロパティは、ネイティブコントロールにフォーカスが当たらないようにすることと、ユーザーがキーボードやマウスを使用するとカスタムコントロールがフォーカスを得るようにするために必要です。</p> <p>これで完了です! 結果は以下のとおりです:</p> @@ -894,9 +894,9 @@ window.addEventListener('load', function () { <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> </ul> diff --git a/files/ja/learn/forms/html5_input_types/index.html b/files/ja/learn/forms/html5_input_types/index.html index c825e48653..d56da894aa 100644 --- a/files/ja/learn/forms/html5_input_types/index.html +++ b/files/ja/learn/forms/html5_input_types/index.html @@ -257,7 +257,7 @@ price.addEventListener('input', function() { <h2 id="スキルをテストしましょう!">スキルをテストしましょう!</h2> -<p>この記事の最後に到着しましたが、最も大事な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Test_your_skills:_HTML5_controls">Test your skills: HTML5 controls</a> を見てください。</p> +<p>この記事の最後に到着しましたが、最も大事な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/Forms/Test_your_skills:_HTML5_controls">Test your skills: HTML5 controls</a> を見てください。</p> <h2 id="Summary" name="Summary">まとめ</h2> @@ -271,11 +271,11 @@ price.addEventListener('input', function() { <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> @@ -283,7 +283,7 @@ price.addEventListener('input', function() { <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> <ul> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets"> </a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets"> </a></li> </ul> diff --git a/files/ja/learn/forms/index.html b/files/ja/learn/forms/index.html index aa428b7db7..40e686438a 100644 --- a/files/ja/learn/forms/index.html +++ b/files/ja/learn/forms/index.html @@ -44,7 +44,7 @@ translation_of: Learn/Forms <dd>オリジナルの HTML {{htmlelement("input")}}タイプの詳細や、色々なデータ型を集めるのにどんなオプションが使えるかを見ていきます。</dd> <dt><a href="/ja/docs/Learn/Forms/HTML5_input_types">HTML5 入力タイプ</a></dt> <dd>ここでは <code><input></code> 要素を深く見ていき、HTML5 リリースにて追加された入力タイプや、さまざまな UI コントロールとデータコレクションの改良を見ます。さらには、{{htmlelement('output')}} 要素も見ます。</dd> - <dt><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls">その他のフォームコントロール</a></dt> + <dt><a href="/ja/docs/Learn/Forms/Other_form_controls">その他のフォームコントロール</a></dt> <dd>次には<code><input></code> 以外のフォームコントロールと関連するツール、例えば {{htmlelement('select')}}、{{htmlelement('textarea')}}、{{htmlelement('meter')}}、{{htmlelement('progress')}} を見ていきます。</dd> </dl> diff --git a/files/ja/learn/forms/other_form_controls/index.html b/files/ja/learn/forms/other_form_controls/index.html index 6c6f825de4..dd8b463ed4 100644 --- a/files/ja/learn/forms/other_form_controls/index.html +++ b/files/ja/learn/forms/other_form_controls/index.html @@ -299,7 +299,7 @@ translation_of: Learn/Forms/Other_form_controls <h2 id="スキルをテストしよう!">スキルをテストしよう!</h2> -<p>この記事の終わりまで到達しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Test_your_skills:_Other_controls">Test your skills: Other controls</a> を見てください。</p> +<p>この記事の終わりまで到達しましたが、最も重要な情報を覚えていますか？次に移る前に、この情報を保持しているか検証するテストがあります — <a href="/ja/docs/Learn/Forms/Test_your_skills:_Other_controls">Test your skills: Other controls</a> を見てください。</p> <h2 id="Summary" name="Summary">まとめ</h2> @@ -315,11 +315,11 @@ translation_of: Learn/Forms/Other_form_controls <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> @@ -327,7 +327,7 @@ translation_of: Learn/Forms/Other_form_controls <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> <ul> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets"> </a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets"> </a></li> </ul> diff --git a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html index c24af4a732..ed70a2587b 100644 --- a/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html +++ b/files/ja/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -1010,7 +1010,7 @@ translation_of: Learn/Forms/Property_compatibility_table_for_form_controls <h3 id="Datalist" name="Datalist">Datalist</h3> -<p> <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> 要素と <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Attributes/list"><code>list</code> 属性</a>を見てください。</p> +<p> <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> 要素と <a href="/en-US/docs/Web/HTML/Attributes/list"><code>list</code> 属性</a>を見てください。</p> <table> <thead> @@ -2009,9 +2009,9 @@ translation_of: Learn/Forms/Property_compatibility_table_for_form_controls <h3 id="上級トピック">上級トピック</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> </ul> diff --git a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html index 7370945b88..deee070329 100644 --- a/files/ja/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/ja/learn/forms/sending_and_retrieving_form_data/index.html @@ -50,7 +50,7 @@ translation_of: Learn/Forms/Sending_and_retrieving_form_data <h3 id="The_htmlattrxrefactionform_attribute" name="The_htmlattrxref(actionform)_attribute">action 属性</h3> -<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/action">action</a></code> 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Common_questions/What_is_a_URL">URL</a> でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。</p> +<p><code><a href="/ja/docs/Web/HTML/Attributes/action">action</a></code> 属性は、どこにデータを送信するかを定義します。値は妥当な相対/絶対 <a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL</a> でなければなりません。この属性が与えられなかった場合は、フォームが含まれているページの URL にデータが送信されます。</p> <p>この例では、データを絶対 URL の <code>http://</code><code>example.com</code> に送信します。</p> @@ -74,13 +74,13 @@ translation_of: Learn/Forms/Sending_and_retrieving_form_data <h3 id="The_htmlattrxrefmethodform_attribute" name="The_htmlattrxref(methodform)_attribute">method 属性</h3> -<p><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/method">method</a></code> 属性は、どのようにデータを送信するかを定義します。<a href="/ja/docs/HTTP">HTTP プロトコル</a>はリクエストを実行するための方法をいくつか提供しています。HTML フォームのデータは複数の方法で送信することができます。もっとも一般的なものは <code>GET</code> メソッドと <code>POST</code> メソッドです。</p> +<p><code><a href="/ja/docs/Web/HTML/Attributes/method">method</a></code> 属性は、どのようにデータを送信するかを定義します。<a href="/ja/docs/HTTP">HTTP プロトコル</a>はリクエストを実行するための方法をいくつか提供しています。HTML フォームのデータは複数の方法で送信することができます。もっとも一般的なものは <code>GET</code> メソッドと <code>POST</code> メソッドです。</p> -<p>これら2つのメソッドの違いを理解するために、一歩戻って <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Overview">HTTP の動作</a>についてみていきましょう。ウェブ上のリソースにたどり着こうとするたびに、ブラウザーは URL へリクエストを送信します。HTTP リクエストは 2 つの部分で構成されます。ブラウザーの機能に関する包括的なメタデータのセットを持つヘッダーと、指定されたリクエストをサーバーが処理するために必要な情報を持つ本文です。</p> +<p>これら2つのメソッドの違いを理解するために、一歩戻って <a href="/ja/docs/Web/HTTP/Overview">HTTP の動作</a>についてみていきましょう。ウェブ上のリソースにたどり着こうとするたびに、ブラウザーは URL へリクエストを送信します。HTTP リクエストは 2 つの部分で構成されます。ブラウザーの機能に関する包括的なメタデータのセットを持つヘッダーと、指定されたリクエストをサーバーが処理するために必要な情報を持つ本文です。</p> <h4 id="The_GET_method" name="The_GET_method">GET メソッド</h4> -<p><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Methods/GET"><code>GET</code> メソッド</a>は、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。"やあサーバー、このリソースをくれよ。" この場合、ブラウザーは空の本文を送信します。本文が空であるため、フォームをこのメソッドで送信する場合はデータを URL の後に付加します。</p> +<p><a href="/ja/docs/Web/HTTP/Methods/GET"><code>GET</code> メソッド</a>は、サーバーに対して指定したリソースを返すよう求めるためにブラウザーが使用するメソッドです。"やあサーバー、このリソースをくれよ。" この場合、ブラウザーは空の本文を送信します。本文が空であるため、フォームをこのメソッドで送信する場合はデータを URL の後に付加します。</p> <p>以下のフォームについて考えてみましょう。</p> @@ -118,7 +118,7 @@ Host: foo.com</pre> <h4 id="The_POST_method" name="The_POST_method">POST メソッド</h4> -<p><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST"><code>POST</code> メソッド</a>は少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。"やあサーバー、このデータを見て適切な結果を返してよ。" このメソッドを使用してフォームを送信する場合は、データが HTTP リクエストの本文の後に追加されます。</p> +<p><a href="/ja/docs/Web/HTTP/Methods/POST"><code>POST</code> メソッド</a>は少し異なります。これは、HTTP リクエストの本文で提供したデータを考慮したレスポンスの要求を、ブラウザーがサーバーに送信するためのメソッドです。"やあサーバー、このデータを見て適切な結果を返してよ。" このメソッドを使用してフォームを送信する場合は、データが HTTP リクエストの本文の後に追加されます。</p> <p>例を見てみましょう。— これは前述の <code>GET</code> の節で見たものと同じフォームですが、{{htmlattrxref("method","form")}} 属性が <code>post</code> に設定されています。</p> @@ -260,7 +260,7 @@ if __name__ == "__main__": <ul> <li>ファイルの内容は URL 引数に収めることができないので、{{htmlattrxref("method","form")}} 属性を <code>POST</code> に設定してください。</li> <li>データは複数の部分に分かれ、それぞれのファイルや文字列データがフォーム本体に含められているので、{{htmlattrxref("enctype","form")}} の値を <code>multipart/form-data</code> に設定ください。</li> - <li>ユーザーがアップロードするファイルを選択できるように、1 つ以上の <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code> コントロールを含めてください。</li> + <li>ユーザーがアップロードするファイルを選択できるように、1 つ以上の <code><a href="/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code> コントロールを含めてください。</li> </ul> <p>例:</p> @@ -283,7 +283,7 @@ if __name__ == "__main__": <p>サーバーにデータを送信するたびに、セキュリティについて考える必要があります。HTML フォームはサーバーに対するもっともよくある攻撃の入口 (攻撃が行われる場所) になります。問題が HTML フォーム自身から発生することはありません — サーバーがどのようにデータを扱うかによります。</p> -<p><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side">server-side</a> の学習トピックの <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Server-side/First_steps/Website_security">Website security</a> の記事では、一般的な攻撃とその防御を詳細に扱っています。そちらへ行って記事を確認し、何が起こり得るかを理解してください。</p> +<p><a href="/ja/docs/Learn/Server-side">server-side</a> の学習トピックの <a href="/ja/docs/Learn/Server-side/First_steps/Website_security">Website security</a> の記事では、一般的な攻撃とその防御を詳細に扱っています。そちらへ行って記事を確認し、何が起こり得るかを理解してください。</p> <h3 id="Be_paranoid_Never_trust_your_users" name="Be_paranoid_Never_trust_your_users">疑い深くあれ: ユーザーを信用してはいけません</h3> @@ -292,7 +292,7 @@ if __name__ == "__main__": <p>サーバーに来るすべてのデータを確認およびサニタイズしなければなりません。いつでもです。例外はありません。</p> <ul> - <li><strong>潜在的に危険な文字をエスケープします。</strong>注意すべき具体的な文字は、データが使用される状況や使用するサーバー基盤に大きく依存しますが、どのサーバー側言語もそのための機能を持っています。注意しておくべきことは、 (<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript">JavaScript</a> や <a href="https://en.wikipedia.org/wiki/SQL">SQL</a> コマンドといった)実行可能なコードのようなキャラクターシーケンスです。</li> + <li><strong>潜在的に危険な文字をエスケープします。</strong>注意すべき具体的な文字は、データが使用される状況や使用するサーバー基盤に大きく依存しますが、どのサーバー側言語もそのための機能を持っています。注意しておくべきことは、 (<a href="/ja/docs/Learn/JavaScript">JavaScript</a> や <a href="https://en.wikipedia.org/wiki/SQL">SQL</a> コマンドといった)実行可能なコードのようなキャラクターシーケンスです。</li> <li><strong>入力データの量を、必要なサイズまでしか受け入れないように制限します。</strong></li> <li><strong>アップロードされたファイルをサンドボックス化します。</strong>ファイルを別のサーバーに保管して、別のサブドメインまたはよりよい方法としてまったく別のドメインを通してのみアクセスを許可します。</li> </ul> @@ -323,11 +323,11 @@ if __name__ == "__main__": <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> @@ -335,7 +335,7 @@ if __name__ == "__main__": <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> <ul> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> </ul> diff --git a/files/ja/learn/forms/sending_forms_through_javascript/index.html b/files/ja/learn/forms/sending_forms_through_javascript/index.html index 3b3ba71ce2..6643dad84b 100644 --- a/files/ja/learn/forms/sending_forms_through_javascript/index.html +++ b/files/ja/learn/forms/sending_forms_through_javascript/index.html @@ -37,7 +37,7 @@ translation_of: Learn/Forms/Sending_forms_through_JavaScript <p>{{domxref("XMLHttpRequest")}} (XHR) DOM オブジェクトで HTTP リクエストを作成して送信し、結果を取得することができます。歴史的には、{{domxref("XMLHttpRequest")}} は交換フォーマットとして <a href="/ja/docs/XML_Introduction">XML</a> を取得して送信するように設計されていました。しかし、<a href="/ja/docs/Glossary/JSON">JSON</a> は XML に取って代わっています。しかし、XML も JSON もフォームデータリクエストのエンコーディングには適合しません。フォームデータ (<code>application/x-www-form-urlencoded</code>) は、キーと値のペアの URL エンコードされたリストで構成されています。バイナリーデータを送信するために、HTTP リクエストは <code>multipart/form-data</code> に再形成されます<strong>。</strong></p> <div class="blockIndicator note"> -<p><strong>注記</strong>: <a href="https://wiki.developer.mozilla.org/ja/docs/Web/API/Fetch_API">Fetch API</a> は最近 XHR の代わりによく使われます — これは XHR のモダンで更新されたバージョンであり、同様に動作しますが利点もあります。この記事で見る大半の XHR コードは Fetch で置き換えられます。</p> +<p><strong>注記</strong>: <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> は最近 XHR の代わりによく使われます — これは XHR のモダンで更新されたバージョンであり、同様に動作しますが利点もあります。この記事で見る大半の XHR コードは Fetch で置き換えられます。</p> </div> <p>フロントエンド (ブラウザーで実行されるコード) とバックエンド (サーバーで実行されるコード) を制御すれば、JSON/XML を送信して必要に応じて処理することができます。</p> @@ -388,9 +388,9 @@ window.addEventListener('load', function () { <h3 id="上級トピック">上級トピック</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> </ul> diff --git a/files/ja/learn/forms/styling_web_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html index c64d5f4622..829b0d4604 100644 --- a/files/ja/learn/forms/styling_web_forms/index.html +++ b/files/ja/learn/forms/styling_web_forms/index.html @@ -14,14 +14,14 @@ original_slug: Learn/Forms/Styling_HTML_forms --- <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}</p> -<p class="summary">前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する <a href="https://wiki.developer.mozilla.org/ja/docs/CSS" title="/ja/docs/CSS">CSS</a> の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。</p> +<p class="summary">前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する <a href="/ja/docs/CSS" title="/ja/docs/CSS">CSS</a> の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">前提条件:</th> <td> - <p>基本的なコンピューターリテラシーと、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</p> + <p>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</p> </td> </tr> <tr> @@ -50,7 +50,7 @@ original_slug: Learn/Forms/Styling_HTML_forms <ol> <li>{{HTMLElement("form")}}</li> <li>{{HTMLElement("fieldset")}} と {{HTMLElement("legend")}}</li> - <li>単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code>を除く</li> + <li>単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <code><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code>を除く</li> <li>複数行の {{HTMLElement("textarea")}}</li> <li>ボタン ({{HTMLElement("input")}} と {{HTMLElement("button")}}の両方)</li> <li>{{HTMLElement("label")}}</li> @@ -63,7 +63,7 @@ original_slug: Learn/Forms/Styling_HTML_forms <ol> <li>チェックボックスとラジオボタン</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> </ol> <p>これら特殊なケースをどのように扱うかについては、<a href="/ja/docs/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a>の記事で見ていきます。</p> @@ -73,10 +73,10 @@ original_slug: Learn/Forms/Styling_HTML_forms <p>一部の要素は、CSS でスタイルを設定できません。たとえば次のもの:</p> <ul> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> <li>ドロップダウンウィジェットの作成に含まれる要素、{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}}を含む。</li> <li>{{HTMLElement("progress")}} と {{HTMLElement("meter")}}</li> </ul> @@ -95,7 +95,7 @@ original_slug: Learn/Forms/Styling_HTML_forms <p>CSS での<a href="/ja/docs/HTML/Forms/Styling_HTML_forms#The_good" title="HTML/Forms/Styling_HTML_forms#The_good">スタイル設定が容易な要素</a>は、振る舞いが他の HTML 要素とほとんど同じであるため、問題に直面することはないでしょう。ただし、ブラウザー間でユーザーエージェントのスタイルシートが若干矛盾するかもしれませんので、より簡単にスタイルを設定できるようにするためのトリックがあります。</p> -<p>上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>で扱います。</p> +<p>上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、<a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>で扱います。</p> <p>この記事の最後で基本的なフォームコントロールのスタイル設定と配置について理解できる実例を詳しく見ていきます。しかしその前に、知っておくと良いフォームスタイル設定の特定の面をいくつか述べておきます。</p> @@ -266,7 +266,7 @@ form { grid-template-rows : 10em 1em 1em 1em; }</pre> -<p>注意として、フォームをレイアウトするのに <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:</p> +<p>注意として、フォームをレイアウトするのに <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> と <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:</p> <pre class="brush: css notranslate">h1 { font : 1em "typewriter", monospace; @@ -364,7 +364,7 @@ button:focus { <h2 id="スキルを試しましょう！"><strong>スキルを試しましょう！</strong></h2> -<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト：スタイリングの基本</a>をご覧ください。</p> +<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——<a href="/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト：スタイリングの基本</a>をご覧ください。</p> <h2 id="Conclusion" name="Conclusion">まとめ</h2> @@ -374,27 +374,27 @@ button:focus { <h2 id="In_this_module" name="In_this_module">このモジュール</h2> -<h2 id="In_this_module" name="In_this_module"><a class="button section-edit only-icon" href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Other_form_controls$edit#In_this_module" rel="nofollow, noindex"><span>E</span></a></h2> +<h2 id="In_this_module" name="In_this_module"><a class="button section-edit only-icon" href="/ja/docs/Learn/HTML/Forms/Other_form_controls$edit#In_this_module" rel="nofollow, noindex"><span>E</span></a></h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームウィジェット</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Styling_web_forms">フォームへのスタイル設定</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><span class="highlight-span">上級トピック</span></h3> -<h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><a class="local-anchor" href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Other_form_controls#Advanced_Topics"><span>セクション</span></a></h3> +<h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><a class="local-anchor" href="/ja/docs/Learn/HTML/Forms/Other_form_controls#Advanced_Topics"><span>セクション</span></a></h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> + <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> </ul> diff --git a/files/ja/learn/forms/ui_pseudo-classes/index.html b/files/ja/learn/forms/ui_pseudo-classes/index.html index 36c83f9155..5c1bbda5cf 100644 --- a/files/ja/learn/forms/ui_pseudo-classes/index.html +++ b/files/ja/learn/forms/ui_pseudo-classes/index.html @@ -589,7 +589,7 @@ input:default ~ span::after { <h2 id="Test_your_skills!">Test your skills!</h2> -<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a>.</p> +<p>You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling">Test your skills: Advanced styling</a>.</p> <h2 id="Summary" name="Summary">まとめ</h2> @@ -603,11 +603,11 @@ input:default ~ span::after { <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めてのフォーム</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">フォームの構築方法</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブフォームウィジェット</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">フォームへのスタイル設定</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">フォームへの高度なスタイル設定</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation">フォームデータの検証</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> @@ -615,7 +615,7 @@ input:default ~ span::after { <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> <ul> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> - <li><a class="external" href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a class="external" href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> </ul> diff --git a/files/ja/learn/forms/your_first_form/index.html b/files/ja/learn/forms/your_first_form/index.html index d3e646269f..eb4e028208 100644 --- a/files/ja/learn/forms/your_first_form/index.html +++ b/files/ja/learn/forms/your_first_form/index.html @@ -38,7 +38,7 @@ translation_of: Learn/Forms/Your_first_form <h2 id="What_are_HTML_forms" name="What_are_HTML_forms">ウェブフォームとは何か?</h2> -<p><strong>ウェブフォーム</strong>とは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。フォームによって、ユーザーは ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり (モジュール後半の<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">サーバーにデータを送る</a>を見てください) 、クライアント側ですぐにインターフェイスを更新する(例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたり)こともあります。</p> +<p><strong>ウェブフォーム</strong>とは、ユーザーと ウェブサイトやアプリケーションとの対話の要となるもののひとつです。フォームによって、ユーザーは ウェブサイトへデータを送ることができます。それらのデータはたいてい ウェブサーバーに送られて処理、保存されたり (モジュール後半の<a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data">サーバーにデータを送る</a>を見てください) 、クライアント側ですぐにインターフェイスを更新する(例えば、リストに他の項目を追加したり、UI の機能を表示/非表示にしたり)こともあります。</p> <p>ウェブフォームは 1 つ以上の<strong>フォームコントロール</strong>(<strong>ウィジェット</strong>ともいいます)と、フォーム全体を構成するのに役立つ追加要素 — よく <strong>HTML フォーム</strong>と呼ばれます — とで作られます。それらのコントロールはテキストフィールド (単一行または複数行)、ドロップダウンボックス、ボタン、チェックボックスあるいはラジオボタンがあります。たいていは {{htmlelement("input")}} 要素を使って作成されますが、その他の要素もあります。</p> @@ -75,7 +75,7 @@ translation_of: Learn/Forms/Your_first_form </form></pre> -<p>これは、フォームを正式に定義します。これは {{HTMLElement("div")}} 要素や {{HTMLElement("p")}} 要素と同様にコンテナ要素ですが、フォームの動作を設定するための固有の属性もサポートします。すべての属性は省略可能ですが、少なくとも <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/action"><code>action</code></a> 属性と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/method"><code>method</code></a>属性は常に設定することがベストプラクティスであると考えられます。</p> +<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> <ul> <li><code>action</code> 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します</li> @@ -119,7 +119,7 @@ translation_of: Learn/Forms/Your_first_form <p>フォームのコードを上に見えるようなものに更新してください。</p> -<p>{{HTMLelement("li")}} 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするため (後述) に置いています。すべての {{HTMLElement("label")}} 要素における、<a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/for"> <code>for</code> </a> 属性の使い方に注目してください。これは、ラベルとフォームウィジェットを関連付けるための正式な方法です。この属性は、対応するウィジェットの <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/id"><code>id</code></a> を参照します。</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> <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> @@ -130,7 +130,7 @@ translation_of: Learn/Forms/Your_first_form <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> -<p>大事なことを言い忘れましたが、<code><input></code> と <code><textarea></textarea></code> の構文に注意してください。これは HTML の変わったことの 1 つです。<code><input></code> タグは空要素です。つまり、終了タグは不要です。一方 {{HTMLElement("textarea")}} は空の要素ではないので、適切な終了タグで閉じる必要があります。これは HTML フォームの特定の機能、つまりデフォルト値の定義方法に影響があります。{{HTMLElement("input")}} 要素のデフォルト値を定義するには、次のように <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/value"><code>value</code></a> 属性を使う必要があります。</p> +<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> <pre class="brush:html; notranslate"><input type="text" value="デフォルトではこの要素にはこの文章が挿入されます" /></pre> @@ -251,9 +251,9 @@ button { <h2 id="Sending_the_data_to_your_web_server" name="Sending_the_data_to_your_web_server">データをウェブサーバーに送信する</h2> -<p>最後の、またもっともややこしいであろう部分が、サーバー側でのフォームデータの扱いです。{{HTMLElement("form")}} 要素は <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/action"><code>action</code></a> 属性と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/method"><code>method</code></a> 属性により、どこへどのようにデータを送信するかを定義できます。</p> +<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> -<p>フォームコントロールに <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Attributes/name"><code>name</code></a> をつけます。これらの名前はクライアント側とサーバー側の両側で重要です。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。</p> +<p>フォームコントロールに <a href="/ja/docs/Web/HTML/Attributes/name"><code>name</code></a> をつけます。これらの名前はクライアント側とサーバー側の両側で重要です。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。</p> <p>データに名前をつけるために、各々のデータを集めるフォームウィジェットの <code>name</code> 属性を使用しなければなりません。ここでもフォームのコードで見てみましょう:</p> @@ -295,11 +295,11 @@ button { <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="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls">Other form controls</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="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</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> @@ -307,7 +307,7 @@ button { <h3 id="Advanced_Topics" name="Advanced_Topics">上級トピック</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls">カスタムフォームコントロールの作成方法</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript">JavaScript によるフォームの送信</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets">フォームウィジェット向けプロパティ実装状況一覧</a></li> + <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> |