Как создать красивую форму регистрации на сайт HTML+CSS, Урок 1

Автор Maksim Inshakov
Как создать красивую форму регистрации на сайт HTML+CSS, Урок 1

Всем привет дорогие друзья вы на канале эти доктор ранее мы уже изучали.

Как создавать формы HTML. А в предыдущем видео уроке я покажу вам псевдоклассы для работы с формами в cect. И теперь мы можем применить все эти наши знания на практике вновь создавая какую-то форму и предателей красивое оформление с помощью тест также сделать небольшое также сделать хотя бы простенькую интерактивность чтобы пользователь как-то взаимодействовал форма была немного динамичный меняют свой внешний вид при каких-то действиях в этом видео.

Как создать вот такую вот форму в дальнейшем эта форма регистрации будет переводиться в рабочем состоянии с помощью скриптов, а пока, что в виде просто такую здесь есть вот небольшая интерактивность также кнопка у нас интерактивная и всё у нас здесь прекрасно работает и очень красиво отображается.

Давайте приступим к видеоуроку и так слева. Я открыл браузер справа у нас редактор создаем базовый шаблон с помощью! чтоб за счёт плагина emmet у нас таким образом быстро появляется начальная структура напишем заголовок красивая форма номер два 1 мы уже создали. Давайте теперь подключим наш файл стилей style.css теперь в теге Body создадим техформ. Обратите внимание, что у нас в браузере сразу же появляется все наши изменения данном видео. Я использую Live preview она работает только в браузере Google Chrome теперь создаем заголовок H1 напишем здесь регистрация и укажем атрибут title в котором будет написано форма регистрации на сайте — это у нас всплывающая подсказка дали. Давайте создадим div с классом и умножим на пять нажимаем Tab у нас появляется 5 с классом групп — это у нас будет группы элементов начнем заполнять 1 создадим лейбл и 1 Input с типом текст — это у нас будет текстовое поле в заголовке напишем имя пользователя. Теперь давайте с копируем и вставляем в следующие четыре группы такие же поляр и нам останется немного их заменить сделаем поле пароль, а следующие поле пароль еще раз той необходимо будет пароль повторить дальше мы будем в следующих видео уроках через скрипты сравнивать этих пароль и создавать пользователя в базе данных, а пока, что просто займёмся формой следующее поле у нас адрес электронной почты. Давайте сразу изменим тип на e-mail в поле паспорт поставим тип пароль и последняя. У нас группа есть будет на самом деле всего лишь один элемент. Это батон наша кнопка. Давайте создадим батон по центру и напишем текст регистрации мы видим вот такую вот форму — это начальная форма пока, что без каких-либо стилей в HTML файле всё довольно просто теперь при CSS для тега Body напишем стиле такие как Family tahoma — это у нас шрифт который будет использоваться на всём документе можете конечно же использовать любой. Также можно подключать через Google Font шрифт ранее мы рассматривали как — это сделать доля указываем фон. Я выбрал такой оранжевый цвет margin 0 чтобы у нас не было от стуков покроя и поставим фоновое изображение которое. Я подготовил в папке с проектом папку с проектом вы сможете скачать из описание под видео дали для H1 устанавливаем курсор ставим его тип Help. Теперь если вы найдёте на слово регистрация у нас будет появляться такое? и пояснительная подсказка которая. Вы указали в title Text transform uppercase то есть буквами padding-bottom — это отступ снизу у нас 5 пикселей и нижняя граница у нас шириной 3 пикселя такого вот цвета обычная прямая. Далее для формы указываем также margin 0 и авто для того чтобы она у нас стало по центру, а сверху и снизу у неё будет отступ 0 Phone укажем RGB. С небольшой прозрачностью цвет из палитры цветов и доктор. Вы же можете указывать любой цвет ширину сделаем 450 пикселей в высоту 500 пикселей 20 то есть отступ и и. Давайте добавим сразу же box-shadow то есть тень сделаем её с такими вот параметрами. Выведи у нас появляется легкая тень такого-то. Светлом чёрного стиля. То есть можно сказать — это серый цвет и выглядит. Уже довольно неплохо дальше для нашего класса групп мы сделаем морген 10 пикселей. ИП 15 лейбл будем оформлять следующим образом укажем padding-left 10 пикселей сделаем заглавными буквами текст далее. У нас идёт оформление наших импульсов margin Top 10 то есть отступ сверху высоту поставим для инпутов 49 они стали у нас уже повышен и ширину сделаем 400 пикселей теперь наша форма уже приобрела довольно неплохой внешний вид радиус. Давайте укажем 20 на 20 пикселей через слова с таким вот образом. Выведи у нас появляется довольно плавно с округлением можно достичь и других эффектов в зависимости от того как требуется границу поставим Non чтобы у нас не было рамки у этих инпутов так как сейчас — это не очень современно использовать такой дизайн мы будем использовать без рамок добавим просто небольшой тень. И тем самым у нас получится такой трехмерный эффект для наших вода тень мы будем везде использовать одинаковую просто копируем ранее созданную и вставляя там где необходимо import: Focus мы указываем: Focus — это у нас псевдокласс. Мы уже ранее рассматривали некоторые псевдоклассы данные класс позволяет нам изменять ему в тот момент когда на нём стоит курсор ввода вы видите мы наводим на поле и появляется рамка которую мы указали то есть в 2 пикселя этого цвета трансформер здесь мы можем делать анимацию translate X.

0 комментариев
0

Читайте также