Как сделать форму css
Обновлено: 07.07.2024
В этом уроке мы рассмотрим как создавать несколько различных веб-форм, используя CSS сетку. Для каждого примера, сначала мы будем использовать плавающие элементы, а затем посмотрим, как сделать такой же макет используя CSS сетку.
Если у вас ни малейшего представления о CSS сетках, посмотрите нашу серию для начинающих Understanding the CSS Grid Layout Module (Понимание модуля компоновки CSS сетки). Приступим!
1. Базовая форма регистрации
В этом макете, мы разделим форму на два столбца, таким образом, мы можем отобразить метки с левой стороны, а поля ввода с правой.
При обычном подходе к такому макету, могут быть использованы плавающие элементы, для создания наших столбцов. Заметьте, что у нас нет элемента, в который вложена форма; мы будем оформлять метки и поля ввода напрямую.
Вы видите, что мы используем здесь calc( ), что позволяет нам сделать левый столбец фиксированной ширины в 200 пкс, а правый оставить плавающим.
А вот результат, с кое-какими стилями для наглядности:
Макет с CSS сеткой
Нашей задачей, при использовании сетки, является — задать два столбца, а затем разместить каждый элемент в нужном столбце.
На первом шаге, зададим нашу сетку на родительский элемент form :
Затем, нам нужно разделить эту сетку, используя grid-template-columns :
В CSS коде выше, первый столбец будет иметь ширину 200px , а второй примет 1fr (одна "fraction" — часть/доля) от оставшегося свободного места.
Теперь, нам нужно определить расположение наших меток и полей ввода. Для этого, мы будем использовать grid-column с особыми значениями для строк сетки:
Чтобы узнать больше о том как работают строки сетки, посмотрите эти короткие советы:
В любой CSS сетке, у каждой строки есть порядковый номер, по которому мы можем ссылаться на место элемента в сетке. Однако, ещё мы можем дать название каждой из этих строк…
На основе этих линий сетки мы применим следующие правила для наших меток, полей ввода и кнопок:
Метки окажутся в столбце, который начинается в строке 1 и заканчивается в строке 2. Поля и кнопка будут помещены в столбец, который начинается в строке 2 и заканчивается в строке 3.
Наконец, мы используем grid-gap для добавления интервала в 16px между строками и столбцами:
2. Форма контактов
В этом макете мы хотим добиться следующего:
Подведём итог, при использовании плавающих элементов нам понадобится:
Это довольно много работы, верно?
Лучшим подходом для решения этого будет Flexbox либо Grid. В этом конкретном случае, я бы предпочёл использовать сетку Grid, так как мы упорядочили элементы вертикально и горизонтально.
С макетом CSS сетки
Элемент формы также можно обозначить как сетку:
После применения этих правил, мы получим следующее:
Мы должны позволить двум последним элементам заполнить всю ширину, растянув их от линии сетки 1 до 3.
3. Форма профиля
Пришло время для нашего последнего макета формы. В этом примере, добавим поле, для загрузки изображения профиля. Его нужно разместить сверху справа.
Мы построим это со следующей разметкой:
Вкратце, охватывая традиционный подход, мы можем выполнить наш макет с помощью следующих шагов:
- Добавить position: relative; к элементу формы.
- Задать абсолютную позицию для поля загрузки файла направо и вверх.
- Добавить отступ для формы такой же ширины, как для поля загрузки файла.
- Задать фиксированную ширину для поля загрузки файла.
С макетом CSS сетки
Давайте не будем останавливаться на традиционном подходе слишком много. С сеткой, мы разделим форму на два столбца, вот так:
Первый столбец займёт двойной размер второго столбца по горизонтали, чего мы достигнем используя единицу измерения fr :
Задав сетку, нам нужно разместить элементы формы между строками сетки 1 и 2:
Следующий шаг это размещение поля загрузки во втором столбце. Для этого, мы расположите его между 2 и 3 линиями сетки. Переместив по вертикали, мы сделаем диапазон строк от линии сетки 1 до линии сетки 2.
Заключение
Отлично сработано! Мы рассмотрели несколько различных примеров, использование CSS сетки, для построения веб-форм. Как вы заметили, мы сэкономили много времени и усилий, написав всего несколько строк кода, по сравнению с использованием методик традиционного макета. Вы можете использовать все из выше представленных примеров, благодаря CSS @supports , который помог нам в использовании некоторых функций для улучшения.
Когда ваши демки на CodePen зависят от самых последних изменений в CSS, хорошей идеей будет предупредить людей. Предоставим уведомление, когда браузеры не поддерживают наши демки, используя .
У вас есть предложения по улучшению этих макетов? Сообщите мне об этом в комментариях ниже.
Преимущество данной формы в том, что в ней нет необходимости ставить капчу и мучать тем самым ее отправителей, а не спамботов.
Валидация заполненных полей осуществляется средствами jQuery, плюс дополнительно можно добавить проверки на php
Так выглядит форма:
HTML код формы:
checked = "checked" class = "input-at" id = "checkbox-at" type = "checkbox" name = "checkbox-at" onchange = "document.getElementById('submit-at').disabled = !this.checked;" />
Немного о коде:
Комментарии:
Разобрался. Прошу прощение за панику. Форма отлично работает. Спасибо Вам!
Интересно как же заставить работать одновременно две формы, и почему не срабатывают две.
В JS нужно немного поменять, через each сделать форму.
Никак не соберусь обновить тут коды…
Очень ждем, а то хотел как раз сделать интеграцию с несколькими формами, а оно не фурычит, ставит еще одну форму не хотелось бы
Если на коммерческой основе, то хоть сейчас:)
Подскажите как поиграть с размерами? Форма не влазит в высоту, слишком большая, раза в 2 бы уменьшить и соответственно шрифт поменьше.
Смотрите по CSS, там даже не зная можно догадаться, проверить и поглядеть результат.
Например:
height: 50px; — высота верхних полей и кнопки
min-height: 170px; — высота поля с доп. инфой
Вопрос такой: как вставить в js код — цель на отправку формы метрики?
Когда форма отправлена:
всё работает по кайфу
Добрый день!
Спасибо за крутое решение… долго искал
Подскажите, пожалуйста, как правильно добавить input file, чтобы и можно было получить файлы
Я про отправку файлов не писал в блоге, но можно почитать тут например.
Или лучше использовать что то более профессиональное — PHPMailer
Вставил всё это на свою страницу. По нажатию кнопки ничего не происходит.
То же самое , при нажатии на кнопку ничего не происходит. Css и Js подключены в html форме
Нужно результат видеть, я же не могу угодать почему оно не работает
Как показать результат? Выполняю на openserver. При нажатии на кнопку ничего не происходит.
Файл стилей и файл скрипта прописаны (отлинкованы)
Когда все прописано, работает как на примере.
Ошибки какие-нибудь есть в консоле?
Выдает ошибку 404, типа файл не найден. При этом запрос уходит, а ответ говорит: 404 Not Found — файл сам по пути имеется, указан как со / так и без, разницы нет. Все равно ошибка 404. Есть предположение, что где-то в системе стоит запрет на открытие файлов php, как можно дать разрешение 1 файлу, send.php?
Если 404, то это не запрет php
Скиньте результат сюда или в ВК/Телеграм
В этой статье рассмотрим различные варианты стилизации текстовых полей HTML-форм. Сначала создадим базовый вариант оформления input, а затем множество других, дополняя каждый из них небольшим количеством CSS.
Введение
Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.
Веб-формы также часто называют HTML-формами . Их проектирование осуществляется с помощью элементов управления форм (текстовых полей, выпадающих списков, кнопок, чекбоксов и т.д.) и некоторых дополнительных элементов, которые используются для придание форме определённой структуры.
Стилизация формы выполняется через CSS. В этом руководстве остановимся и подробно рассмотрим различные варианты оформления её текстовых полей .
Нормализация стилей
1. Настройка box-sizing .
Обычно хорошей практикой считается для всех элементов включая псевдоэлементы установить box-sizing: border-box :
В этом случае браузер при рассчитывании ширины и высоты элементов будет включать в них поля (padding) и границы (border). Как правило, это сильно упрощает работу с размерами элементов, и избавляет нас от множества проблем при размещении контента.
2. Нормализация стилей .
Для того чтобы в разных браузерах отображался как можно более одинаково необходимо добавить следующее:
Базовый вариант оформления input
Для удобного добавления к элементам стилей создадим следующую HTML-разметку:
Т.е. добавим к с type="text" класс text-field__input , к – text-field__label , а затем обернём их в элемент
Теперь напишем стили для этих элементов. А также сразу включим в них стили для нормализации, чтобы не добавлять их отдельно:
Примененные CSS свойства к элементу , и то, что они делают:
В результате получили следующее оформление:
Стилизуем плейсхолдер . По умолчанию плейсхолдер отображается полупрозрачным или светло-серым цветом. Получить его можно с помощью ::placeholder . Оформим его следующим образом:
Стили для в состоянии фокуса (получить это состояние можно с помощью псевдокласса :focus ):
Оформление , когда он находится в состоянии disabled и readonly :
Этот набор стилей будет у нас отправной точкой для создания других.
input с иконкой
Рассмотрим пример вставки в input иконки с помощью псевдоэлементов.
Для этого дополнительно обернём элемент в
Первый класс ( text-field__icon ) будем использовать для того, чтобы установить относительное позиционирование ( position: relative ). Это действие позволит нам разместить иконку в нужном месте относительно input , используя уже абсолютное позиционирование ( position: absolute ). Второй класс ( text-field__icon_email ) будет определять иконку, которую мы хотим вставить.
Ещё один вариант оформления:
input с активной svg-иконкой
В этом примере поместим в input иконку, на которую можно нажать.
Для этого мы также как и в предыдущем примере обернули в
Оформление выполнили так:
Ещё пример вставки иконки в input :
input с кнопкой
HTML-разметка input с кнопкой:
Расположение кнопки справа от input выполним с помощью флексов:
input с плавающим label
Разметка input с плавающим label:
input со счётчиком символов
Пример в котором под input отображается количество набранных символов и максимальная длина:
Это выполняется посредством следующего кода:
Стили для отображения состояния валидации input
Применить стили в зависимости от состояния поля в CSS можно с помощью специальных псевдоклассов. Например, :valid позволяет выбрать валидные элементы, а :invalid - не валидные.
Но, если вы хотите контролировать этот процесс и добавлять стили с помощью JavaScript, то тогда лучше это делать через классы. Например, использовать класс text-field__input_valid при успешной валидации, а text-field__input_invalid - при не успешной. Их следует добавлять к .
Для с плавающим :
Пример валидации формы с помощью JavaScript
Шаг 1: Формирование представления о функциональности
Сначала нам нужно составить концепцию того, как будет выглядеть наша форма, и как она будет функционировать. Для примера давайте создадим простую контактную форму, запрашивающую у пользователя следующую информацию:
Адрес электронной почты
Нам нужно убедиться, что пользователь вводит информацию правильно. Чтобы этого добиться, применим новые техники валидации на стороне клиента HTML5. А как насчет пользователей, у которых нет возможности использовать HTML5? Можно просто применить валидацию со стороны сервера, но наша статья не об этом.
Шаг 2: Разработка формы
Давайте постараемся определить то, как следует выглядеть нашей форме, создав грубую модель.
Видите, нашу форму составляют следующие элементы:
Заголовок
Обозначение обязательных для заполнения полей
Названия полей ввода
Поля ввода данных
Текст-заполнитель
Подсказки к полям
Теперь, когда вы определили, какие элементы составляют нашу форму, можно создавать разметку HTML.
Шаг 3: Первичный код HTML
Вплоть до этого момента HTML-файл в браузере пока пуст. Это – просто начальный код для страницы HTML5.
Шаг 4: Форма HTML
Давайте создадим форму HTML (оставим метод action пока пустым, так как проверка данных на стороне сервера в этом учебнике не раскрывается):
Шаг 5: Элементы формы HTML
Для получения организованного и структурированного контента своей формы, обернем ее элементы (label, input и т.д.) в список. Так что начнем мы с создания заголовка формы и первого элемента input:
Подсказки для полей формы
Как видно из макета, мы собираемся сделать форматированные подсказки для полей ввода электронного адреса “email” и вебсайта “website”. Поэтому добавим свои подсказки под поля ввода, где это нужно, и назначим им класс, чтобы можно было позже определить им стили.
Остальные элементы input
Двигаемся дальше и создаем остальные элементы формы, не забывая о том, что нужно обернуть каждый раздел в элемент списка.
Шаг 10: Стили обязательных для заполнения полей
Вы, возможно, заметите, что в визуальном плане от добавления атрибута required ничего не изменилось. Мы собираемся назначить стили обязательных для заполнения полей с помощью CSS. В этом примере каждое поле в качестве фонового изображения получит красную звездочку. Чтобы это сделать, нам нужно сначала добавить padding справа input-а, где будет находиться фоновое изображение (так будет предотвращено наложение текста, если запись окажется длинной строкой):
Теперь воспользуемся псевдоселектором CSS :required для того, чтобы выбрать все элементы формы с нужным атрибутом. Я сделал в photoshop’е простую иконку с красной звездочкой размером 16×16 px, которая послужит визуальным индикатором поля, обязательного к заполнению.
Что происходит при отправке формы?
Прямо сейчас при отправке формы с использованием элементов HTML5 различные браузеры действуют по-разному. Большая часть браузеров воспрепятствует отправке и покажет пользователю подсказку, отмечающую первое обязательное к заполнению поле, в которое не введено значение. Визуальные стили и поддержка таких полей довольно широки. К счастью, в будущем такое поведение будет стандартизировано.
В quirksmode можно посмотреть поддержку текущим браузером атрибута required.
Подсказка:
Шаг 11: Понимание новых атрибутов type и валидации на стороне клиента в HTML5
Пример: iPhone
iPhone от Apple’а распознает типы формы и динамично изменяет экранную клавиатуру, предоставляя требуемые по контексту символы. Например, все электронные адреса требуют следующих символов: “@” и “.” И iPhone предоставляет эти символы, когда у input-a задан соответствующий тип.
Шаг 12: Изменение атрибутов type
Шаг 13: Валидация HTML5
Как уже говорилось, валидация HTML5 основана на атрибутах type и включена по умолчанию. Для активации валидации формы никакой особенной разметки не требуется. Если хотите ее выключить, можете употребить атрибут novalidate, как здесь:
Поле имени
Теперь мы создадим свой собственный CSS для назначения стилей полям ввода, считающимся браузером достоверными и недостоверными. Если помните, мы использовали :required в своем CSS для определения стилей всем элементам ввода с обязательным атрибутом. Теперь нам можно назначить стили обязательным к заполнению полям, достоверным или нет, добавив в правила CSS :valid или :invalid.
Во-первых, давайте назначим стили недостоверным полям. В этом примере нам нужно определить стили формы как невалидные, когда та находится в фокусе. Мы добавим красную окантовку, красную тень и созданную в photoshop’е красную иконку для обозначения невалидного поля.
Сейчас, когда мы активизируем поле формы, видны стили в красном цвете, означающие невалидность. Как только в поле вводится хотя бы один символ, оно становится валидным, и отражают этот факт появляющиеся зеленые стили CSS.
Поля электронного адреса и URL’а
Стили CSS и правила валидации уже применены к полю электронного адреса, так как ранее мы уже установили атрибуты type и required.
Шаг 14: Представляем атрибут HTML5 pattern
Атрибут pattern
Атрибут pattern принимает регулярное выражение javascript’а. Это выражение, а не выражение браузера по умолчанию, применяется для валидации значения поля. Так что теперь наш HTML выглядит так:
Шаг 15: Подсказки к полям формы (CSS)
Теперь давайте определим стили подсказок к своей форме, говорящих пользователю формат, который следует использовать при вводе информации.
Мы устанавливаем display:none, потому что нам нужно показывать подсказки только тогда, когда пользователь фокусируется на поле ввода. Мы также по умолчанию устанавливаем всплывающие подсказки на красный цвет недостоверности, так как они всегда считаются невалидными, пока в них не будет введена правильная информация.
Применение селектора ::before
Теперь нам нужно добавить к блокам подсказок маленький треугольник, который поможет направлять взгляд и руководить им. Это можно делать с использованием изображений, но в данном случае мы сделаем все с помощью одного лишь CSS.
Так как это – чисто презентационный элемент, который не является жизненно важным для функциональности страницы, то добавим маленький треугольник, указывающий влево, при помощи псевдоселектора ::before. Это можно сделать с помощью одной из геометрических фигур unicode’а.
Применение смежного селектора +
Наконец, мы используем смежный селектор CSS для показа и скрытия подсказок к нашим полям формы. Смежный селектор (x + y) выбирает элемент, которому непосредственно предшествует предыдущий элемент. Так как подсказки для полей идут в нашем HTML сразу после полей ввода, можно применять этот селектор для показа/скрытия всплывающих подсказок.
Как видно из CSS, мы также установили подсказки к форме, чтобы те меняли цвет наряду с рамкой ввода, когда поле валидно или невалидно.
Шаг 16: Откиньтесь в кресле и любуйтесь своей великолепной формой HTML5
Давайте, наконец, рассмотрите свой полученный продукт!
Заключение
Как вы видите, новые свойства форм HTML5 весьма аккуратны! Все обратно совместимо, так что их введение в ваш вебсайт ничего не нарушит.
Валидация HTML5 приближается к замещению валидации на стороне клиента, успешно помогая пользователям правильно заполнять онлайн-формы.
Однако валидация HTML5 все еще не замещает валидацию на стороне сервера. До поры до времени, лучше всего при управлении информацией, отправляемой пользователем, применять оба метода.
Читайте также: