diff options
| -rw-r--r-- | files/ja/web/html/element/input/date/index.html | 540 |
1 files changed, 251 insertions, 289 deletions
diff --git a/files/ja/web/html/element/input/date/index.html b/files/ja/web/html/element/input/date/index.html index 80a78a36ff..12e6ca8ad8 100644 --- a/files/ja/web/html/element/input/date/index.html +++ b/files/ja/web/html/element/input/date/index.html @@ -2,221 +2,205 @@ title: <input type="date"> slug: Web/HTML/Element/input/date tags: - - HTML - - HTML フォーム - - Input Element - - Reference - - フォーム - - フォーム入力 - - 入力型 - 日付 - 日付選択 - 要素 + - フォーム入力 + - HTML + - HTML フォーム + - Input + - 入力要素 + - 入力型 + - リファレンス +browser-compat: html.elements.input.input-date translation_of: Web/HTML/Element/input/date --- -<div>{{HTMLRef}}</div> -<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>type="date"</code></strong> 入力型は、検証付きのテキストボックスまたは特殊な日付選択インターフェイスのどちらかで、ユーザーに日付を入力させる入力欄を生成します。</span></p> +{{HTMLRef}} -<p>結果の値には年、月、日が含まれますが、時刻は含まれ<em>ません</em>。 {{HTMLElement("input/time", "time")}} および {{HTMLElement("input/datetime-local", "datetime-local")}} 入力型は時刻や日付と時刻の入力に対応しています。</p> +{{HTMLElement("input")}} 要素の **`type="date"`** は、ユーザーに日付を入力させる入力欄を、検証付きのテキストボックスまたは特殊な日付選択インターフェイスのどちらかで生成します。 -<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> +結果の値には年、月、日が含まれますが、時刻は含まれません。 {{HTMLElement("input/time", "time")}} および {{HTMLElement("input/datetime-local", "datetime-local")}} 入力型は時刻や日付と時刻の入力に対応しています。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}} -<p>入力欄のユーザーインターフェイスは、一般にブラウザーによってまちまちです。詳細は{{anch("Browser compatibility", "ブラウザーの互換性")}}を参照してください。対応していないブラウザーでは、このコントロールは単純な {{HTMLElement("input/text", '<input type="text">')}} に格下げされます。</p> +入力欄のユーザーインターフェイスは、一般にブラウザーによってまちまちです。詳細は{{anch("ブラウザーの互換性")}}を参照してください。対応していないブラウザーでは、このコントロールは単純な [`<input type="text">`](/ja/docs/Web/HTML/Element/input/text) に格下げされます。 -<p>日付を選択する専用のインターフェイスを持つブラウザーの中で、 Chrome や Opera のデータコントロールは次のように表示されます。</p> +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("値")}}</strong></td> + <td> + {{domxref("DOMString")}} で、 YYYY-MM-DD 形式の日付、または空欄を表す + </td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td> + {{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}} + </td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td> + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("readonly", "input")}}, + {{htmlattrxref("step", "input")}} + </td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td> + <code>list</code>, <code>value</code>, <code>valueAsDate</code>, + <code>valueAsNumber</code> + </td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, + {{domxref("HTMLInputElement.stepUp", "stepUp()")}} + </td> + </tr> + </tbody> +</table> -<p><img alt="“dd/mm/yyyy” と、増加/減少ボタンと、カレンダーコントロールを表示するための下向きの矢印があるテキストボックス。" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> +## 値 -<p>Edge の日付コントロールは次のように表示されます。</p> +入力欄に入力された日付を表す {{domxref("DOMString")}} です。日付は ISO8601 に従って書式化されており、これは [HTML で使われる日付や時刻の形式](/ja/docs/Web/HTML/Date_and_time_formats)の[日付の文字列](/ja/docs/Web/HTML/Date_and_time_formats#Date_strings)で説明されています。 -<p><img alt="“mm/dd/yyyy” があるが、操作をすると、3列の日付選択が表示される。" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> +次のように、日付の入力欄の既定値を {{htmlattrxref("value", "input")}} 属性に設定することができます。 -<p>Firefox の日付コントロールは次のように表示されます。</p> +```html +<input type="date" value="2017-06-01"> +``` -<p><img alt="違う形の “dd/mm/yyyy” テキストボックスで、選択可能なカレンダーコントロールを開いている。" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> +{{EmbedLiveSample('Value', 600, 40)}} -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Value", "値")}}</strong></td> - <td>{{domxref("DOMString")}} で、 YYYY-MM-DD 形式の日付、または空欄を表す</td> - </tr> - <tr> - <td><strong>イベント</strong></td> - <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> - </tr> - <tr> - <td><strong>対応している共通属性</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td> - </tr> - <tr> - <td><strong>IDL 属性</strong></td> - <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code></td> - </tr> - <tr> - <td><strong>メソッド</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> - </tr> - </tbody> -</table> +> **Note:** 表示される日付の書式は実際の `value` とは異なります。 — 表示される日付はユーザーのブラウザーに設定されたロケールに基づいた書式になりますが、解釈される `value` は常に `yyyy-mm-dd` の書式です。 -<h2 id="Value" name="Value">値</h2> +JavaScript での日付値を取得したり設定したりするには、次のように {{domxref("HTMLInputElement")}} の `value` および `valueAsNumber` プロパティで行うことができます。 -<p>入力欄に入力された日付を表す {{domxref("DOMString")}} です。日付は ISO8601 に従って書式化されており、これは <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Date_strings">日付の文字列</a>で説明されています。</p> +```js +var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01'; +console.log(dateControl.value); // "2017-06-01" と表示 +console.log(dateControl.valueAsNumber); // 1496275200000 と JavaScript タイムスタンプを表示 +``` -<p>次のように、日付の入力欄の既定値を {{htmlattrxref("value", "input")}} 属性に設定することができます。</p> +このコードは {{HTMLElement("input")}} 要素のうち `type` が `date` である最初のものを探し、値を `2017-06-01` （2017 年 6 月 1 日）に設定します。それからその値を文字列と数字の書式で読み直しています。 -<pre class="brush: html notranslate"><input type="date" value="2017-06-01"></pre> +## 追加の属性 -<p>{{EmbedLiveSample('Value', 600, 40)}}</p> +すべての {{HTMLElement("input")}} 要素で共通する属性と共に、 `date` 型の入力欄は以下の属性に対応しています。 -<div class="blockIndicator note"> -<p><strong>表示される日付の書式は実際の <code>value</code> とは異なります。</strong> — 表示される日付は<em>ユーザーのブラウザーに設定されたロケールに基づいて</em>書式になりますが、解釈された <code>value</code> は常に <code>yyyy-mm-dd</code> の書式です。</p> -</div> +### max -<p>日付の値は JavaScript で入力要素の {{domxref("HTMLInputElement.value", "value")}} および {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} プロパティを用いて、次のように取得したり設定したりすることができます。</p> +受け付ける最も遅い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以降になった場合、要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。 `max` 属性の値が `yyyy-mm-dd` の書式のありうる日付ではない場合、要素は最大の日付値を持ちません。 -<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]'); -dateControl.value = '2017-06-01'; -console.log(dateControl.value); // "2017-06-01" と表示 -console.log(dateControl.valueAsNumber); // 1496275200000 と UNIX タイムスタンプを表示</pre> - -<p>このコードは {{HTMLElement("input")}} 要素のうち <code>type</code> が <code>date</code> である最初のものを探し、値を <code>2017-06-01</code> (2017年6月1日) に設定します。それからその値を文字列と数字の書式で読み直しています。</p> - -<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> - -<p>すべての {{HTMLElement("input")}} 要素で共通する属性と共に、 <code>date</code> 型の入力欄は以下の属性にも対応しています。</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">属性</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>受け付けられる最も遅い日付</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>受け付けられる最も早い日付</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>上下スピナーボタンで値を調整する時や、日付の検証の時の<em>刻み間隔</em></td> - </tr> - </tbody> -</table> +`max` と `min` の両方の属性を設定する場合、この値は `min` 属性にあるもの**より遅いか、同じ**日付文字列でなければなりません。 -<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> +### min -<p>受け付ける最も遅い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以降になった場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が <code>yyyy-mm-dd</code> の書式のありうる日付ではない場合、要素は最大の日付値を持ちません。</p> +受け付ける最も早い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以前になった場合、要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。 `min` 属性の値が `yyyy-mm-dd` の書式のありうる日付でない場合、要素は最小の日付値を持ちません。 -<p><code>max</code> と <code>min</code> の両方の属性が設定された場合、この値は <code>min</code> 属性にあるもの<strong>より遅いか、同じ</strong>日付文字列でなければなりません。</p> +`max` と `min` の両方の属性を設定する場合、この値は `max` 属性で指定されたもの**より早いか、同じ**日付である必要があります。 -<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> +### step -<p>受け付ける最も早い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以前になった場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が <code>yyyy-mm-dd</code> の書式のありうる日付でない場合、要素は最小の日付値を持ちません。</p> +`step` 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 `any` です。刻みの基準値に等しい値（指定されていれば `{{anch("min")}}`、 {{htmlattrxref("value", "input")}} そうでなければ適切な既定値）のみが妥当となります。 -<p><code>max</code> と <code>min</code> の両方の属性が設定された場合、この値は <code>max</code> 属性で指定されたもの<strong>より早いか、同じ</strong>日付を指定する必要があります。</p> +文字列値の `any` は刻みがなく、どの値でも許可されることを意味します（`{{anch("min")}}` や `{{anch("max")}}` など、他の制約に制限されます）。 -<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> +> **Note:** ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。 -<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> +`date` 入力欄では、 `step` の値は日単位で指定します。また、 86,400,000 に `step` を乗じた値に等しいミリ秒数として扱われます（数値はミリ秒単位であるため）。 `step` の既定値は `1` であり、 1 日を表します。 -<p><code>date</code> 入力欄では、 <code>step</code> の値は日単位で指定します。また、 86,400,000 に <code>step</code> を乗じた値に等しいミリ秒数として扱われます (数値はミリ秒単位であるため)。 <code>step</code> の既定値は <code>1</code> であり、1日を表します。</p> +> **Note:** `any` を `step` 属性の値として指定すると、 `1` を `date` 入力欄に設定したのと同じ効果になります。 -<div class="blockIndicator note"> -<p><code>any</code> を <code>step</code> 属性の値として指定すると、 <code>1</code> を <code>date</code> 入力欄に設定したのと同じ効果になります。</p> -</div> - -<h2 id="Using_date_inputs" name="Using_date_inputs">date 入力欄の使用</h2> +## date 入力欄の使用 -<p>日付入力は便利に見えます。 — 日付の選択に簡単なインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、今のところブラウザーの対応が限定されているため、 <code><input type="date"></code> には問題があります。</p> +日付入力は便利に見えます。 — 日付の選択に簡単なインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、今のところブラウザーの対応が限定されているため、 `<input type="date">` には問題があります。 -<p>この節では、 <code><input type="date"></code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}} を参照してください)。</p> +この節では、 `<input type="date">` の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("ブラウザーの互換性の扱い")}} を参照してください)。 -<div class="blockIndicator note"> -<p>今後ブラウザーの互換性がもっと普遍的になり、この問題が消滅することを願います。</p> -</div> +> **Note:** 今後ブラウザーの互換性がもっと普遍的になり、この問題が消滅することを願います。 -<h3 id="Basic_uses_of_date" name="Basic_uses_of_date">日付入力の基本的な使用</h3> +## 日付入力の基本的な使用 -<p>もっとも単純な <code><input type="date"></code> の使用方法は、次のように基本的な <code><input></code> と {{htmlelement("label")}} 要素の組み合わせです。</p> +もっとも単純な `<input type="date">` の使用方法は、次のように基本的な `<input>` と {{htmlelement("label")}} 要素の組み合わせです。 -<pre class="brush: html notranslate"><form action="https://example.com"> - <label> +```html +<form action="https://example.com"> + <label> 誕生日を入力してください。 - <input type="date" name="bday"> - </label> + <input type="date" name="bday"> + </label> - <p><button>Submit</button></p> -</form></pre> + <p><button>Submit</button></p> +</form> +``` -<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p> +{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}} -<p>この HTML は入力された日付を <code>bday</code> キーに入れて <code>https://example.com</code> に送ります。 — 結果の URL は <code>https://example.com/?bday=1955-06-08</code> のようになります。</p> +この HTML は入力された日付を `bday` キーに入れて `https://example.com` に送ります。 — 結果の URL は `https://example.com/?bday=1955-06-08` のようになります。 -<h3 id="Setting_maximum_and_minimum_dates" name="Setting_maximum_and_minimum_dates">日付の最大値と最小値の設定</h3> +### 日付の最大値と最小値の設定 -<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日付を制限することができます。次の例では、日付の最小値を <code>2017-04-01</code> に、日付の最大値を <code>2017-04-30</code> に設定しています。</p> +{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日付を制限することができます。次の例では、日付の最小値を `2017-04-01` に、日付の最大値を `2017-04-30` に設定しています。 -<pre class="brush: html notranslate"><form> - <label for="party">希望するパーティーの日を選んでください。 - <input type="date" name="party" min="2017-04-01" max="2017-04-30"> - </label> -</form></pre> +```html +<form> + <label>希望するパーティーの日を選んでください。 + <input type="date" name="party" min="2017-04-01" max="2017-04-30"> + </label> +</form> +``` -<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p> +{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}} -<p>この結果は、2017年の4月の日付のみが選択できるようになります。 — テキストボックスの年と月の部分が編集できなくなり、日付選択ウィジェットで4月以外にスクロールすることができなくなります。</p> +この結果は、 2017 年の 4 月の日付のみが選択できるようになります。 — テキストボックスの年と月の部分が編集できなくなり、日付選択ウィジェットで 4 月以外にスクロールすることができなくなります。 -<div class="note"> -<p><strong>注</strong>: {{htmlattrxref("step", "input")}} 属性を使用すると、日付が加算するたびに飛ばす日数を設定できるはずです（例えば、土曜日のみを選択できるようにしたい場合など）。しかし、執筆時点でどの実装も正しく動作していないようです。</p> -</div> +> **Note:** {{htmlattrxref("step", "input")}} 属性を使用すると、日付が加算するたびに飛ばす日数を設定できるはずです（例えば、土曜日のみを選択できるようにしたい場合など）。しかし、執筆時点でどの実装も正しく動作していないようです。 -<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3> +### 入力欄の寸法の制御 -<p><code><input type="date"></code> は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更するには <a href="/ja/docs/Web/CSS">CSS</a> を推奨します。</p> +`<input type="date">` は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更するには [CSS](/ja/docs/Web/CSS) を推奨します。 -<h2 id="Validation" name="Validation">検証</h2> +## 検証 -<p>既定で、 <code><input type="date"></code> は入力された値をその書式を超えて検証しません。インターフェイスは一般的に、日付でないものの入力をさせないからです。 — これは便利です。 — しかし、入力欄を空のままにしたり、 <code>text</code> 型にフォールバックするブラウザーにおいて、無効な日付を入力したりすることが可能です (例えば4月32日など)。</p> +既定で、 `<input type="date">` は入力された値をその書式を超えて検証しません。インターフェイスは一般的に、日付でないものの入力をさせないからです。 — これは便利です。 — しかし、入力欄を空のままにしたり、 `text` 型に代替されるするブラウザーにおいて、無効な日付を入力したりすることが可能です（例えば 4 月 32 日など）。 -<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} を使用して有効な日付を制限すると ({{anch("Setting maximum and minimum dates", "日付の最大値と最小値の設定")}}を参照)、対応しているブラウザーは、範囲を外れたの日付を送信しようとしたときにエラーを表示するでしょう。しかし、ユーザーの端末が日付選択に完全に対応していない場合、値がこれらの日付の中にあることを保証するためには、送信された結果を再度チェックしなければならないでしょう。</p> +{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} を使用して有効な日付を制限すると（{{anch("日付の最大値と最小値の設定")}}を参照）、対応しているブラウザーは、範囲を外れたの日付を送信しようとしたときにエラーを表示するでしょう。しかし、ユーザーの端末が日付選択に完全に対応していない場合、値がこれらの日付の中にあることを保証するためには、送信された結果を再度チェックしなければならないでしょう。 -<p>{{htmlattrxref("required", "input")}} 属性を使用して、日付の入力を必須にすることもできます。 — 空の日付欄を送信しようとするとエラーが表示されるでしょう。これは、テキスト入力欄で代替されたとしても、ほとんどのブラウザーで動作するはずです。</p> +{{htmlattrxref("required", "input")}} 属性を使用して、日付の入力を必須にすることもできます。 — 空の日付欄を送信しようとするとエラーが表示されるでしょう。これは、テキスト入力欄で代替されたとしても、ほとんどのブラウザーで動作するはずです。 -<p>日付の最小値と最大値の例と、入力欄を必須にする例を見てみましょう。</p> +日付の最小値と最大値の例と、入力欄を必須にする例を見てみましょう。 -<pre class="brush: html notranslate"><form> - <label> +```html +<form> + <label> 推奨したいパーティーの日を選択してください (必須、4月1日～20日): - <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> - <span class="validity"></span> - </label> - - <p> - <button>Submit</button> - </p> -</form></pre> + <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </label> -<p>不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。</p> + <p> + <button>送信</button> + </p> +</form> +``` -<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> +不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。 -<p>対応しているブラウザーで入力しなかった場合のスクリーンショットです。</p> +{{EmbedLiveSample('Validation', 600, 100)}} -<p><img alt="入力欄に吹き出しが重なっており、その中に橙色のビックリマークのアイコンと “Please fill in this field.” というメッセージがある。" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +上記の例で使用されている CSS です。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)を使用して、現在の値が妥当かどうかで入力欄の隣にアイコンを追加しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。 -<p>上記の例で使用されている CSS です。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を使用して、現在の値が妥当かどうかで入力欄の隣にアイコンを追加しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p> - -<pre class="brush: css notranslate">label { +```css +label { display: flex; align-items: center; } @@ -231,49 +215,46 @@ input:invalid + span::after { input:valid+span::after { content: '✓'; -}</pre> - -<div class="warning"> -<p><strong>重要</strong>: クライアント側のフォーム検証は、サーバー上の検証の<em>代用にはなりません</em>。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したりすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。</p> -</div> +} +``` -<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> +> **Warning:** クライアント側のフォーム検証は、サーバー上の検証の代用にはなりません。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したりすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。 -<p>前述のように、現時点で日付入力を書く上で一番の問題は{{anch("Browser compatibility", "ブラウザーの対応")}}です。 Android 版 Firefox の日付選択はこの例のように表示されます。</p> +## ブラウザーの対応の扱い -<p><img alt="ウェブページとブラウザーの UI の上にモーダルで浮動しているポップアップのカレンダー選択" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> +前述のように、現時点で日付入力を書く上で一番の問題は{{anch("ブラウザーの互換性")}}です。 -<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱い方の両方で問題を生みます。</p> +対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性（表示されるコントロールが異なること）とデータの扱い方の両方で問題を生みます。 -<p>2番目の問題はより深刻です。日付入力に対応していると、値が <code>yyyy-mm-dd</code> の書式で正規化されます。しかし、文字列入力欄では、ブラウザーには日付がどの書式で入力されるかの認識がなく、また、以下のように人間が日付を書く書式は様々なものがあります。</p> +2 番目の問題はより深刻です。日付入力に対応していると、値が `yyyy-mm-dd` の書式で正規化されます。しかし、文字列入力欄では、ブラウザーには日付がどの書式で入力されるかの認識がなく、また、以下のように人間が日付を書く書式は様々なものがあります。 -<ul> - <li><code>ddmmyyyy</code></li> - <li><code>dd/mm/yyyy</code></li> - <li><code>mm/dd/yyyy</code></li> - <li><code>dd-mm-yyyy</code></li> - <li><code>mm-dd-yyyy</code></li> - <li><code>Month dd, yyyy</code></li> -</ul> +- `ddmmyyyy` +- `dd/mm/yyyy` +- `mm/dd/yyyy` +- `dd-mm-yyyy` +- `mm-dd-yyyy` +- `Month dd, yyyy` -<p>これを回避する方法の一つは、日付入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。日付選択ではこれを使用しませんが、文字列入力にフォールバックされたときには使用されます。例えば、次の例を未対応のブラウザーで見てみてください。</p> +これを回避する方法の一つは、日付入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。日付選択ではこれを使用しませんが、文字列入力に代替されたときには使用されます。例えば、次の例を未対応のブラウザーで見てみてください。 -<pre class="brush: html notranslate"><form> - <label for="bday">誕生日を入力してください: - <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> - <span class="validity"></span> - </label> - <p> - <button>送信</button> - </p> -</form></pre> +```html +<form> + <label>誕生日を入力してください。 + <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> + <span class="validity"></span> + </label> + <p> + <button>送信</button> + </p> +</form> +``` -<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p> +{{EmbedLiveSample('Handling_browser_support', 600, 100)}} -<p>送信ボタンを押すと、入力が <code>####-##-##</code> のパターン (<code>#</code> は数字の0から9) に一致しない場合はエラーメッセージが表示され、入力欄が無効として強調表示されるのが分かるでしょう。もちろん、これでユーザーが無効な日付や不正な書式を入力するのを止めることはできません。ですから、まだ問題があります。</p> +送信ボタンを押すと、入力が `####-##-##` のパターン (`#` は数字の 0 から 9) に一致しない場合はエラーメッセージが表示され、入力欄が無効として強調表示されるのが分かるでしょう。もちろん、これでユーザーが無効な日付や不正な書式を入力するのを止めることはできません。ですから、まだ問題があります。 -<div class="hidden"> -<pre class="brush: css notranslate">span { +```css hidden +span { position: relative; } @@ -288,63 +269,65 @@ input:invalid + span::after { input:valid + span::after { content: '✓'; -}</pre> -</div> - -<p>現時点では、ブラウザーに依存しない方法でフォームで日付を扱う最善の方法は、年月日を別々なコントロールに入力するようにするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> のような JavaScript ライブラリを使用することです。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<p>この例では、日付を選択するユーザーインターフェイスの要素を2組作成します。ネイティブの <code><input type="date"></code> による選択と、ネイティブの日付入力に対応していない古いブラウザー向けの、3つの {{htmlelement("select")}} 要素です。</p> - -<p>{{EmbedLiveSample('Examples', 600, 100)}}</p> - -<h3 id="HTML">HTML</h3> - -<p>HTML は次のようになります。</p> - -<pre class="brush: html notranslate"><form> - <div class="nativeDatePicker"> - <label for="bday">誕生日を入力してください:</label> - <input type="date" id="bday" name="bday"> - <span class="validity"></span> - </div> - <p class="fallbackLabel">誕生日を入力してください:</p> - <div class="fallbackDatePicker"> - <span> - <select id="year" name="year"> - </select> - <label for="year">年</label> - </span> - <span> - <select id="month" name="month"> - <option selected>1</option> - <option>2</option> - <option>3</option> - <option>4</option> - <option>5</option> - <option>6</option> - <option>7</option> - <option>8</option> - <option>9</option> - <option>10</option> - <option>11</option> - <option>12</option> - </select> - <label for="month">月</label> - </span> - <span> - <select id="day" name="day"> - </select> - <label for="day">日</label> - </span> - </div> -</form></pre> - -<p>月は (常に同じなので) ハードコーディングされていますが、年と日の値は、現在の年、および現在選択されている年と月によってそれぞれ動的に生成されます (どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください)。</p> - -<div class="hidden"> -<pre class="brush: css notranslate">span { +} +``` + +現時点では、ブラウザーに依存しない方法でフォームで日付を扱う最善の方法は、年月日を別々なコントロールに入力するようにするか、 [jQuery date picker](https://jqueryui.com/datepicker/) のような JavaScript ライブラリーを使用することです。 + +## 例 + +この例では、日付を選択するユーザーインターフェイスの要素を 2 組作成します。ネイティブの `<input type="date">` による選択と、ネイティブの日付入力に対応していない古いブラウザー向けの、 3 つの {{htmlelement("select")}} 要素です。 + +{{EmbedLiveSample('Examples', 600, 100)}} + +### HTML + +HTML は次のようになります。 + +```html +<form> + <div class="nativeDatePicker"> + <label for="bday">誕生日を入力してください。</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">誕生日を入力してください。</p> + <div class="fallbackDatePicker"> + <span> + <select id="year" name="year"> + </select> + <label for="year">年</label> + </span> + <span> + <select id="month" name="month"> + <option selected>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + <option>6</option> + <option>7</option> + <option>8</option> + <option>9</option> + <option>10</option> + <option>11</option> + <option>12</option> + </select> + <label for="month">月</label> + </span> + <span> + <select id="day" name="day"> + </select> + <label for="day">日</label> + </span> + </div> +</form> +``` + +月は (常に同じなので) ハードコーディングされていますが、年と日の値は、現在の年、および現在選択されている年と月によってそれぞれ動的に生成されます（どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください）。 + +```css hidden +span { padding-left: 5px; } @@ -354,16 +337,17 @@ input:invalid + span::after { input:valid + span::after { content: '✓'; -}</pre> -</div> +} +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<p>もう一つの面白い部分は、機能の検出コードです。 — ブラウザーが <code><input type="date"></code> に対応しているかどうかを検出するためのものです。</p> +もう一つの面白い部分は、機能の検出コードです。 — ブラウザーが `<input type="date">` に対応しているかどうかを検出するためのものです。 -<p>新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>date</code> に設定して、すぐにどの型になったのかをチェックします。対応していないブラウザーでは、 <code>text</code> が返されます。これは、 <code>date</code> 型が <code>text</code> 型へフォールバックされるためです。 <code><input type="date"></code> に対応していない場合は、ネイティブの日付選択を非表示にして、フォールバック ({{htmlelement("select")}}) 表示します。</p> +新たな {{htmlelement("input")}} 要素を生成し、その `type` を `date` に設定して、すぐにどの型になったのかをチェックします。対応していないブラウザーでは、 `text` が返されます。これは、 `date` 型が `text` 型へ代替されるためです。 `<input type="date">` に対応していない場合は、ネイティブの日付選択を非表示にして、代替の ({{htmlelement("select")}}) 表示します。 -<pre class="brush: js notranslate">// 変数を定義 +```js +// 変数を定義 var nativePicker = document.querySelector('.nativeDatePicker'); var fallbackPicker = document.querySelector('.fallbackDatePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); @@ -372,11 +356,11 @@ var yearSelect = document.querySelector('#year'); var monthSelect = document.querySelector('#month'); var daySelect = document.querySelector('#day'); -// 最初はフォールバックを隠す +// 最初は代替を隠す fallbackPicker.style.display = 'none'; fallbackLabel.style.display = 'none'; -// 新しい日付入力が文字列入力にフォールバックされるかどうか +// 新しい日付入力が文字列入力に代替されるかどうか var test = document.createElement('input'); try { @@ -387,7 +371,7 @@ try { // もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する if(test.type === 'text') { - // ネイティブの日付選択を隠してフォールバック版を表示 + // ネイティブの日付選択を隠して代替版を表示 nativePicker.style.display = 'none'; fallbackPicker.style.display = 'block'; fallbackLabel.style.display = 'block'; @@ -400,7 +384,7 @@ if(test.type === 'text') { function populateDays(month) { // delete the current set of <option> elements out of the - // day <select>, ready for the next set to be injected + // day <select>, ready for the next set to be injected while(daySelect.firstChild){ daySelect.removeChild(daySelect.firstChild); } @@ -408,19 +392,19 @@ function populateDays(month) { // 挿入する日数を保持する変数を作成 var dayNum; - // 31日か30日か？ + // 31 日か 30 日か？ if(month === '1' | month === '3' | month === '5' | month === '7' | month === '8' | month === '10' | month === '12') { dayNum = 31; } else if(month === '4' | month === '6' | month === '9' | month === '11') { dayNum = 30; } else { - // 2月の場合は、閏年かどうかを計算する + // 2 月の場合は、閏年かどうかを計算する var year = yearSelect.value; var isLeap = new Date(year, 1, 29).getMonth() == 1; isLeap ? dayNum = 29 : dayNum = 28; } - // <select> に正しい数の新しい <option> 要素を挿入 + // <select> に正しい数の新しい <option> 要素を挿入 for(i = 1; i <= dayNum; i++) { var option = document.createElement('option'); option.textContent = i; @@ -456,7 +440,7 @@ function populateYears() { var date = new Date(); var year = date.getFullYear(); - // 今年から100年前までの年が <select> で選択できるようにする + // 今年から 100 年前までの年が <select> で選択できるようにする for(var i = 0; i <= 100; i++) { var option = document.createElement('option'); option.textContent = year-i; @@ -464,7 +448,7 @@ function populateYears() { } } -// 年や月の <select> 値が変更されたら、 populateDays() を +// 年や月の <select> 値が変更されたら、 populateDays() を // 再実行して日数を調整する yearSelect.onchange = function() { populateDays(monthSelect.value); @@ -481,45 +465,23 @@ var previousDay; // 使い方は populateDays() を参照 daySelect.onchange = function() { previousDay = daySelect.value; -}</pre> +} +``` -<div class="note"> -<p><strong>注</strong>: 53週ある年もあることを忘れないでください (<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照)。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p> +> **Note:** 53 週ある年もあることを忘れないでください（[年あたりの週数](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。 </div> -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sec-forms.html#date-state-typedate', '<input type="date">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +## 仕様書 + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("html.elements.input.input-date")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li> - <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li> - <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a></li> - <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> -</ul> +- 全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス +- [日付と時刻の選択のチュートリアル](/ja/docs/Learn/Forms/Basic_native_form_controls#date_and_time_picker) +- [HTML で使われる日付や時刻の形式](/ja/docs/Web/HTML/Date_and_time_formats) +- [CSS プロパティの互換性](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls) |