From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../learn/html/forms/html5_updates/index.html | 46 ++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 files/ja/orphaned/learn/html/forms/html5_updates/index.html (limited to 'files/ja/orphaned/learn/html') 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 +--- +

{{ gecko_minversion_header("2") }}

+

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

+

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

+

<input> 要素

+

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

+ +

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

+

<form> 要素

+

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

+

フォーム検証 API

+

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

+ +

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

+

{{ HTML5ArticleTOC() }}

-- cgit v1.2.3-54-g00ecf