Как установить ширину текстового поля в пикселах?
Задать ширину текстового поля в пикселах через стили.
Решение
Ширина текстового поля, создаваемого с помощью тега , определяется стилевым свойством width , значение которого можно устанавливать в пикселах, процентах или других допустимых единицах, как показано в примере 1.
Пример 1. Ширина поля
HTML5 CSS 2.1 IE Cr Op Sa Fx
Ширина текстового поля Результат данного примера показан ниже.
Рис. 1. Текстовое поле с фиксированной шириной
В данном примере задана ширина поля в пикселах путем добавления свойства width к идентификатору поля user .
Заметьте, что ширина поля также определена с помощью атрибута size тега , но в случае применения стилей этот параметр игнорируется.
HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Атрибут size
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Атрибуты minlength и maxlength
Как задать минимальное и максимальное количество символов, которое принимает поле?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Юрий Четвериков ,
- Татьяна Фокина
Контрибьюторы:
Обновлено 21 ноября 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Атрибуты minlength и maxlength устанавливают минимальное и максимальное количество символов, которые можно ввести в поля или .
Пример
Скопировать ссылку «Пример» Скопировано
В этом примере в можно ввести минимум 4 символа и максимум 8, а в — минимум 50 и максимум 1000.
input minlength="4" maxlength="8"> textarea minlength="50" maxlength="1000">
Теперь создадим поле с паролем и ограничим количество допустимых символов:
Введите пароль (от 8 до 16 символов): type="password" name="password" minlength="8" maxlength="16" required>label for="password"> Введите пароль (от 8 до 16 символов): label> input type="password" id="password" name="password" minlength="8" maxlength="16" required >
Как пишется
Скопировать ссылку "Как пишется" Скопировано
Значения для minlength и maxlength — целые числа от 0 и выше. К примеру, 0 , 14 или 1000 . Если не указать значение или задать его неверно, у поля не будет ограничений по длине. Также значение maxlength не может быть меньше значения minlength . Поле всегда будет заполнено неправильно, если максимальное значение меньше минимального.
Браузеры используют кодировку UTF-16 для расчёта длины поля. Это значит, что длина равна количеству символов в случае букв, чисел и знаков. Например, если задали minlength = "3" , то поле с введёнными abc и 123 соответствуют минимальному ограничению по символам.
minlength и maxlength часто используют вместе с другим атрибутом required , который делает поле обязательным.
Валидация
Скопировать ссылку "Валидация" Скопировано
В JavaScript есть специальный интерфейс Validity State , который даёт доступ к проверке полей. С помощью свойств too Long и too Short можно проверять длину поля с атрибутами minlength и maxlength . Оба свойства возвращают true , если пользователь ввёл слишком много или слишком мало символов, и false , когда введённые данные правильной длины. Форму лучше валидировать после нажатия на кнопку для отправки данных.
Странности с
Скопировать ссылку "Странности с input type="number"" Скопировано
Когда задаёте ограничения по длине полю с типом number , атрибуты minlength и maxlength не ограничивают минимальное и максимальное количество символов, которое можно ввести с клавиатуры.
Попробуйте ввести в этой демке больше, чем 3 цифры.
Выберите количество (максимум 999): type="number" min="1" max="999" maxlength="3" >label for="items"> Выберите количество (максимум 999): label> input type="number" min="1" max="999" maxlength="3" id="items" >
Чтобы обойти странность, используйте JavaScript или регулярные выражения. К примеру, в это поле можем ввести только 3 символа благодаря обработке события on Key Press . Когда попытаетесь ввести больше символов, скрипт просто не даст это сделать.
Выберите количество (максимум 999): type="number" pattern="\d+" min="1" max="999" onKeyPress="if(this.value.length === 3) return false">label for="items"> Выберите количество (максимум 999): label> input type="number" id="items" pattern="\d+" min="1" max="999" onKeyPress="if(this.value.length === 3) return false" >
Стилизация
Скопировать ссылку "Стилизация" Скопировано
Поля с неправильными данными можно стилизовать через псевдоклассы :invalid или :user - invalid для всех полей или :out - of - range для полей с type = "number" .
Добавляйте к неправильно заполненным полям не только цветную обводку и заливку, но и иконку, а также текстовое описание ошибки.
К полю, стилизованному через :invalid , стили применятся в пустом состоянии и в состоянии, когда в него ввели неправильное количество символов.
input:invalid border-color: #2E9AFF; background-color: rgb(46, 154, 255, 0.1); outline: none;>input:invalid border-color: #2E9AFF; background-color: rgb(46, 154, 255, 0.1); outline: none; >
Стили из :user - invalid применятся к полю только тогда, когда пользователь ввёл неверное количество символов и при этом начал взаимодействовать с другими элементами на странице.
input:user-invalid border-color: #2E9AFF; background-color: rgb(46 154 255 / 0.1); outline: none;>input:user-invalid border-color: #2E9AFF; background-color: rgb(46 154 255 / 0.1); outline: none; >
Как установить ширину input в зависимости от количества свободного места
Мне необходимо установить ширину input по такой формуле: 100% - ширину левого блока - 10пикс. отступ. Так как ширина левого блока всегда разная в зависимости от текста, я не понимаю, как можно отследить ширину. П.С. ясное дело что можно с помощью js, но меня этот вариант не устроит. Интересует решение на чистом css.
Отслеживать
332 2 2 серебряных знака 13 13 бронзовых знаков
задан 17 мар 2017 в 15:01
685 1 1 золотой знак 12 12 серебряных знаков 29 29 бронзовых знаков
отследить ширину никак нельзя. Если вы хотите в 1 строку текст и инпут рядом, то советую использовать флексбокс
17 мар 2017 в 15:09
да, мне нужно именно так как вы описали. текст в строку и инпут рядом и все это в div 100%.