diff options
Diffstat (limited to 'devdocs/html/attributes%2Fsize.html')
| -rw-r--r-- | devdocs/html/attributes%2Fsize.html | 48 |
1 files changed, 48 insertions, 0 deletions
diff --git a/devdocs/html/attributes%2Fsize.html b/devdocs/html/attributes%2Fsize.html new file mode 100644 index 00000000..b559cfb1 --- /dev/null +++ b/devdocs/html/attributes%2Fsize.html @@ -0,0 +1,48 @@ +<header><h1>HTML attribute: size</h1></header><div class="section-content"> +<p>The <code>size</code> attribute defines the width of the <a href="../element/input"><code><input></code></a> and the height of the <a href="../element/select"><code><select></code></a> element. For the <code>input</code>, if the <code>type</code> attribute is <a href="../element/input/text">text</a> or <a href="../element/input/password">password</a> then it's the number of characters. This must be an integer value of 0 or higher. If no <code>size</code> is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence.</p> <p>The <code>size</code> attribute has no impact on constraint validation.</p> +</div> +<h2 id="try_it">Try it</h2> +<div class="section-content"><iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/attribute-size.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe></div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>By adding <code>size</code> on some input types, the width of the input can be controlled. Adding size on a select changes the height, defining how many options are visible in the closed state.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="r3ovSDU1oAD4FwwBlp9VvDXcvm1fOpkn9p4iJIPtdLA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>Enter a fruit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>15<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">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>vegetable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter a vegetable<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vegetable<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fruits<span class="token punctuation">"</span></span> <span class="token attr-name">size</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 punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>banana<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>cherry<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>strawberry<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>durian<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>blueberry<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vegetables<span class="token punctuation">"</span></span> <span class="token attr-name">size</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 punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>carrot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>cucumber<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>cauliflower<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>celery<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>collard greens<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></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/size/runner.html?id=examples" loading="lazy"></iframe> +</div> +</div> +<h2 id="specifications">Specifications</h2> +<div class="notecard warning"> +<strong>No specification found</strong><p>No specification data found for <code>html.elements.attribute.size</code>.<br><a href="#on-github">Check for problems with this page</a> or contribute a missing <code>spec_url</code> to <a href="https://github.com/mdn/browser-compat-data">mdn/browser-compat-data</a>. Also make sure the specification is included in <a href="https://github.com/w3c/browser-specs">w3c/browser-specs</a>.</p> +</div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="maxlength"><code>maxlength</code></a></li> <li><a href="minlength"><code>minlength</code></a></li> <li><a href="pattern"><code>pattern</code></a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/size" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size</a> + </p> +</div> |