Привет всем! Я продолжаю путь к новой профессии. В предыдущем посте я рассказывал о том как сделать форму регистрации используя только лишь 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>. Данную форму вы можете с легкость использовать у себя на сайте.