
Привет всем! Я продолжаю путь к новой профессии. В предыдущем посте я рассказывал о том как сделать форму регистрации используя только лишь html. Сегодня рассказать как я делал форму регистрации, но с использованием css. Благодаря каскадной таблице стилей форма регистрации получилась красивой и удобной.
В свое блоге я никого не учу, а лишь показываю свою работу. Это мой второй проект, поэтому не судите строга. Если нашли ошибку пожалуйста отпишите в комментариях.
Напомню вам, что я поставил себе цель за 6-7 месяцев получить новую профессию веб-разработчика. Я буду изучать язык JavaScript на Hexlet-e (почему я выбрал обучающие курсы именно этой компании, я расскажу позже). Но перед изучение основ JS необходимо изучить html и css и знать хотя бы на начальном уровне.
Я учу html и css на сайте code-basic этот сайт также разработка Hexlet-a. Могу сразу сказать, что html мне понравился, а вот css-а было мало уроков. Я прошел их за 2 дня, но понял что знаний не хватает. Поэтому если вы планируете углубиться в css то можно сразу искать дополнительную информацию.
Приступим к написанию формы регистрации на сайт с использование html и css. Для этого нам понадобиться среда разработки, я использую Visual Studio Code. Ее можно бесплатно скачать. Также можно воспользоваться онлайн средой разработкой.
Мы начнем с html и плавно перейдем на css. Некоторые аспекты написания html я не буду описывать так, как описал их в предыдущем посте. Форма будет состоять из двух секций: основная информация и ваш профиль.
<!DOCTYPE html> <htm lang="ru"> <head> <meta charset="UTF-8"> <title> Форма регистрации на сайт html и css - мой второй проект </title> <meta name="description" content="Как сделать форму регистрации на сайт с помощью html и css - мой второй проект"> </head> <body> </body> </htm>
Пишем стандартный код html как показано выше. Не забываем указывать title и description.
В тег <body> находится тег <form> он устанавливает форму на веб странице. Эта форма предназначена для обмена данными. Указываем заголовок нашей формы в теге <h1>.
<body> <form action=""> <h1>Регистрация</h1> <label for="name">Имя:</label> <input type="text" name="name"> <label for="email">e-mail:</label> <input type="email" name="email"> <label for="password">Пароль:</label> <input type="password" name="password"> <label>Возраст</label> <input type="radio" name="age" value="under_18"> <label class="light" for="under_18">Меньше 18</label> <input type="radio" name="age" value="over_18"> <label class="light" for="over_18">Больше 18</label> </form> </body>
В первой части нашей формы — «Основная информация» находится 3 поля: имя, email и пароль; а также две радиокнопки. Напомню вам, что тег <input> можно указать в теги <label> и тогда не придется связывать их по атрибуту name.
С помощью тега <fieldset> мы сгруппируем элементы формы. Данная группировка облегчит нам работу с данными.
See the Pen yLyyLMY by Artem (@Polkovnik123) on CodePen.dark
Сразу сделаем заголовок первой части нашей формы и напишем «Основная информация». Это можно сделать с помощью теге <legend>.
Похожая ситуация выглядит и со вторым полем информации «Ваш профиль». Начинаем с тега <fieldset>, затем идет поле для ввода <textarea> с заголовком «БИО» где пользователь может написать в свободной форме несколько слов о себе. Следующий этап — это выпадающий список выбора профессии и «Увлечения» представленные виде checkbox. Замыкает все это кнопка «Отправить».
See the Pen qBEEEKG by Artem (@Polkovnik123) on CodePen.dark
Переходим к документу со стилями, предварительно создав его у себя на компьютере. Также необходимо подключить документ со стилями и google шрифт Nunito в теги <head>. Это должно выглядеть следующим образом. Это конечно же все можно сделать в онлайн среде разработки.
<link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Nunito:400,300" rel="stylesheet" type="text/css">
Начинаем с свойства box-sizing, задаем высоту и ширину всего элемента. Затем переходим к тегу <body> и указываем, формат шрифтов — Nunito или san-serif и цвет шрифта. Если говорить о стили самой формы то максимальную ширину указываем как 300px, внешние отступы — 10px сверху и снизу, а справа и лева указываем вторым значением — auto. Внутренние отступы принимают значение 10px и 20px, где первое значение это верх и низ, а второе это право/лево. Цвет фона указываем серым, а радиус границ 8px. Заголовок располагаем по середине и выставляем внешний отступ-снизу 30px.
See the Pen KKwwdmw by Artem (@Polkovnik123) on CodePen.dark
Следующий шаг это группировка всех полей где необходимо указывать данные или что-то писать. Мы группируем их для того, чтобы единожды для всех указать стили. В первую очередь указываются <input>, затем область для описания «БИО» и строку для выбора профессии.
input[type="text"], input[type="email"], input[type="password"], textarea, select { background: rgba(255, green, blue, 0.1); border: none; font-size: 16px; height: auto; margin: 0; outline: 0; padding: 15px; width: 100%; background-color: #e8eeef; color: #8a97a0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); margin-bottom: 30px; }
Чтобы выделить границы полей воспользуемся следующим псевдо-классом «:focus». Активация происходит при клике мышью.
Затем группируем радиокнопки и checkbox — задаем им единый стиль. Для тега <select>, <fieldset> и <legend> задаем им стили согласно приведенному ниже примеру. Свойство label.light задает насыщенность шрифта 300, а также указываем свойство display — каким образом будет отображаться информация.
See the Pen dyPPMvX by Artem (@Polkovnik123) on CodePen.dark
Следующим этапом, делаем наши номера подзаголовков в форме- зеленным цветом. Если вы помните в html мы указали им class=»section». Также придадим стиль нашей единственной кнопке. Кнопка будет занимать всю ширину формы и будет зеленного цвета.
.section { background-color: #5fcf80; color: #fff; height: 30px; width: 30px; display: inline-block; font-size: 0.8em; margin-right: 4px; line-height: 30px; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); border-radius: 100%; } button { padding: 19px 39px 18px 39px; color: #fff; background-color: #4bc970; font-size: 18px; text-align: center; font-style: normal; border-radius: 5px; width: 100%; border: 1px solid #3ac162; border-width: 1px 1px 3px; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1); margin-bottom: 10px; }
На данный момент большинство запросов в интернете происходит с мобильных устройств, поэтому нам просто необходимо сделать нашу форму адаптивной. Для этого мы воспользуемся правилом @media и зададим правило только для определенного размера экрана.
Полный код формы регистрации на сайт с использование html и css .
See the Pen MWYYaew by Artem (@Polkovnik123) on CodePen.dark
На данном этапе мы заканчиваем данный проект. Я внес дополнительные изменения в код такие как: пробел между название и радиокнопками, а также поместил определенные <input> в <label>. Данную форму вы можете с легкость использовать у себя на сайте.