HTML-Attribut: size

Das size-Attribut definiert die Breite des <input>- und die Höhe des <select>-Elements. Für ein input-Element bestimmt es die Anzahl der Zeichen, die der Benutzeragent dem Benutzer beim Bearbeiten des Wertes anzeigt. Für ein select-Element definiert es die Anzahl der Optionen, die dem Benutzer angezeigt werden sollen. Dies muss eine gültige, nicht-negative ganze Zahl größer als Null sein.

Wenn kein size angegeben ist oder ein ungültiger Wert angegeben wird, hat das Eingabeelement keine deklarierte Größe, und das Formularelement wird die Standardbreite des Benutzeragents verwenden. Wenn CSS das Element mit Eigenschaften beeinflusst, die die Breite betreffen, hat CSS Vorrang.

Das size-Attribut hat keinen Einfluss auf die Einschränkungsvalidierung.

Probieren Sie es aus

<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" size="10" />

<label for="lastName">Last Name:</label>
<input id="lastName" name="lastName" type="text" size="20" />

<label for="fruit">Favorite fruit:</label>
<select id="fruit" name="fruit" size="2">
  <option>Orange</option>
  <option>Banana</option>
  <option>Apple</option>
</select>

label {
  display: block;
  margin-top: 1rem;
}

Beispiele

Durch das Hinzufügen von size zu einigen Eingabetypen kann die Breite des Eingabeelements gesteuert werden. Das Hinzufügen von size zu einem Select-Element ändert die Höhe und definiert, wie viele Optionen im geschlossenen Zustand sichtbar sind.

html
<label for="fruit">Enter a fruit</label>
<input type="text" size="15" id="fruit" />
<label for="vegetable">Enter a vegetable</label>
<input type="text" id="vegetable" />

<select name="fruits" size="5">
  <option>banana</option>
  <option>cherry</option>
  <option>strawberry</option>
  <option>durian</option>
  <option>blueberry</option>
</select>

<select name="vegetables" size="5">
  <option>carrot</option>
  <option>cucumber</option>
  <option>cauliflower</option>
  <option>celery</option>
  <option>collard greens</option>
</select>

Spezifikationen

Specification
HTML
# attr-select-size
HTML
# attr-input-size

Browser-Kompatibilität

html.elements.select.size

BCD tables only load in the browser

html.elements.input.size

BCD tables only load in the browser

Siehe auch