From 434acdbb5b298229fbbf126e893603024bbee26c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 2 Aug 2021 23:35:46 +0900 Subject: orphaned/Learn/HTML/Forms/HTML5_updates を削除 (#1669) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * orphaned/Learn/HTML/Forms/HTML5_updates を削除 英語版の記事が既に存在しないため、内容を引き継ぐ Learn/Forms/HTML5_input_types へリダイレクトするようにした。 * Squashed commit of the following: commit 47b5dfa31a7e5d56f48d7aa9552d3af54e056488 Author: hochan Lee Date: Sun Aug 1 16:48:32 2021 +0900 [ko] target sync (#1630) * refactor: target code sync * docs: sync specification * feat: Compatibility_notes 번역 * fix: browser compat * feat: Section Title commit e00d49b05088870ca859cb65270d044f11907167 Author: hochan Lee Date: Sun Aug 1 16:33:42 2021 +0900 [ko] fix: lever to level, typo err, /docs/Web/API/Touch_events (#1451) * fix: lever to level, typo err * docs: 3 문단 번역 약간 수정 commit b9783c06657382caf2267a9a098ffa8e95a7f2ab Author: Peter Bengtsson Date: Sat Jul 31 09:33:29 2021 -0400 remove link 'title' attributes that's just the 'href' (zh-cn, part 5) commit c57404698a76f159e63c19bc8f42a3d4503d672d Author: Marcelo T. Cortes Date: Sat Jul 31 20:11:53 2021 -0300 Update index.html (#1825) Typo commit a50431ec62070e2080422cc595163e074365e72c Author: okathira <43328895+okathira@users.noreply.github.com> Date: Sun Aug 1 01:37:34 2021 +0900 fix typo (#1777) commit fbf77fe60856c53cca088bc7382fd27c653091b4 Author: Masahiro FUJIMOTO Date: Sun Aug 1 01:36:08 2021 +0900 orphaned/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry/cleanupSome を削除 (#1638) 廃止されたとみられるため削除 commit ab38a6d8dc6150dc37777d88ac4f427a3ca249a7 Author: Masahiro FUJIMOTO Date: Sun Aug 1 01:25:53 2021 +0900 MDN/Structures/Macros を更新 (#1644) * MDN/Structures/Macros を更新 2021/07/22 時点の英語版に同期 * Revert "MDN/Structures/Macros を更新" This reverts commit 44ee306cd4b299f36724a369508dc4588f5ad1b5. * Revert "Revert "MDN/Structures/Macros を更新"" This reverts commit 0c2a29aa908211c20adaec65cde9bf207565362e. commit 6a30c6733690ce18d1d20d03091bbba2b5b142f2 Author: Masahiro FUJIMOTO Date: Sun Aug 1 01:22:50 2021 +0900 orphaned/MDN/Editor 以下を削除 (#1643) * orphaned/MDN/Editor 以下を削除 プラットフォーム変更によりエディターがなくなったので、本階層以下を削除 * MDN/Structures/Macros を更新 2021/07/22 時点の英語版に同期 * Revert "MDN/Structures/Macros を更新" This reverts commit 5eaf69ad44e8aec0125e55edba58b691c35ea574. commit 12ff368a40e94fbfa79dffcae70f0193b5150bc1 Author: Masahiro FUJIMOTO Date: Sun Aug 1 01:22:05 2021 +0900 Web/JavaScript/Reference/Global_Objects/FinalizationRegistry を更新 (#1636) - Markdown に変更 - 2021/07/21 時点の英語版に同期 commit 385512565d2ef04dd7a2a51825e3d9da297d44bd Author: Masahiro FUJIMOTO Date: Sun Aug 1 01:21:00 2021 +0900 Document.defaultView を更新 (#1621) 2021/07/20 時点の英語版に同期 commit b6ad0be9c8b16eda6abdc932e91f7c614960f435 Author: Masahiro FUJIMOTO Date: Sun Aug 1 01:19:26 2021 +0900 conflicting/Web/API/Navigator を削除 (#1615) 古い文書と思われるため、削除 commit 945444d8b81fcf0da05db14e7a4ddc5d135f7c2a Author: henriquefontes Date: Sat Jul 31 13:18:46 2021 -0300 fix: word translation (#1690) "evolindo" to "evoluindo" commit 040852a09efb3bade338214269cb816209af5eab Author: Peter Bengtsson Date: Sat Jul 31 12:18:23 2021 -0400 remove link 'title' attributes that's just the 'href' (pt-br) (#1738) 👍🏽 commit 0114a214791c357c3dd3fdde5fc47b9ca33796cc Author: Peter Bengtsson Date: Sat Jul 31 12:04:19 2021 -0400 remove link 'title' attributes that's just the 'href' (ja, part 2) (#1807) --- files/ja/_redirects.txt | 6 +-- .../learn/html/forms/html5_updates/index.html | 47 ---------------------- 2 files changed, 3 insertions(+), 50 deletions(-) delete mode 100644 files/ja/orphaned/learn/html/forms/html5_updates/index.html diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index b15c5d1d2e..89980286af 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2394,7 +2394,7 @@ /ja/docs/HTML/Forms/The_native_form_widgets /ja/docs/Learn/Forms/Basic_native_form_controls /ja/docs/HTML/Global_attributes /ja/docs/Web/HTML/Global_attributes /ja/docs/HTML/HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5 -/ja/docs/HTML/HTML5/Forms_in_HTML5 /ja/docs/orphaned/Learn/HTML/Forms/HTML5_updates +/ja/docs/HTML/HTML5/Forms_in_HTML5 /ja/docs/Learn/Forms/HTML5_input_types /ja/docs/HTML/HTML5/HTML5_Tags_List /ja/docs/Web/HTML/Element /ja/docs/HTML/HTML5/HTML5_Thematic_Classification /ja/docs/orphaned/Web/Guide/HTML/HTML5 /ja/docs/HTML/HTML5/HTML5_element_list /ja/docs/Web/HTML/Element @@ -4432,11 +4432,11 @@ /ja/docs/Web/HTML/Forms/Sending_forms_through_JavaScript /ja/docs/Learn/Forms/Sending_forms_through_JavaScript /ja/docs/Web/HTML/Forms/Styling_HTML_forms /ja/docs/Learn/Forms/Styling_web_forms /ja/docs/Web/HTML/Forms/The_native_form_widgets /ja/docs/Learn/Forms/Basic_native_form_controls -/ja/docs/Web/HTML/Forms_in_HTML /ja/docs/orphaned/Learn/HTML/Forms/HTML5_updates +/ja/docs/Web/HTML/Forms_in_HTML /ja/docs/Learn/Forms/HTML5_input_types /ja/docs/Web/HTML/Global_attributes/dropzone /ja/docs/orphaned/Web/HTML/Global_attributes/dropzone /ja/docs/Web/HTML/HTML5 /ja/docs/orphaned/Web/Guide/HTML/HTML5 /ja/docs/Web/HTML/HTML5/Constraint_validation /ja/docs/orphaned/Web/Guide/HTML/HTML5/Constraint_validation -/ja/docs/Web/HTML/HTML5/Forms_in_HTML5 /ja/docs/orphaned/Learn/HTML/Forms/HTML5_updates +/ja/docs/Web/HTML/HTML5/Forms_in_HTML5 /ja/docs/Learn/Forms/HTML5_input_types /ja/docs/Web/HTML/HTML5/HTML5_Thematic_Classification /ja/docs/orphaned/Web/Guide/HTML/HTML5 /ja/docs/Web/HTML/HTML5/HTML5_element_list /ja/docs/Web/HTML/Element /ja/docs/Web/HTML/HTML5/HTML5_のフォーム /ja/docs/Learn/Forms diff --git a/files/ja/orphaned/learn/html/forms/html5_updates/index.html b/files/ja/orphaned/learn/html/forms/html5_updates/index.html deleted file mode 100644 index 8a4eb8f5e6..0000000000 --- a/files/ja/orphaned/learn/html/forms/html5_updates/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Forms in HTML5 -slug: orphaned/Learn/HTML/Forms/HTML5_updates -translation_of: Learn/HTML/Forms/HTML5_updates -original_slug: Web/HTML/Forms_in_HTML ---- -

{{ gecko_minversion_header("2") }}

-

HTML5 のフォーム関連要素/属性は HTML4 よりも幅広いマークアップを提供し、また HTML4 時代に必要とされた長たらしいスクリプトやスタイルシートを書く手間を省いてくれます。HTML5 のフォーム機能は、Web サイトごとに異なっている入力へのフィードバックに今より優れた一貫性をもたらし、より良いユーザエクスペリエンスを提供します。また、スクリプトを無効化したブラウザでも同様の体験を提供します。

-

このページでは、Gecko/Firefox がサポートするフォーム機能のうち、新しいもの、もしくは変更されたものについて紹介します。

-

<input> 要素

-

{{ HTMLElement("input") }} 要素の {{ htmlattrxref("type", "input") }} 属性に新しい値が追加されました。

-
  • search: 検索フィールドを表します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。
  • tel: 電話番号を入力します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。これは電話番号の表記が国によって異なることにあります。ユーザーが入力する値に制約を与えたい場合は {{ htmlattrxref("pattern", "input") }} 属性や {{ htmlattrxref("maxlength", "input") }} 属性を利用できます。
  • url: URL を入力します。改行や値の最初と最後に空白が入力されると自動的に取り除かれます。

  • email: メールアドレスを入力します。改行が入力されても自動的に取り除かれます。非妥当なメールアドレスが入力されるとフォームは送信されません。メールアドレスの形式は、次の ABNF 記法 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) を満たさなければなりません（atext は RFC 5322 の section 3.2.3 で、ldh-str は RFC 1034 の section 3.5 で定義されています）。

    Note: {{ htmlattrxref("multiple", "input") }} 属性がこの {{ HTMLElement("input") }} 要素に指定された場合、複数のメールアドレスをカンマで区切り入力することができます。しかし、この機能はまだ Firefox に実装されていません。
    • -
-

{{ HTMLElement("input") }} 要素には新しい属性も追加されています。

-
  • {{ htmlattrxref("list", "input") }}: {{ HTMLElement("datalist") }} 要素の ID を指定します。datalist 要素の内容は {{ HTMLElement("option") }} 要素で、この内容がフィールドのサジェスト領域にヒントとして表示されます。
  • {{ htmlattrxref("pattern", "input") }}: フィールドがとりうる値の入力形式を正規表現で記述します。この属性は {{ htmlattrxref("type", "input") }} 属性が text, tel, search, url, email のいずれかである場合に利用可能です。
  • {{ htmlattrxref("formmethod", "input") }}: 送信時の HTTP メソッド (GET もしくは POST) を指定します。この属性は {{ HTMLElement("form") }} 要素の {{ htmlattrxref("method", "form") }} 属性を上書きします。{{ htmlattrxref("formmethod", "input") }} 属性は {{ htmlattrxref("type", "input") }} 属性が image もしくは submit の場合に利用可能です。
  • {{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: 検証を通らなかった際に表示されるテキストを指定します。この属性は Mozilla の固有拡張であり、非標準なものです。
    • -

<form> 要素

-

{{ HTMLElement("form") }} 要素に新しい属性が追加されました。

-
  • {{ htmlattrxref("novalidate", "form") }}: フォーム送信時に実行される検証機能を無効化します。
    • -
-

<datalist> 要素

-

{{ HTMLElement("datalist") }} 要素は {{ HTMLElement("option") }} 要素を内容に持つ、{{ HTMLElement("input") }} フィールドのサジェストを定義します。

-

{{ HTMLElement("input") }} 要素の {{ htmlattrxref("list", "input") }} 属性から、特定の {{ HTMLElement("datalist") }} 要素を指定します。

-

<output> 要素

-

{{ HTMLElement("output") }} 要素は計算結果を表示します。

-

{{ htmlattrxref("for", "output") }} 属性を使って、output 要素と計算に利用する文書内の他の要素 (入力や変数など) とを関連づけることができます。{{ htmlattrxref("for", "output") }} 属性の値は計算に利用する要素の ID を空白で区切り入力します。

-

{{ non-standard_inline() }} Gecko 2.0 では {{ HTMLElement("output") }} 要素に任意のフォーム検証とエラーメッセージを定義でき、また {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, {{ Cssxref(":-moz-ui-valid") }} といった CSS 擬似クラスを適用することができます。これにより、特定の入力値ではないがビジネスルールに抵触するような計算結果の制約 (例: 「パーセンテージの合計が 100 を超えてはいけない」) を検証することができます。

-

placeholder 属性

-

{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("placeholder", "input") }} 属性は、フィールドに入力できる値のヒントを提示します。プレースホルダに指定するテキストには CR や LF を記述することはできません。

-

autofocus 属性

-

{{ htmlattrxref("autofocus", "input") }} 属性はページのロード時に自動的にフォーカスのあたるべきフォームコントロールを指定します。ユーザーの行動が優先されるため、すでに別のコントロールに入力している場合などには自動的にフォーカスされません。autofocus 属性を与えられる要素は文書中でただ 1 つです。この属性は真偽値属性であり、{{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} 要素に指定可能です。ただし、{{ htmlattrxref("autofocus", "input") }} 要素の {{ htmlattrxref("type", "input") }} 属性が hidden を値にもつ場合、この属性を利用することができません (つまり、隠れたコントロールへ自動的にフォーカスさせることはできません)。

-

label.control DOM プロパティ

-

HTMLLabelElement DOM インターフェースは HTML の {{ HTMLElement("label") }} 要素が持つ属性に加えて、新しいプロパティを備えています。control プロパティは、ラベルに結びついたコントロールを返します。つまり、このラベルがどの要素のコントロールなのかを知ることができます。コントロールは要素の {{ htmlattrxref("for", "label") }} 属性もしくは要素の最初の子孫コントロール要素から決定されます。

-

フォーム検証

-

HTML5 はフォームに入力された値をクライアントサイドで検証するための構文及び API を提供しています。この検証機能はサーバーサイドの検証を置き換えるものではありません。セキュリティやデータの整合性といった点からサーバーサイドの検証は必要です。しかし、入力したデータについてユーザーにすぐフィードバックできるため、クライアントサイドの検証はより良いユーザーエクスペリエンスを提供します。

-

{{ HTMLElement("input") }} 要素に title 属性が指定されている場合、その内容が検証に失敗した際のエラーメッセージとして表示されます。属性値が空の場合、ツールチップは表示されません。属性が指定されていない場合は、標準の検証メッセージ ({{ htmlattrxref("x-moz-errormessage") }} 属性もしくは setCustomValidity() メソッドで指定) が使用されます。

-
Note: フォームの検証はフォーム中の {{ HTMLElement("button") }} 要素ではサポートされていません。フォームの妥当状態と連動するスタイルをボタンに与えたい場合は {{ cssxref(":-moz-submit-invalid") }} 擬似クラスを利用してください。
-

フォーム検証の HTML 構文

-

次の HTML5 構文によって、フォームに入力する内容に制約をかけることができます。

-
  • {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("required", "input") }} 属性は、その要素が入力必須なことを示します。({{ HTMLElement("input") }} 要素の場合、{{ htmlattrxref("type", "input") }} 属性の値によって適用可能かどうかが異なります。)
  • {{ HTMLElement("input") }} 要素の {{ htmlattrxref("pattern", "input") }} 属性は、入力された値がとりうるべき値の形式を正規表現で指定します。
  • {{ HTMLElement("input") }} 要素の {{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性は、要素に入力可能な値の最小値/最大値を指定します。
  • {{ HTMLElement("input") }} 要素の {{ htmlattrxref("step", "input") }} 属性は、({{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性と使うことで) 入力可能な値の粒度に制約を設けます。指定可能な値にそぐわない値が入力された場合、その値は検証を通りません。
  • {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("maxlength", "input") }} 属性は、ユーザーがそのフィールドに入力できる最大文字数 (Unicode のコードポイント) を指定します。
  • {{ htmlattrxref("type", "input") }} 属性の値 url, email は、入力された値がそれぞれ妥当な URL、もしくはメールアドレスなのかを検証します。
    • -
-

{{ HTMLElement("form") }} 要素の {{ htmlattrxref("novalidate", "form") }} 属性、{{ HTMLElement("button") }} 要素の {{ htmlattrxref("formnovalidate", "button") }} 属性、{{ htmlattrxref("type", "input") }} に submit もしくは image を持つ {{ HTMLElement("input") }} 要素の {{ htmlattrxref("formnovalidate", "input") }} 属性を使用すれば、検証を行わないようにすることも可能です。これらの属性は、フォーム送信時に検証を行わないことを示します。

-

フォーム検証 API

-

次の DOM プロパティとメソッドにより、クライアントサイドのスクリプトから検証をかけることが可能です。

-
  • HTMLFormElement オブジェクトの checkValidity() メソッドは、フォームが検証を通ったかそうでないかを返します。フォームに関連づけられた要素すべてが制約を満たす場合に true を、そうでない場合は false を返します。
  • フォーム連携要素に、次のプロパティとメソッドが用意されています。
    • willValidate プロパティは、要素が制約の設定対象ではない場合に false を返します。
    • validity プロパティは、要素の妥当性状態を表す ValidityState オブジェクトを返します。
    • validationMessage プロパティは、制約を満たせない場合その要素に関連するメッセージを返します。
    • checkValidity() メソッドは、その要素が制約を満たせない場合に false を、そうでない場合は true を返します。
    • setCustomValidity() メソッドは、独自の検証メッセージを設定します。このメソッドにより、定義済みのメッセージよりもさらに細かく制約について説明できます。
    • -
-

{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5"}) }}

-

{{ HTML5ArticleTOC() }}

-- cgit v1.2.3-54-g00ecf