From 151b9b91cc951f9e05205b80f7b0803b8b51f9a0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 9 Feb 2022 00:29:49 +0900 Subject: Web/HTML/Element/input/month を移行準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/input/month/index.html | 192 +++++++++++------------ 1 file changed, 96 insertions(+), 96 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/html/element/input/month/index.html b/files/ja/web/html/element/input/month/index.html index fd93187747..7fc568b363 100644 --- a/files/ja/web/html/element/input/month/index.html +++ b/files/ja/web/html/element/input/month/index.html @@ -3,42 +3,42 @@ title: slug: Web/HTML/Element/input/month tags: - Date picker - - Element + - 要素 - Form input - - Forms + - フォーム - HTML - - HTML forms + - HTML フォーム - HTML input - Input - - Input Element - - Input Type + - 入力要素 + - 入力型 - Number - - Reference + - リファレンス - month translation_of: Web/HTML/Element/input/month --- -
{{HTMLRef("Input_types")}}
+{{HTMLRef("Input_types")}} -

{{HTMLElement("input")}} 要素の month 型は、ユーザーが年と月を入力できるようにする入力フィールドを作成し、年と月を簡単に入力できるようにします。値は "YYYY-MM" の形式の文字列で、 YYYY は4桁の年、 MM は月の番号です。

+{{HTMLElement("input")}} 要素の `month` 型は、ユーザーが年と月を入力できるようにする入力フィールドを作成し、年と月を簡単に入力できるようにします。値は "`YYYY-MM`" の形式の文字列で、 `YYYY` は4桁の年、 `MM` は月の番号です。 -
{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}
+{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}} - + -

コントロールのユーザーインターフェイスは、一般にブラウザーによって異なります。現時点では対応が不安定であり、デスクトップ版の Chrome/Opera と Edge — および最新のバージョンのモバイルブラウザー — のみに利用可能な実装があります。 month 入力欄に対応していないブラウザーでは、コントロールは単純な <input type="text"> に格下げされますが、入力されたテキストが期待されている形式であることを保証するための自動検証が行われることもあります。

+コントロールのユーザーインターフェイスは、一般にブラウザーによって異なります。現時点では対応が不安定であり、デスクトップ版の Chrome/Opera と Edge — および最新のバージョンのモバイルブラウザー — のみに利用可能な実装があります。 `month` 入力欄に対応していないブラウザーでは、コントロールは単純な `[<input type="text">](/ja/docs/Web/HTML/Element/input/text)` に格下げされますが、入力されたテキストが期待されている形式であることを保証するための自動検証が行われることもあります。 -

month に対応していないブラウザーを使用している場合のために、このスクリーンショットで Chrome と Opera でどのように見えるかを示します。右端にある下向き矢印をクリックすると、年と月を選択できる日付選択が表示されます。

+`month` に対応していないブラウザーを使用している場合のために、このスクリーンショットで Chrome と Opera でどのように見えるかを示します。右端にある下向き矢印をクリックすると、年と月を選択できる日付選択が表示されます。 -

+ -

Microsoft Edge では、 month コントロールはこのように表示されます。

+Microsoft Edge では、 `month` コントロールはこのように表示されます。 -

+ - + @@ -51,7 +51,7 @@ translation_of: Web/HTML/Element/input/month - + @@ -60,24 +60,24 @@ translation_of: Web/HTML/Element/input/month
{{anch("Value", "値")}}{{anch("値")}} 年と月を表す {{domxref("DOMString")}}、または空欄
IDL 属性value`value`
メソッド
-

値

+## 値 -

{{domxref("DOMString")}} で、入力欄に入力された年と月の値を YYYY-MM (4桁以上の年に続いてハイフン ("-")、続いて2桁の月) の形式で表します。この入力型で使用される時刻の値の形式について詳しくは、 HTML で使われる日付や時刻の形式の月の文字列をご覧ください。

+{{domxref("DOMString")}} で、入力欄に入力された年と月の値を YYYY-MM (4桁以上の年に続いてハイフン ("`-`")、続いて2桁の月) の形式で表します。この入力型で使用される時刻の値の形式について詳しくは、 [HTML で使われる日付や時刻の形式](/ja/docs/Web/HTML/Date_and_time_formats)の[月の文字列をご覧ください。](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings) -

入力コントロールの既定値は、次のように {{htmlattrxref("value", "input")}} 属性に年と月を入れることで設定することができます。

+[入力コントロールの既定値は、次のように {{htmlattrxref("value", "input")}} 属性に年と月を入れることで設定することができます。](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings) 
<label for="bday-month">生まれた月は？</label>
 <input id="bday-month" type="month" name="bday-month" value="2017-06">
-

{{EmbedLiveSample('value-example-1', 600, 60)}}

+[{{EmbedLiveSample('value-example-1', 600, 60)}}](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)
-

一点気を付けなければならないことは、表示される日付の書式は実際の value とは異なるということです。多くの{{Glossary("user agent", "ユーザーエージェント")}}は、年と月をユーザーのオペレーティングシステムに設定されたロケールに適した形式で表示しますが、日付の value は常に yyyy-MM の書式です。

+[一点気を付けなければならないことは、表示される日付の書式は実際の `value` とは異なるということです。多くの{{Glossary("user agent", "ユーザーエージェント")}}は、年と月をユーザーのオペレーティングシステムに設定されたロケールに適した形式で表示しますが、日付の `value` は常に `yyyy-MM` の書式です。](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings) -

When the above value is submitted to the server, for example, it will look like bday-month=1978-06.

+[When the above value is submitted to the server, for example, it will look like `bday-month=1978-06`.](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings) -

次のように、 JavaScript で {{domxref("HTMLInputElement.value", "value")}} プロパティを使用して、日付の値を取得したり設定したりすることもできます。

+[次のように、 JavaScript で {{domxref("HTMLInputElement.value", "value")}} プロパティを使用して、日付の値を取得したり設定したりすることもできます。](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)
-

追加の属性

+

[追加の属性](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)

-

すべての {{HTMLElement("input")}} 型で共通する属性に加え、 month 型の入力欄は次の属性にも対応しています。

+[すべての {{HTMLElement("input")}} 型で共通する属性に加え、 `month` 型の入力欄は次の属性にも対応しています。](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings) - - + + - - + + - - + + - - + + - - + + - - + +
属性説明[属性](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)[説明](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)
{{anch("list")}}オプションで自動補完の定義済みの選択肢を含む <datalist> 要素の id[`{{anch("list")}}`](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)[オプションで自動補完の定義済みの選択肢を含む <datalist> 要素の id](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)
{{anch("max")}}受け付ける最新の年月[`{{anch("max")}}`](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)[受け付ける最新の年月](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)
{{anch("min")}}受け付ける最古の年月[`{{anch("min")}}`](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)[受け付ける最古の年月](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)
{{anch("readonly")}}論理属性で、存在すれば、入力欄の値が編集できないことを示す[`{{anch("readonly")}}`](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)[論理属性で、存在すれば、入力欄の値が編集できないことを示す](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)
{{anch("step")}}上下の矢印で値を調整する時や、検証に使用する刻み値[`{{anch("step")}}`](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)[上下の矢印で値を調整する時や、検証に使用する刻み値](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)
-

{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}

+

[{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)

-

{{htmlattrdef("max")}}

+

[{{htmlattrdef("max")}}](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)

-

最新の年月で、上記の{{anch("Value", "値")}}で説明した文字列の書式です。要素に入力された {{htmlattrxref("value", "input")}} がこの日付よりも後の場合、要素は制約検証に失敗します。 max 属性の値が "yyyy-MM" の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。

+[最新の年月で、上記の{{anch("値")}}で説明した文字列の書式です。要素に入力された {{htmlattrxref("value", "input")}} がこの日付よりも後の場合、要素は](/ja/docs/Web/HTML/Date_and_time_formats#Month_strings)[制約検証](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)に失敗します。 `max` 属性の値が "`yyyy-MM`" の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。 -

この値は min 属性で指定されたものより後か、同じ年月を指定する必要があります。

+この値は `min` 属性で指定されたものより後か、同じ年月を指定する必要があります。

{{htmlattrdef("min")}}

-

受け付ける最古の年月で、前述と同じ yyyy-MM の書式です。要素の {{htmlattrxref("value", "input")}} がこれより前の場合、要素は制約検証に失敗します。 min 属性の値が "yyyy-MM-dd" の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。

+受け付ける最古の年月で、前述と同じ `yyyy-MM` の書式です。要素の {{htmlattrxref("value", "input")}} がこれより前の場合、要素は[制約検証](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)に失敗します。 `min` 属性の値が "`yyyy-MM-dd`" の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。 -

この値は max 属性で指定されたものより前か、同じ年月を指定する必要があります。

+この値は `max` 属性で指定されたものより前か、同じ年月を指定する必要があります。

{{htmlattrdef("readonly")}}

-

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。

+論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。
-

注: 読み取り専用フィールドは値を持てないため、 required は readonly 属性も指定されている入力欄には効果がありません。

+注: 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。

{{htmlattrdef("step")}}

-

{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}

+{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}} -

date 入力欄では、 step の値は月数で指定され、倍率は1です (数値も月単位であるため)。 step の既定値は 1 です。

+`date` 入力欄では、 `step` の値は月数で指定され、倍率は1です (数値も月単位であるため)。 `step` の既定値は 1 です。

month 入力欄の使用

-

日付に関する入力欄は (month を含め) 一見すると便利に見えます。日付の選択に簡単なユーザーインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、現時点ではブラウザーの対応が限定されているため、 <input type="month"> には問題があります。

+日付に関する入力欄は (`month` を含め) 一見すると便利に見えます。日付の選択に簡単なユーザーインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、現時点ではブラウザーの対応が限定されているため、 `<input type="month">` には問題があります。 -

<input type="month"> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}} を参照してください)。

+`<input type="month">` の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}} を参照してください)。

月入力の基本的な使用

-

もっとも単純な <input type="month"> の使用方法は、次のように基本的な {{HTMLElement("input")}} と {{htmlelement("label")}} 要素の組み合わせです。

+もっとも単純な `<input type="month">` の使用方法は、次のように基本的な {{HTMLElement("input")}} と {{htmlelement("label")}} 要素の組み合わせです。 
<form>
   <label for="bday-month">生まれた月を入力してください。</label>
   <input id="bday-month" type="month" name="bday-month">
 </form>
-

{{EmbedLiveSample('Basic_uses_of_month', 600, 40)}}

+{{EmbedLiveSample('Basic_uses_of_month', 600, 40)}}

日付の最大値と最小値の設定

-

{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日付の範囲を制限することができます。次の例では、日付の最小値を 1900-01 に、日付の最大値を 1999-12 に指定しています。

+{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日付の範囲を制限することができます。次の例では、日付の最小値を `1900-01` に、日付の最大値を `1999-12` に指定しています。 
<form>
   <label for="bday-month">生まれた月を入力してください。</label>
@@ -181,9 +181,9 @@ monthControl.value = '1978-06';
min="1900-01" max="1999-12"> </form> -

{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}

+{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}} -

次のような結果になります。

+次のような結果になります。