unslug ja: move

1 files changed, 46 insertions, 0 deletions

diff --git a/files/ja/orphaned/learn/html/forms/html5_updates/index.html b/files/ja/orphaned/learn/html/forms/html5_updates/index.html
new file mode 100644
index 0000000000..abf99e2af7
--- /dev/null
+++ b/files/ja/orphaned/learn/html/forms/html5_updates/index.html
@@ -0,0 +1,46 @@
+---
+title: Forms in HTML5
+slug: Web/HTML/Forms_in_HTML
+translation_of: Learn/HTML/Forms/HTML5_updates
+---
+<p>{{ gecko_minversion_header("2") }}</p>
+<p>HTML5 のフォーム関連要素/属性は HTML4 よりも幅広いマークアップを提供し、また HTML4 時代に必要とされた長たらしいスクリプトやスタイルシートを書く手間を省いてくれます。HTML5 のフォーム機能は、Web サイトごとに異なっている入力へのフィードバックに今より優れた一貫性をもたらし、より良いユーザエクスペリエンスを提供します。また、スクリプトを無効化したブラウザでも同様の体験を提供します。</p>
+<p>このページでは、Gecko/Firefox がサポートするフォーム機能のうち、新しいもの、もしくは変更されたものについて紹介します。</p>
+<h3 id="The_input_element" name="The_input_element"><code>&lt;input&gt;</code> 要素</h3>
+<p><code>{{ HTMLElement("input") }}</code> 要素の {{ htmlattrxref("type", "input") }} 属性に新しい値が追加されました。</p>
+<ul> <li><code>search</code>: 検索フィールドを表します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。</li> <li><code>tel</code>: 電話番号を入力します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。これは電話番号の表記が国によって異なることにあります。ユーザーが入力する値に制約を与えたい場合は {{ htmlattrxref("pattern", "input") }} 属性や {{ htmlattrxref("maxlength", "input") }} 属性を利用できます。</li> <li><code>url</code>: <a class=" external" href="http://ja.wikipedia.org/wiki/URL">URL</a> を入力します。改行や値の最初と最後に空白が入力されると自動的に取り除かれます。</li> <li> <p><code>email</code>: メールアドレスを入力します。改行が入力されても自動的に取り除かれます。非妥当なメールアドレスが入力されるとフォームは送信されません。メールアドレスの形式は、次の ABNF 記法 <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> を満たさなければなりません（<code>atext</code> は RFC 5322 の section 3.2.3 で、<code>ldh-str</code> は RFC 1034 の section 3.5 で定義されています）。</p> <div class="note"><strong>Note:</strong> {{ htmlattrxref("multiple", "input") }} 属性がこの {{ HTMLElement("input") }} 要素に指定された場合、複数のメールアドレスをカンマで区切り入力することができます。しかし、この機能はまだ Firefox に実装されていません。</div> </li>
+</ul>
+<p>{{ HTMLElement("input") }} 要素には新しい属性も追加されています。</p>
+<ul> <li>{{ htmlattrxref("list", "input") }}: {{ HTMLElement("datalist") }} 要素の ID を指定します。<code>datalist</code> 要素の内容は {{ HTMLElement("option") }} 要素で、この内容がフィールドのサジェスト領域にヒントとして表示されます。</li> <li>{{ htmlattrxref("pattern", "input") }}: フィールドがとりうる値の入力形式を正規表現で記述します。この属性は {{ htmlattrxref("type", "input") }} 属性が <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, <code>email</code> のいずれかである場合に利用可能です。</li> <li>{{ htmlattrxref("formmethod", "input") }}: 送信時の HTTP メソッド (GET もしくは POST) を指定します。この属性は {{ HTMLElement("form") }} 要素の {{ htmlattrxref("method", "form") }} 属性を上書きします。{{ htmlattrxref("formmethod", "input") }} 属性は {{ htmlattrxref("type", "input") }} 属性が <code>image</code> もしくは <code>submit</code> の場合に利用可能です。</li> <li>{{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: 検証を通らなかった際に表示されるテキストを指定します。この属性は Mozilla の固有拡張であり、非標準なものです。</li>
+</ul><h3 id="The_form_element" name="The_form_element"><code>&lt;form&gt;</code> 要素</h3>
+<p>{{ HTMLElement("form") }} 要素に新しい属性が追加されました。</p>
+<ul> <li>{{ htmlattrxref("novalidate", "form") }}: フォーム送信時に実行される検証機能を無効化します。</li>
+</ul>
+<h3 id="The_datalist_element" name="The_datalist_element"><code>&lt;datalist&gt;</code> 要素</h3>
+<p>{{ HTMLElement("datalist") }} 要素は {{ HTMLElement("option") }} 要素を内容に持つ、{{ HTMLElement("input") }} フィールドのサジェストを定義します。</p>
+<p>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("list", "input") }} 属性から、特定の {{ HTMLElement("datalist") }} 要素を指定します。</p>
+<h3 id="The_output_element" name="The_output_element"><code>&lt;output&gt;</code> 要素</h3>
+<p><code>{{ HTMLElement("output") }}</code> 要素は計算結果を表示します。</p>
+<p>{{ htmlattrxref("for", "output") }} 属性を使って、<code>output</code> 要素と計算に利用する文書内の他の要素 (入力や変数など) とを関連づけることができます。{{ htmlattrxref("for", "output") }} 属性の値は計算に利用する要素の ID を空白で区切り入力します。</p>
+<p>{{ non-standard_inline() }} Gecko 2.0 では {{ HTMLElement("output") }} 要素に任意のフォーム検証とエラーメッセージを定義でき、また {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, {{ Cssxref(":-moz-ui-valid") }} といった CSS 擬似クラスを適用することができます。これにより、特定の入力値ではないがビジネスルールに抵触するような計算結果の制約 (例: 「パーセンテージの合計が 100 を超えてはいけない」) を検証することができます。</p>
+<h3 id="The_placeholder_attribute" name="The_placeholder_attribute"><code>placeholder</code> 属性</h3>
+<p><code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("textarea") }}</code> 要素の {{ htmlattrxref("placeholder", "input") }} 属性は、フィールドに入力できる値のヒントを提示します。プレースホルダに指定するテキストには CR や LF を記述することはできません。</p>
+<h3 id="The_autofocus_attribute" name="The_autofocus_attribute"><code>autofocus</code> 属性</h3>
+<p>{{ htmlattrxref("autofocus", "input") }} 属性はページのロード時に自動的にフォーカスのあたるべきフォームコントロールを指定します。ユーザーの行動が優先されるため、すでに別のコントロールに入力している場合などには自動的にフォーカスされません。<code>autofocus</code> 属性を与えられる要素は文書中でただ 1 つです。この属性は真偽値属性であり、<code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("button") }}</code>, <code>{{ HTMLElement("select") }}</code>, <code>{{ HTMLElement("textarea") }}</code> 要素に指定可能です。ただし、{{ htmlattrxref("autofocus", "input") }} 要素の {{ htmlattrxref("type", "input") }} 属性が <code>hidden</code> を値にもつ場合、この属性を利用することができません (つまり、隠れたコントロールへ自動的にフォーカスさせることはできません)。</p>
+<h3 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM プロパティ</h3>
+<p><code><a href="/ja/DOM/HTMLLabelElement" title="ja/DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM インターフェースは HTML の <code>{{ HTMLElement("label") }}</code> 要素が持つ属性に加えて、新しいプロパティを備えています。<strong><code>control</code></strong> プロパティは、ラベルに結びついたコントロールを返します。つまり、このラベルがどの要素のコントロールなのかを知ることができます。コントロールは要素の {{ htmlattrxref("for", "label") }} 属性もしくは要素の最初の子孫コントロール要素から決定されます。</p>
+<h3 id="Constraint_Validation" name="Constraint_Validation">フォーム検証</h3>
+<p>HTML5 はフォームに入力された値をクライアントサイドで検証するための構文及び API を提供しています。この検証機能はサーバーサイドの検証を置き換えるものではありません。セキュリティやデータの整合性といった点からサーバーサイドの検証は必要です。しかし、入力したデータについてユーザーにすぐフィードバックできるため、クライアントサイドの検証はより良いユーザーエクスペリエンスを提供します。</p>
+<p>{{ HTMLElement("input") }} 要素に <code>title</code> 属性が指定されている場合、その内容が検証に失敗した際のエラーメッセージとして表示されます。属性値が空の場合、ツールチップは表示されません。属性が指定されていない場合は、標準の検証メッセージ ({{ htmlattrxref("x-moz-errormessage") }} 属性もしくは <code>setCustomValidity()</code> メソッドで指定) が使用されます。</p>
+<div class="note"><strong>Note:</strong> フォームの検証はフォーム中の {{ HTMLElement("button") }} 要素ではサポートされていません。フォームの妥当状態と連動するスタイルをボタンに与えたい場合は {{ cssxref(":-moz-submit-invalid") }} 擬似クラスを利用してください。</div>
+<h4 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">フォーム検証の HTML 構文</h4>
+<p>次の HTML5 構文によって、フォームに入力する内容に制約をかけることができます。</p>
+<ul> <li>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("required", "input") }} 属性は、その要素が入力必須なことを示します。({{ HTMLElement("input") }} 要素の場合、{{ htmlattrxref("type", "input") }} 属性の値によって適用可能かどうかが異なります。)</li> <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("pattern", "input") }} 属性は、入力された値がとりうるべき値の形式を正規表現で指定します。</li> <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性は、要素に入力可能な値の最小値/最大値を指定します。</li> <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("step", "input") }} 属性は、({{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性と使うことで) 入力可能な値の粒度に制約を設けます。指定可能な値にそぐわない値が入力された場合、その値は検証を通りません。</li> <li>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("maxlength", "input") }} 属性は、ユーザーがそのフィールドに入力できる最大文字数 (Unicode のコードポイント) を指定します。</li> <li>{{ htmlattrxref("type", "input") }} 属性の値 <code>url</code>, <code>email</code> は、入力された値がそれぞれ妥当な URL、もしくはメールアドレスなのかを検証します。</li>
+</ul>
+<p>{{ HTMLElement("form") }} 要素の {{ htmlattrxref("novalidate", "form") }} 属性、{{ HTMLElement("button") }} 要素の {{ htmlattrxref("formnovalidate", "button") }} 属性、{{ htmlattrxref("type", "input") }} に <code>submit</code> もしくは <code>image</code> を持つ {{ HTMLElement("input") }} 要素の {{ htmlattrxref("formnovalidate", "input") }} 属性を使用すれば、検証を行わないようにすることも可能です。これらの属性は、フォーム送信時に検証を行わないことを示します。</p>
+<h4 id="Constraint_Validation_API" name="Constraint_Validation_API">フォーム検証 API</h4>
+<p>次の DOM プロパティとメソッドにより、クライアントサイドのスクリプトから検証をかけることが可能です。</p>
+<ul> <li><code><a href="/ja/DOM/HTMLFormElement" title="ja/DOM/HTMLFormElement">HTMLFormElement</a></code> オブジェクトの <code>checkValidity()</code> メソッドは、フォームが検証を通ったかそうでないかを返します。フォームに関連づけられた要素すべてが制約を満たす場合に <code>true</code> を、そうでない場合は <code>false</code> を返します。</li> <li><a href="/ja/HTML/Content_categories#form-associated" title="ja/HTML/Content_categories#form-associated">フォーム連携要素</a>に、次のプロパティとメソッドが用意されています。 <ul> <li><code>willValidate</code> プロパティは、要素が制約の設定対象ではない場合に <code>false</code> を返します。</li> <li><code>validity</code> プロパティは、要素の妥当性状態を表す <code><a href="/ja/DOM/ValidityState" title="ja/DOM/ValidityState">ValidityState</a></code> オブジェクトを返します。</li> <li><code>validationMessage</code> プロパティは、制約を満たせない場合その要素に関連するメッセージを返します。</li> <li><code>checkValidity()</code> メソッドは、その要素が制約を満たせない場合に <code>false</code> を、そうでない場合は <code>true</code> を返します。</li> <li><code>setCustomValidity()</code> メソッドは、独自の検証メッセージを設定します。このメソッドにより、定義済みのメッセージよりもさらに細かく制約について説明できます。</li> </ul> </li>
+</ul>
+<p>{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5"}) }}</p>
+<p>{{ HTML5ArticleTOC() }}</p>