Как сделать резиновый input
Обновлено: 04.07.2024
Одна из основных проблем верстки сайтов в том, что сайт может быть загружен, на огромном количестве экранов с разными размерами по ширине. При этом нужно добиться, чтобы сайт везде выглядел симпатично.
Для решения этой задачи возникло два подхода: первый, при увеличении размеров окна, мы растягиваем контент(резиновая верстка), второй делаем контейнер с фиксированными размерами и спокойно работает внутри него(фиксированная верстка). Оба подхода используются и по сей день, хотя бы как этапы адаптивной верстки.
В фиксированной верстке мы задаем ширину контейнера в пикселях и, как правило, выравниваем его посередине.
В резиновой верстке ширина задается в процентах
Давайте посмотрим, что мы можем сделать с этим на практике.
В фиксированной верстке центральный блок имеет ширину обычно 980px, так чтобы помещаться на мониторы с любым разрешением, включая iPhone и iPad.
Резиновая верстка создается следующим образом. Когда Вы задаете ширину блока в процентах, проценты считаются от ширины родительского блока. Если Вы поместите такой блок внутрь body, то его ширина будет пропорциональна ширине экрана.
С вложенными блоками у нас есть два варианта - сделать их фиксированной ширины, а отступы между ними сделать резиновыми, либо сделать их пропорциональными ширине блока
Внутри одного сайта, мы можем комбинировать элементы резиновой и фиксированных версток.
Например, в приведеном ниже макете голубые полоски являются резиновыми и занимают всю ширину экрана, а блок по центру соответствует фиксированной верстке.
min-width и min-height
Если мы задали ширину блока в процентах, то при сжатии окна блок также будет сжиматься. Если мы хотим остановить этот процесс обжатия блока на каком-то моменте, чтобы, например, чтобы не страдал контент блока, можно задать минимальную возможную ширину блока
например вот так
calc
Давайте рассмотрим следующий шаблон
При уменьшении ширины серого блока, синий блок должен сохранять свою ширину, а белый должен быть резиновым.
Серый блок мы можем задать в процентах, но вот с белым блоком все сложнее. Его ширина - это ширина серого блока минус фиксированная ширина синего блока.
Для этого нам может пригодиться функция calc
Допустим ширина родительского блока 100%, ширина левой колонки 200px. Тогда ширину правой колонки мы можем записать как
НАЛИЧИЕ ПРОБЕЛОВ КРИТИЧНО!
Пропорциональное изменение ширины и высоты
Допустим наш шаблон выглядит вот так
Если блоки резиновые при сжатии, мы получим следующую картину
Происходит это потому, что ширина блоков при сжатии уменьшается, а вот высота остается неизменной. Даже если мы поставим высоту в процентах - это оставит ситуацию без изменений, так так высота сайта при его сжатии не изменяется.
Хотелось бы, чтобы блоки уменьшались пропорционально, то есть квадраты оставались бы квадратами
Добиться этого можно следующим образом. Поставить высоту блока 0px, а padding-top равным ширине. Например
Если Вы попробовали реализовать данную схему, нам остается понять, почему это работает:) Дело в том, что padding, указанный в процентах высчитывает эти проценты не от ширины самого блока, а от ширины блока-родителя, точно также как и ширина. Поэтому 25% в padding-top'e будут равны 25% ширины.
Фиксированные и резиновые верстки в дизайне
Если Вы верстаете сайт по PSD-шаблону или другому графическому файлу, у Вас может возникнуть вопрос - какую верстку хотел применить дизайнер? Если дизайнер имеет хотя бы минимальный опыт в веб-дизайне - ответ прост. Если у элемента нет полей по бокам - подразумевается его резиновость. Если поля есть, значит скорее всего верстка фиксированная.
Практика:
Резиновый шаблон с фиксированной левой колонкой
Резиновый шаблон с двумя фиксированными колонками по бокам
"Резиновая" галерея картинок
Сделать, чтобы картинки были резиновые, а отступы между ними были фиксированные(шаблон должен занимать весь экран)
Сделать два квадрата. Меньший квадрат должен быть посередине по вертикали и горизонтали меньшего
Используя calc выровнять блок по центру экрана
Сверстать шаблон сайта. Сайдбар справа фиксированный по ширине, синий хедер резиновый, блоки контента фиксированные по ширине и выровнены посередине хедера.
Поле ввода HTML — простой и удобный элемент. Оно содержит более 30 вариантов атрибутов и является одним из самых надежных и заслуживающих изучения HTML-тегов. Поскольку пользователи постоянно взаимодействуют с полями на странице, приходится прилагать множество усилий, чтобы сделать их максимально удобными. Однако по ходу дела могут возникнуть различные сложности.
Базовая разметка
Помечать поля — отличная CSS-практика. В статье мы будем использовать вложенное поле внутри разметки метки, которое связывает метку и входной тег и устраняет необходимость указывать атрибут for для метки и id для ввода. К тому же это значительно упрощает стилизацию поля.
Другой альтернативой может послужить тег div в качестве обертки для таких элементов, как позиционирование, чтобы у них был общий родитель. Тег fieldset также может быть полезен в некоторых случаях. Данный метод позволяет расположить метку и ввод рядом и рассматривать их как единое целое.
Еще более короткая и допустимая альтернатива — использовать тег label с полем ввода внутри, но с атрибутом aria-label для читателей экрана, а затем применить псевдоэлемент CSS after для создания заполнителя.
Все три альтернативы подойдут для типа стиля, который будет использоваться в данной статье, поэтому выберите любой из них по своему предпочтению. Ниже показано, что все три параметра отображают одно и то же на странице. Результат отображен в браузере Chrome.
Для чего мы ставим метку после ввода? Данный шаг дает возможность использовать такие состояния ввода, как focus и т. д. Таким образом мы сможем настроить метку и контролировать ее внешний вид и анимацию. В качестве альтернативы можно использовать Javascript, но это выходит за рамки данного руководства.
Начальная настройка
Если вы не используете CSS-нормализаторы, вам все же стоит добавить такие элементы CSS, как border-box и box-sizing — они важны для данного руководства. Если в конечном итоге готовое поле выглядит не так, как в статье, то, скорее всего, вам понадобится следующий фрагмент кода:
Базовый стиль
Придадим данной области очень простой и минималистичный вид. Мы cможем улучшить его по ходу работы.
Для этого поля размер текста составит 14 пикселей. Элемент placeholder будет располагаться над полем ввода, поэтому необходимо установить относительное ( relative ) положение.
Стиль поля ввода в основном предназначен для его сброса, например для удаления внешнего вида и границ. Обратите внимание, что ширина поля ввода определяет размер элемента custom-field . Следующей важной деталью здесь является заполнение, которое нужно сопоставить при размещении элемента-заполнителя наверху.
Чтобы текст заполнителя не был слишком длинным, ограничиваем его ширину максимальным 100%-значением минус 24 пикселя (сумма входных левых и правых отступов). Затем устанавливаем переполнение в виде многоточия.
Вы можете использовать переменную CSS, но, если вы измените заполнение ввода позже, это также повлияет на заполнитель.
Эффект всплывающей метки
Если нажать на поле, заполнитель уменьшиться и переместится в верхний левый угол над полем.
Чтобы добавить этот переход, нужно обозначить пространство над полем, куда будет перемещаться заполнитель. Оно также пригодится, если перед полем появится другой элемент. 20 пикселей на верхней границе — отличный вариант: метка остается центрированной, а граница выступает внешней частью.
Далее нужно узнать, когда ввод получает фокус, чтобы анимировать заполнитель. Воспользуемся сиблинг-комбинатором, чтобы выбрать заполнитель, а затем уменьшить шрифт, установить темный цвет и поднять его на 10 пикселей.
При наличии значения заполнитель должен оставаться в таком положении, даже если фокус отсутствует. Достичь этой цели можно несколькими способами. Например, использовать псевдокласс ввода :valid вместе с атрибутом required . Однако стоит учитывать, что это работает только для обязательных полей.
Другой альтернативой является использование Javascript для определения класса, вне зависимости от наличия значения. Однако данное руководство предназначено только для CSS, поэтому laceholder-shown вместе с атрибутом заполнителя может послужить отличным решением.
Чтобы получить хорошую анимацию, можно добавить переход наверх, размер шрифта и цвет в элемент-заполнитель.
Вежливое значение показывает то, как следует сообщить пользователю об ошибке. Для данного сценария необходим такой атрибут, чтобы помочь с текстом mix ox внутри тега label.
Вывод
Данные техники можно применять для создания полей, при этом не затрагивая доступность и SEO. Разобраться в них более подробно вам поможет исходный код.
Задать ширину текстового поля в пикселах через стили.
Решение
Ширина текстового поля, создаваемого с помощью тега , определяется стилевым свойством width , значение которого можно устанавливать в пикселах, процентах или других допустимых единицах, как показано в примере 1.
Пример 1. Ширина поля
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан ниже.
Рис. 1. Текстовое поле с фиксированной шириной
В данном примере задана ширина поля в пикселах путем добавления свойства width к идентификатору поля user .
Заметьте, что ширина поля также определена с помощью атрибута size тега , но в случае применения стилей этот параметр игнорируется.
В сегодняшней статье я расскажу и покажу парочку трюков, которые можно использовать для тега input .
Не терпится узнать, какие это трюки?
- убрать обводку при клике на поле формы;
- добавить обводку при наведении мишкой;
- изменить курсор мышки при наведении на input;
- убрать при клике на input текст подсказки;
- вывести данные из input в div (JavaScript);
- проверка поля input на ввод цифр.
Как убрать обводку при клике на input (поле формы)
Не знаю как вас, но меня дико раздражает, когда кликаешь мышкой по полю формы, и появляется обводка, которая реально портит весь дизайн полей.
Давайте по порядку.
Вставьте для примера вот этот HTML код к себе на страничку:
Можно поменять и цвет обводки:
Как добавить обводку при наведении мышки на input (поле формы)
Как убрать стандартную обводку при клике на поле формы вы уже знаете, а вот как сделать обводку при наведении на нее мышки, это вы сейчас узнаете.
Чтобы форма красиво смотрелась, можно сделать вот так:
Как изменить курсор мышки при наведении на input (поле формы)
Как убрать при клике на input текст подсказки
Чтобы такое сделать, достаточно вставить код событий в поле input :
Как вывести данные из input в div (JavaScript)
Проверка поля input на ввод цифр (JavaScript)
Если хотите запретить ввод поля input буквами, а разрешить только ввод цифрами, то воспользуйтесь вот таким кодом:
Если хотите запретить только ввод цифр, тогда JS код будет вот таким (обратите внимание на строку №4 ):
Читайте также: