Атрибут size
Задаёт размеры тегам <input> и <select> .
Время чтения: меньше 5 мин
- Кратко
- Пример
- Как понять
- Подсказки
Обновлено 15 августа 2022
Кратко
Скопировать ссылку на секцию «Кратко» Скопировано
Атрибутом size можно задать ширину поля <input> в символах или количество видимых опций списка в случае <select> .
Пример
Скопировать ссылку на секцию «Пример» Скопировано
Зададим ширину <input> с помощью size . Поле ввода растянется так, чтобы в видимую часть поместилось не меньше 9 символов моноширинного шрифта.
В примере ниже зададим size для <select> . Число 3 определит количество видимых параметров списка.
Поскольку size = «3» , видимая часть списка содержит только 3 города. Чтобы изучить остальные, нужно воспользоваться прокруткой.
Как понять
Скопировать ссылку на секцию «Как понять» Скопировано
В случае <input> задать ширину с помощью атрибута size можно не для всех типов ввода. Подойдут лишь те, что принимают текстовые данные:
- type = «text»
- type = «password»
- type = «email»
- type = «url»
- type = «tel»
- type = «search»
Если шрифт будет не моноширинный, выставить ширину для <input> с помощью атрибута size окажется затруднительно — внутрь поля ввода может поместиться непредсказуемое число символов.
Как видно из примера, в <input> помещается куда больше трёх символов, хотя атрибут size = «3» задан. Причина в нашем шрифте Roboto , — он не моноширинный, а значит для <input> каждый символ занимает немного разное пространство, и ему очень тяжело определиться с размерами ��
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Если поставить в теге <select> атрибут multiple и задать size = «1» , из списка получится обыкновенная «прокрутка».
�� Хотя атрибут size выглядит удобным, использовать его для <input> следует с осторожностью. Порой даже с моноширинными шрифтами он может сделать что-то странное, растягивая поле ввода на неожиданное число символов.
Что такое длина Input, как изменить размер текстового поля
Важнейшим атрибутом у тега «input» является «type». Именно он определяет какое поле будет перед нами: текстовое, для пароля, чекбокс, радио и др. Поэтому, чтобы определить тег «input», как текстовое поле нужно воспользоваться вот таким синтаксисом:
<input type=»text»/>
Обозначив тег «input» таким образом мы получим текстовое поле в форме, но оно будет с «гибким» размером. То есть, оно растянется на всю ширину контейнера, в котором мы обозначили тег «input». Такой подход не всегда уместен. Иногда нам нужно чтобы текстовое поле было определенного размера. Мы можем это сделать, если задействовать CSS-свойство «width» для конкретного поля «input» или прямо внутри самого тега мы можем задействовать свойство «size». В свойстве «size» нужно прописать какое-то число, где число будет определять ширину поля, а обозначать количество видимых символов.
Кстати, когда говорят «длина input» – это немного не корректное высказывание, потому что правильнее будет говорить «ширина input» или «размер input».
Как выставляется ширина(длина, размер) «input» в HTML на примере
Давайте сверстаем небольшую HTML-форму, где у нас будет текстовое поле «input» заданной ширины. Код будет вот таким:
<!DOCTYPE html>
<html>
<head>
<metacharset=»utf-8″>
<title>Ширина текстового поля</title>
<style>
#userForm <
width: 600px; /*Определяем пиксельную ширину текстового поля с помощью CSS-свойств */
>
</style>
</head>
<body>
<form method=»post» action=»myhandler.php»>
<p>Введите ваше имя:</p>
<p><input type=»text» name=»usernameform» size=»55″ />
<input type=»submit» name=»SubmitForm» value=»Послать» /></p>
</form>
</body>
</html>
Результат этой формы можно увидеть на рисунке ниже:
Важно отметить, что размер текстового поля «input» в CSS-свойствах можно определить разными единицами измерения: в пикселях, процентах и других измерительных единицах. А в свойстве «size» можно указать только количество видимых текстовых символов в виде числа. На примере, что мы привели выше, мы указали оба варианта определения размера поля «input». На практике так делать не надо, потому что в этом случае сработает только CSS-свойство, так как оно по иерархии главнее, чем внутреннее свойство «size».
Заключение
Сегодня мы рассказали, что длина, ширина и размер текстового поля «input» в HTML – это определения одного и того же свойства и правильно его называть «ширина input». На примере мы показали, что установить размер текстового поля всегда можно при помощи CSS-свойства «width», либо использовать внутреннее свойства текстового поля «input» – «size».
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
HTML <input> size Attribute
An HTML form with two input fields with a width of 50 and 4 characters:
Definition and Usage
The size attribute specifies the visible width, in characters, of an <input> element.
Note: The size attribute works with the following input types: text, search, tel, url, email, and password.
Tip: To specify the maximum number of characters allowed in the <input> element, use the maxlength attribute.
Browser Support
The numbers in the table specify the first browser version that fully supports the attribute.
Как установить длину input html
In this article, we are going to specify the width of input element. This can be done by using the size attribute or by width attribute to set the width of an element.
The size attribute works with the following input types: text, search, tel, url, email, and password and not on type date, image, time for these we can use width attribute.
Create a div in which we are putting our input. We will take 2 inputs names and dates. For inputting name we will use input type – name and size attribute. To put date we will use input type – date and width attribute(size attribute will not work for date type).