files/fr/web/html/attributes/size/index.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

---
title: 'Attribut HTML : size'
slug: Web/HTML/Attributes/size
tags:
  - Attribute
  - HTML
  - Input
  - Reference
  - Select
translation_of: Web/HTML/Attributes/size
---
<div>{{HTMLSidebar}}</div>

<p class="summary">L'attribut <strong><code>size</code></strong> définit la largeur de l'élément <a href="/fr/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a> et la hauteur de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>. Pour <code>input</code>, si l'attribut <code>type</code> est <a href="/fr/docs/Web/HTML/Element/input/text"><code>text</code></a> ou <a href="/fr/docs/Web/HTML/Element/input/password"><code>password</code></a> alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun <code>size</code> n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.</p>

<p>L'attribut <code>size</code> n'a aucun impact sur la validation des contraintes.</p>

<h2 id="examples">Exemples</h2>

<p>En ajoutant <code>size</code> sur certains types d'entrée, la largeur de l'entrée peut être contrôlée. L'ajout de la taille sur une sélection modifie la hauteur, définissant le nombre d'options visibles à l'état fermé.</p>

<pre class="brush: html">&lt;label for="fruit"&gt;Entrez un fruit&lt;/label&gt; &lt;input type="text" size="15" id="fruit"&gt;
&lt;label for="vegetable"&gt;Entrez un légume&lt;/label&gt; &lt;input type="text" id="vegetable"&gt;

&lt;select name="fruits" size="5"&gt;
  &lt;option&gt;banane&lt;/option&gt;
  &lt;option&gt;cerise&lt;/option&gt;
  &lt;option&gt;fraise&lt;/option&gt;
  &lt;option&gt;durian&lt;/option&gt;
  &lt;option&gt;myrtille&lt;/option&gt;
&lt;/select&gt;

&lt;select name="vegetables" size="5"&gt;
  &lt;option&gt;carotte&lt;/option&gt;
  &lt;option&gt;concombre&lt;/option&gt;
  &lt;option&gt;chou-fleur&lt;/option&gt;
  &lt;option&gt;céleri&lt;/option&gt;
  &lt;option&gt;feuilles de collard&lt;/option&gt;
&lt;/select&gt;</pre>

<p>{{EmbedLiveSample('examples')}}</p>

<h2 id="specifications">Spécifications</h2>

<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}</td>
      <td>{{Spec2('HTML5.1')}}</td>
    </tr>
  </tbody>
</table>

<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>

<p>{{Compat("html.elements.attribute.size")}}</p>

<h2 id="see_also">Voir aussi</h2>

<ul>
  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a></li>
  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a></li>
  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a></li>
</ul>