From 857133372aeea8c61ef654618b4f578290374c7b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 9 Feb 2022 01:29:43 +0900 Subject: Web/HTML/Element/input/time を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/input/time/index.html | 198 ++++++++++++------------ 1 file changed, 99 insertions(+), 99 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/html/element/input/time/index.html b/files/ja/web/html/element/input/time/index.html index 2355989eef..93a4dadfb6 100644 --- a/files/ja/web/html/element/input/time/index.html +++ b/files/ja/web/html/element/input/time/index.html @@ -2,59 +2,59 @@ title: slug: Web/HTML/Element/input/time tags: - - Element - - Forms + - 要素 + - フォーム - HTML - HTML Input Types - - HTML forms + - HTML フォーム - HTML input - Input - - Input Element - - Input Type - - Reference + - 入力要素 + - 入力型 + - リファレンス - Time translation_of: Web/HTML/Element/input/time --- -
{{HTMLRef("Input_types")}}
+{{HTMLRef("Input_types")}} -

{{htmlelement("input")}} 要素の time 型は、ユーザーが簡単に時刻 (時と分、任意で秒) を入力できるように設計された入力欄を生成します。

+{{htmlelement("input")}} 要素の `time` 型は、ユーザーが簡単に時刻 (時と分、任意で秒) を入力できるように設計された入力欄を生成します。 -

コントロールのユーザーインターフェイスは、ブラウザーによってまちまちです。最近のブラウザーは対応が進んでおり、 Safari は有名なブラウザーの中で唯一実装していません。 Safari やその他の <time> に対応していないブラウザーでは、このコントロールは単純な <input type="text"> に格下げされます。

+コントロールのユーザーインターフェイスは、ブラウザーによってまちまちです。最近のブラウザーは対応が進んでおり、 Safari は有名なブラウザーの中で唯一実装していません。 Safari やその他の `<time>` に対応していないブラウザーでは、このコントロールは単純な `[<input type="text">](/ja/docs/Web/HTML/Element/input/text)` に格下げされます。 -
{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}
+{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}} - +

外観

Chrome と Opera

-

Chrome/Opera では、 time コントロールはシンプルで、時と分をオペレーティングシステムのロケールに従って12時制または24時制で入力するスロットと、現在選択中の部分を増減するための上下の矢印から成ります。コントロールの値を消去する "X" ボタンが提供されています。

+Chrome/Opera では、 `time` コントロールはシンプルで、時と分をオペレーティングシステムのロケールに従って12時制または24時制で入力するスロットと、現在選択中の部分を増減するための上下の矢印から成ります。コントロールの値を消去する "X" ボタンが提供されています。 -

Chrome の12時制の time input 12-hour

+Chrome の12時制の time input 12-hour -

Chrome の24時制の time input 24-hour

+Chrome の24時制の time input 24-hour

Firefox

-

Firefox の time コントロールは Chrome のものとよく似ていますが、上下の矢印があります。これも時刻の入力には、システムのロケールに従って12時制または24時制の書式を使用します。コントロールの値を消去するための "X" ボタンがあります。

+Firefox の `time` コントロールは Chrome のものとよく似ていますが、上下の矢印があります。これも時刻の入力には、システムのロケールに従って12時制または24時制の書式を使用します。コントロールの値を消去するための "X" ボタンがあります。 -

Firefox の12時制の time input 12-hour

+Firefox の12時制の time input 12-hour -

Firefox の24時制の time input 24-hour

+Firefox の24時制の time input 24-hour

Edge

-

Edge の time コントロールはいくらかもっと精巧で、時と分を選択するスライドリールが開きます。 Chrome のように、時刻の入力にはシステムのロケールに従って12時制または24時制を使用します。

+Edge の `time` コントロールはいくらかもっと精巧で、時と分を選択するスライドリールが開きます。 Chrome のように、時刻の入力にはシステムのロケールに従って12時制または24時制を使用します。 -

Edge の12時制の time input 12-hour

+Edge の12時制の time input 12-hour -

Edge の24時制の time input 24-hour

+Edge の24時制の time input 24-hour - + @@ -67,7 +67,7 @@ translation_of: Web/HTML/Element/input/time - + @@ -76,29 +76,29 @@ translation_of: Web/HTML/Element/input/time
{{anch("Value", "値")}}{{anch("値")}} 時刻を表す {{domxref("DOMString")}}、または空欄。
IDL 属性value, valueAsDate, valueAsNumber, list.`value`, `valueAsDate`, `valueAsNumber`, `list`.
メソッド
-

値

+## 値
-

入力欄に入力された時刻を表す {{domxref("DOMString")}} です。 <input> 要素が作成されたときに、次のように {{htmlattrxref("value", "input")}} 属性の中に時刻を含めることで、既定値を設定することができます。

+入力欄に入力された時刻を表す {{domxref("DOMString")}} です。 `<input>` 要素が作成されたときに、次のように {{htmlattrxref("value", "input")}} 属性の中に時刻を含めることで、既定値を設定することができます。 
<label for="appt-time">予約時刻を選んでください: </label>
 <input id="appt-time" type="time" name="appt-time" value="13:30">
-

{{ EmbedLiveSample('value-sample1', 600, 60) }}

+{{ EmbedLiveSample('value-sample1', 600, 60) }} -

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

+次のように、 {{domxref("HTMLInputElement.value")}} プロパティを使って JavaScript の date 値を取得したり設定したりすることができます。 
var timeControl = document.querySelector('input[type="time"]');
 timeControl.value = '15:30';

時刻値の書式

-

time 入力欄の value は、常に先頭にゼロを含む24時制で hh:mm の書式であり、ユーザーのロケール (またはユーザーエージェント) に基づいて選択される入力書式とは関係ありません。時刻が秒を含む場合 ({{anch("Using the step attribute", "step 属性の使用")}}を参照) は、書式は常に hh:mm:ss です。この入力型で使用される時刻の値の形式について詳しくは、 HTML で使われる日付や時刻の形式の時刻の文字列をご覧ください。

+`time` 入力欄の `value` は、常に先頭にゼロを含む24時制で `hh:mm` の書式であり、ユーザーのロケール (またはユーザーエージェント) に基づいて選択される入力書式とは関係ありません。時刻が秒を含む場合 ({{anch("Using the step attribute", "step 属性の使用")}}を参照) は、書式は常に `hh:mm:ss` です。この入力型で使用される時刻の値の形式について詳しくは、 [HTML で使われる日付や時刻の形式](/ja/docs/Web/HTML/Date_and_time_formats)の[時刻の文字列](/ja/docs/Web/HTML/Date_and_time_formats#Time_strings)をご覧ください。 -

この例では、時刻を入力すると time 入力欄の値が、どのように変化するかを見ることができます。

+この例では、時刻を入力すると time 入力欄の値が、どのように変化するかを見ることができます。 -

最初に、 HTML を見てください。これは以前見たラベルと入力欄だけで十分にシンプルですが、 {{HTMLElement("p")}} 要素と、 time 入力欄の値を表示する {{HTMLElement("span")}} があります。

+最初に、 HTML を見てください。これは以前見たラベルと入力欄だけで十分にシンプルですが、 {{HTMLElement("p")}} 要素と、 `time` 入力欄の値を表示する {{HTMLElement("span")}} があります。 
<form>
   <label for="startTime">開始時刻: </label>
@@ -109,7 +109,7 @@ timeControl.value = '15:30';
</p> </form> -

JavaScript コードは、 time 入力欄に {{domxref("HTMLElement/input_event", "input")}} イベントを監視するコードを追加し、 input 要素の中身が変更されるたびに呼び出されるようにします。これが発生すると、 <span> 要素の中身が input 要素の新しい値で置き換えられます。

+JavaScript コードは、 time 入力欄に {{domxref("HTMLElement/input_event", "input")}} イベントを監視するコードを追加し、 input 要素の中身が変更されるたびに呼び出されるようにします。これが発生すると、 `<span>` 要素の中身が input 要素の新しい値で置き換えられます。 
var startTime = document.getElementById("startTime");
 var valueSpan = document.getElementById("value");
@@ -118,13 +118,13 @@ startTime.addEventListener("input", function() {
   valueSpan.innerText = startTime.value;
 }, false);
-

{{EmbedLiveSample("Time_value_format", 600, 80)}}

+{{EmbedLiveSample("Time_value_format", 600, 80)}} -

time 入力欄を含むフォームが送信されると、フォームのデータに含められる前に値がエンコードされます。 time 入力欄のフォームのデータ項目は、常に name=hh%3Amm の形式か、秒が含まれる場合は name=hh%3Amm%3ass の形式になります ({{anch("Using the step attribute", "step 属性の利用")}}を参照してください)。

+`time` 入力欄を含むフォームが送信されると、フォームのデータに含められる前に値がエンコードされます。 time 入力欄のフォームのデータ項目は、常に `name=hh%3Amm` の形式か、秒が含まれる場合は `name=hh%3Amm%3ass` の形式になります ({{anch("Using the step attribute", "step 属性の利用")}}を参照してください)。 -

追加の属性

+追加の属性 -

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

+すべての {{HTMLElement("input")}} 要素で共通する属性に加え、 `time` 型の入力欄は次の属性にも対応しています。 @@ -135,105 +135,105 @@ startTime.addEventListener("input", function() { - + - + - + - - + + - +
{{anch("list")}}`{{anch("list")}}` 任意の定義済みの自動補完オプションを含む<datalist> 要素の id
{{anch("max")}}`{{anch("max")}}` 受け付ける最も遅い時刻、{{anch("Time value format", "時刻値の書式")}}の構文による
{{anch("min")}}`{{anch("min")}}` 妥当な入力として受け付ける最も早い時刻
{{anch("readonly")}}論理属性で、存在する場合、 time 入力欄の内容はユーザーが編集できないことを示す`{{anch("readonly")}}`論理属性で、存在する場合、 `time` 入力欄の内容はユーザーが編集できないことを示す
{{anch("step")}}`{{anch("step")}}` ユーザーインターフェイスや制約検証に使用する刻み値
-
多くのデータ型とは異なり、時刻値は周期的範囲を持ち、値が最大値に達すると、最初の値に折り返します。例えば、 min を 14:00 に、 max を 2:00 に設定すると、許可される時間の値は午後2時から始まり、深夜を経て次の日の午前2時で終わります。詳しくは、この記事の最小値と最大値が真夜中をまたぐようにするの節をご覧ください。
+
多くのデータ型とは異なり、時刻値は周期的範囲を持ち、値が最大値に達すると、最初の値に折り返します。例えば、 `min` を `14:00` に、 `max` を `2:00` に設定すると、許可される時間の値は午後2時から始まり、深夜を経て次の日の午前2時で終わります。詳しくは、この記事の[最小値と最大値が真夜中をまたぐようにする](#Making_min_and_max_cross_midnight)の節をご覧ください。

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

{{htmlattrdef("max")}}

-

文字列で、受け付ける最も遅い時刻を示し、前述の同じ{{anch("Time value format", "時刻値の書式")}}で指定します。指定された文字列が妥当な時刻でなければ、最大値は設定されません。

+文字列で、受け付ける最も遅い時刻を示し、前述の同じ{{anch("Time value format", "時刻値の書式")}}で指定します。指定された文字列が妥当な時刻でなければ、最大値は設定されません。

{{htmlattrdef("min")}}

-

文字列で、受け付ける最も速い時刻を示し、前述の{{anch("Time value format", "時刻値の書式")}}で与えられます。指定された値が妥当な時刻の文字列でなければ、最小値は設定されません。

+文字列で、受け付ける最も速い時刻を示し、前述の{{anch("Time value format", "時刻値の書式")}}で与えられます。指定された値が妥当な時刻の文字列でなければ、最小値は設定されません。 -

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

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

{{htmlattrdef("step")}}

-

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

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

time 入力欄では、 step の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 step の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。

+`time` 入力欄では、 `step` の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 `step` の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。 -

現時点で、 time 入力欄で step に any の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。

+現時点で、 `time` 入力欄で `step` に `any` の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。

time 入力欄の利用

-

日時の入力型の中で time はブラウザーが最も広く対応していますが、まだすべてとは言えないため、日付と時刻を入力する代替手段を提供する必要があり、そうすれば Safari のユーザー (およびその他の未対応のブラウザーのユーザー) も簡単に時刻の値を入力できるようになります。

+日時の入力型の中で `time` はブラウザーが最も広く対応していますが、まだすべてとは言えないため、日付と時刻を入力する代替手段を提供する必要があり、そうすれば Safari のユーザー (およびその他の未対応のブラウザーのユーザー) も簡単に時刻の値を入力できるようになります。 -

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

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

時刻入力欄の基本的な使用

-

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

+もっとも単純な `<input type="time">` の使用方法は、次のような基本的な `<input>` と {{htmlelement("label")}} 要素の組み合わせです。 
<form>
   <label for="appt-time">予約時刻を選んでください: </label>
   <input id="appt-time" type="time" name="appt-time">
 </form>
-

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

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

入力欄の寸法の制御

-

<input type="time"> は、 {{htmlattrxref("size", "input")}} のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 CSS を使用する必要があります。

+`<input type="time">` は、 {{htmlattrxref("size", "input")}} のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 [CSS](/ja/docs/Web/CSS) を使用する必要があります。

step 属性の使用

-

{{htmlattrxref("step", "input")}} 属性を使用して、時刻を上下させるときに加減する時間の大きさを変更することができます (例えば、小さな矢印ウィジェットをクリックしたときに10分単位で時刻が動くように)。

+{{htmlattrxref("step", "input")}} 属性を使用して、時刻を上下させるときに加減する時間の大きさを変更することができます (例えば、小さな矢印ウィジェットをクリックしたときに10分単位で時刻が動くように)。
-

このプロパティはブラウザー間で異なる結果になることがあり、完全に信頼できるものではありません。

+このプロパティはブラウザー間で異なる結果になることがあり、完全に信頼できるものではありません。
-

これは整数の値を取り、増加させたい秒数と同じ値になります。既定値は60秒、または1分です。60秒 (1分) よりも小さな値を指定した場合は、 time 入力欄は時と分の隣に秒の入力領域を表示します。

+これは整数の値を取り、増加させたい秒数と同じ値になります。既定値は60秒、または1分です。60秒 (1分) よりも小さな値を指定した場合は、 `time` 入力欄は時と分の隣に秒の入力領域を表示します。 
<form>
   <label for="appt-time">予約時刻を選んでください: </label>
   <input id="appt-time" type="time" name="appt-time" step="2">
 </form>
-

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

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

上下の操作を行う矢印を表示するブラウザーである Chrome と Opera では、矢印をクリックすると秒の値が2秒単位で変わりますが、時と分には影響しません。分 (または時) の刻みは、分 (または時) の数を秒数で指定した場合のみ使用されます (120 で2分刻み、 7200 で2時間刻みなど)。

+上下の操作を行う矢印を表示するブラウザーである Chrome と Opera では、矢印をクリックすると秒の値が2秒単位で変わりますが、時と分には影響しません。分 (または時) の刻みは、分 (または時) の数を秒数で指定した場合のみ使用されます (120 で2分刻み、 7200 で2時間刻みなど)。 -

Firefox では矢印はなく、 step の値は使用されません。しかし、この値を提供すると、秒の入力欄が分の部分のとなりに追加されます。

+Firefox では矢印はなく、 `step` の値は使用されません。しかし、この値を提供すると、秒の入力欄が分の部分のとなりに追加されます。 -

step の値は Edge には効果がないようです。

+step の値は Edge には効果がないようです。
-

step を使用しても、検証は正しく動作しないようです (次の節にある通り)。

+`step` を使用しても、検証は正しく動作しないようです (次の節にある通り)。

検証

-

既定では、 <input type="time"> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。 (time 入力欄をユーザーエージェントが完全に対応していると仮定すれば) これは便利ですが、値を空文字列 ("") にすることが許されているため、値が正しい時刻文字列であることを完全に信頼することはできません。また、およそ妥当な時刻に見えるが正しくない値、例えば 25:05 を入力したりすることが可能です。

+既定では、 `<input type="time">` は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。 (`time` 入力欄をユーザーエージェントが完全に対応していると仮定すれば) これは便利ですが、値を空文字列 (`""`) にすることが許されているため、値が正しい時刻文字列であることを完全に信頼することはできません。また、およそ妥当な時刻に見えるが正しくない値、例えば `25:05` を入力したりすることが可能です。

時刻の最大値と最小値の設定

-

{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる時刻を制限することができます。次の例では、時刻の最小値を 12:00 に、時刻の最大値を 18:00 に設定しています。

+{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる時刻を制限することができます。次の例では、時刻の最小値を `12:00` に、時刻の最大値を `18:00` に設定しています。 
<form>
   <label for="appt-time">予約時刻を選んでください (営業時間 12:00～18:00): </label>
@@ -242,9 +242,9 @@ startTime.addEventListener("input", function() {
   <span class="validity"></span>
 </form>
-

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

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

上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。

+上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。 
div {
   margin-bottom: 10px;
@@ -271,7 +271,7 @@ input:valid+span:after {
   padding-left: 5px;
 }
-

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

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