1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: 'HTML 属性: min'
slug: Web/HTML/Attributes/min
tags:
- Attribute
- Attributes
- Constraint validation
- min
translation_of: Web/HTML/Attributes/min
---
<p>{{HTMLSidebar}}</p>
<p><span class="seoSummary"><strong><code>min</code></strong> 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の<code><a href="/ja/docs/Web/HTML/Element/input#attr-value">値</a></code>がこれより大きい場合、その要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。この値は、 <code>max</code> 属性の値以下でなければなりません。 <code>min</code> 属性が指定されていないか無効であった場合、最小値は適用されません。</span></p>
<p>これは数値入力型、例えば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型や {{htmlelement('meter')}} 要素で有効であり、 <code>min</code> 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。</p>
<h3 id="Syntax" name="Syntax">構文</h3>
<table class="standard-table">
<caption><code>min</code> の構文 (入力 <code>type</code> 別)</caption>
<thead>
<tr>
<th>入力型</th>
<th>構文</th>
<th>例</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{HTMLElement("input/date", "date")}}</td>
<td><code class="brush: html">yyyy-mm-dd</code></td>
<td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/month", "month")}}</td>
<td><code class="brush: html">yyyy-mm</code></td>
<td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/week", "week")}}</td>
<td><code class="brush: html">yyyy-W##</code></td>
<td><code class="brush: html"><input type="week" min="2019-W23" step=""></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/time", "time")}}</td>
<td><code class="brush: html">hh:mm</code></td>
<td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td>
<td><code>yyyy-mm-ddThh:mm</code></td>
<td><code class="brush: html"><input type="datetime-local" min="2019-12-25T19:30"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/number", "number")}}</td>
<td><a href="/ja/docs/Web/CSS/number"><number></a></td>
<td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td>
</tr>
<tr>
<td>{{HTMLElement("input/range", "range")}}</td>
<td><a href="/ja/docs/Web/CSS/number"><number></a></td>
<td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td>
</tr>
</tbody>
</table>
<div class="note">
<p><strong>注:</strong> ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。</p>
</div>
<p>詳しくは <a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">クライアント側検証</a>と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。</p>
<p>{{htmlelement('meter')}} 要素における <code>min</code> 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 (<code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性) よりもチイサクなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。</p>
<table class="standard-table">
<caption>その他の要素における <code>min</code> 値の構文</caption>
<thead>
<tr>
<th>入力型</th>
<th>構文</th>
<th>例</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{HTMLElement("meter")}}</td>
<td><a href="/ja/docs/Web/CSS/number"><number></a></td>
<td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter></code></td>
</tr>
</tbody>
</table>
<h3 id="Impact_on_step" name="Impact_on_step">step への影響</h3>
<p><code>min</code> と <code>step</code> の値は、 <code>step</code> 属性がない場合も含め、どの値が有効であるかを定義します。 <code>step</code> の既定値は <code>0</code> です。</p>
<p>無効な入力の周囲に太く赤い境界を追加します。</p>
<pre class="brush: css notranslate">input:invalid {
border: solid red 3px;
}</pre>
<p>それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。</p>
<pre class="brush: html notranslate"><input id="myNumber" name="myNumber" type="number" min="7.2" value="8"></pre>
<p><code>step</code> の既定値は 1 なので、有効な値は <code>7.2</code>, <code>8.2</code>, <code>9.2</code>, などになります。 8 の値は有効ではありません。無効な値が入っているので、対応しているブラウザーは値が無効であることを表示します。</p>
<p>{{EmbedLiveSample("Impact_on_step",200,55)}}</p>
<p>明示的に含まれていない限り、 <code>number</code>、 <code>range</code> では <code>step</code> は既定値の 1 となり、 date/time 入力型では 1 単位 (秒, 週, 月, 日) となります。</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
<p>ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 <code>max</code> 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> または <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用することを検討してください。</p>
<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', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.attributes.min")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/HTML/Attributes/step">step</a></li>
<li><a href="/ja/docs/Web/HTML/Attributes/max">max</a></li>
<li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a></li>
<li>{{domxref('Constraint_validation')}}</li>
<li>{{domxref('validityState.rangeUnderflow')}}</li>
<li>{{cssxref(':out-of-range')}}</li>
<li>{{htmlelement('input')}}</li>
<li>{{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} および {{HTMLElement("input/range", "range")}} 型、 {{htmlelement('meter')}}</li>
</ul>
|
