Атрибут size

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

Зададим ширину <input> с помощью size. Поле ввода растянется так, чтобы в видимую часть поместилось не меньше 9 символов моноширинного шрифта.

        
          
          <label for="input-field">Поле ввода:</label><input id="input-field" size="9" placeholder="123456789">
          <label for="input-field">Поле ввода:</label>
<input id="input-field" size="9" placeholder="123456789">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В примере ниже зададим size для <select>. Число 3 определит количество видимых параметров списка.

        
          
          <label for="city-select">Ваш город:</label><select id="city-select" size="3">  <option value="novosibirsk">Калининград</option>  <option value="petrozavodsk">Петрозаводск</option>  <option value="petrozavodsk">Зеленоград</option>  <option value="petersburg">Санкт-Петербург</option>  <option value="samara">Самара</option>  <option value="perm">Пермь</option></select>
          <label for="city-select">Ваш город:</label>
<select id="city-select" size="3">
  <option value="novosibirsk">Калининград</option>
  <option value="petrozavodsk">Петрозаводск</option>
  <option value="petrozavodsk">Зеленоград</option>
  <option value="petersburg">Санкт-Петербург</option>
  <option value="samara">Самара</option>
  <option value="perm">Пермь</option>
</select>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Поскольку size="3", видимая часть списка содержит только 3 города. Чтобы изучить остальные, нужно воспользоваться прокруткой.

В случае <input> задать ширину с помощью атрибута size можно не для всех типов ввода. Подойдут лишь те, что принимают текстовые данные:

• type="text"
• type="password"
• type="email"
• type="url"
• type="tel"
• type="search"

Если шрифт будет не моноширинный, выставить ширину для <input> с помощью атрибута size окажется затруднительно — внутрь поля ввода может поместиться непредсказуемое число символов.

        
          
          body {  /* Подключаем немоноширинный шрифт */  font-family: "Roboto", sans-serif;}input {  font-family: inherit;}
          body {
  /* Подключаем немоноширинный шрифт */
  font-family: "Roboto", sans-serif;
}

input {
  font-family: inherit;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <label for="input-field">Поле ввода:</label><input id="input-field" size="3" placeholder="123456789">
          <label for="input-field">Поле ввода:</label>
<input id="input-field" size="3" placeholder="123456789">

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Как видно из примера, в <input> помещается куда больше трёх символов, хотя атрибут size="3" задан. Причина в нашем шрифте Roboto, — он не моноширинный, а значит для <input> каждый символ занимает немного разное пространство, и ему очень тяжело определиться с размерами 🤕

💡 Если поставить в теге <select> атрибут multiple и задать size="1", из списка получится обыкновенная «прокрутка».

💡 Хотя атрибут size выглядит удобным, использовать его для <input> следует с осторожностью. Порой даже с моноширинными шрифтами он может сделать что-то странное, растягивая поле ввода на неожиданное число символов.