Форма регистрации html и css

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