devdocs/html/attributes%2Fminlength.html


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

<header><h1>HTML attribute: minlength</h1></header><div class="section-content">
<p>The <code>minlength</code> attribute defines the minimum <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length">string length</a> that the user can enter into an <a href="../element/input"><code>&lt;input&gt;</code></a> or <a href="../element/textarea"><code>&lt;textarea&gt;</code></a>. The attribute must have an integer value of 0 or higher.</p> <p>The length is measured in UTF-16 code units, which (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length#strings_with_length_not_equal_to_the_number_of_characters">for most scripts</a>) is equivalent to the number of characters. If no <code>minlength</code> is specified, or an invalid value is specified, the input has no minimum length. This value must be less than or equal to the value of <a href="maxlength">maxlength</a>, otherwise the value will never be valid, as it is impossible to meet both criteria.</p> <p>The input will fail constraint validation if the length of the text value of the field is less than minlength UTF-16 code units long, with <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort"><code>validityState.tooShort</code></a> returning <code>true</code>. Constraint validation is only applied when the value is changed by the user. Once submission fails, some browsers will display an error message indicating the minimum length required and the current length.</p>
</div>
<h2 id="try_it">Try it</h2>
<div class="section-content"><iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/attribute-minlength.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div>
<h2 id="examples">Examples</h2>
<div class="section-content">
<p>By adding <code>minlength="5"</code>, the value must either be empty or five characters or longer to be valid.</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="BVDyOX4r0iz2c7Z3QxxOuELvexWmwfvpHnUK14xF5Mc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fruit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Enter a fruit name that is at least 5 letters long<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">minlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fruit<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div> <p>We can use pseudoclasses to style the element based on whether the value is valid. The value will be valid as long as it is either null (empty) or five or more characters long. <em>Lime</em> is invalid, <em>lemon is valid</em>.</p> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="Q8x3i75AtKMOIhTESyx16mmg2Nv/Vgs/sjUou9yeZOs=" data-language="css"><span class="token selector">input</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 2px solid currentcolor<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">input:invalid</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 2px dashed red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">input:invalid:focus</span> <span class="token punctuation">{</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>pink<span class="token punctuation">,</span> lightgreen<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div>
<div class="code-example" id="sect1">

<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="100%" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/minlength/runner.html?id=examples" loading="lazy"></iframe>
</div>
</div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#the-maxlength-and-minlength-attributes">HTML Standard <br><small># the-maxlength-and-minlength-attributes</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody><tr>
<th><code>minlength</code></th>
<td class="bc-supports-yes">40</td>
<td class="bc-supports-yes">17</td>
<td class="bc-supports-yes">51</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">27</td>
<td class="bc-supports-yes">10.1</td>
<td class="bc-supports-yes">40</td>
<td class="bc-supports-yes">40</td>
<td class="bc-supports-yes">51</td>
<td class="bc-supports-yes">27</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">4.0</td>
</tr></tbody>
</table></div>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody><tr>
<th><code>minlength</code></th>
<td class="bc-supports-yes">40</td>
<td class="bc-supports-yes">17</td>
<td class="bc-supports-yes">51</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">27</td>
<td class="bc-supports-yes">10.1</td>
<td class="bc-supports-yes">40</td>
<td class="bc-supports-yes">40</td>
<td class="bc-supports-yes">51</td>
<td class="bc-supports-yes">27</td>
<td class="bc-supports-yes">10.3</td>
<td class="bc-supports-yes">4.0</td>
</tr></tbody>
</table></div>
<h3 id="html.elements.input.minlength">html.elements.input.minlength</h3>
<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p>
<h3 id="html.elements.textarea.minlength">html.elements.textarea.minlength</h3>
<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="maxlength"><code>maxlength</code></a></li> <li><a href="size"><code>size</code></a></li> <li><a href="pattern"><code>pattern</code></a></li> <li><a href="../constraint_validation">Constraint validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form validation</a></li> <li><a href="../element/input"><code>&lt;input&gt;</code></a></li> </ul></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength</a>
  </p>
</div>