size атрибут HTML

Атрибут size задает ширину элемента <input> и высоту элемента <select>. Для элемента input он задает количество символов, которые пользовательский агент позволяет пользователю видеть при редактировании значения. Для элемента select он задает количество вариантов, которые должны быть показаны пользователю. Значение должно быть допустимым целым неотрицательным числом больше нуля.

Если size не указан или указано недопустимое значение, размер поля ввода не задан, а ширина элемента управления формы будет установлена по умолчанию на основе пользовательского агента. Если CSS задает для элемента свойства, влияющие на ширину, приоритет имеет CSS.

Атрибут size не влияет на проверку ограничений.

Попробуйте

<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;
}

Примеры

Добавляя size для некоторых типов полей ввода, можно управлять их шириной. Добавление size к элементу select изменяет его высоту и определяет, сколько вариантов видно в закрытом состоянии.

<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>

Спецификации

Совместимость с браузерами

html.elements.select.size

html.elements.input.size

См. также

• maxlength
• minlength
• pattern