<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Перемещение placeholder над полем ввода при фокусе

Перемещение placeholder над полем ввода при фокусе

На этом уроке вы узнаете, как заставить placeholder не исчезать, а переместится наверх при заполнении поля формы.

HTML разметка

Форма состоит из двух текстовых полей и кнопки "Подписаться". Для создания кнопки так же используется поле input, но с типом "submit".

<div class="container">
    <h2>Premium Subscription</h2>
    <form>
        <div class="inputBox">
          <<input type="text" name="" required="required">
           <span>Full Name</span>
        </div>
        <div class="inputBox">
           <input type="email" name="" required="required">
           <span>Email Address</span>
        </div>
        <div class="inputBox">
           <input type="submit" value="Subscribe" name="">
        </div>
    </form>
</div>

CSS стили

Поместим нашу форму в белый контейнер и выровняем по центру экрана.

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];400;500;600;700;800;900&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex; / * отображать как гибкий контейнер * /
    justify-content: center; / * горизонтальное выравнивание * /
    align-items: center; / * вертикальное выравнивание * /
    flex-direction: column; / * направление главной оси * /
    min-height: 100vh; / * на всю высоту экрана * /
    background: linear-gradient(45deg,#6190e8,#a7bfe8); / * градиентный общий фон * /
}
.container{
    position: relative; / * относительное позиционирование * /
    padding: 70px 40px; / * поля, чтобы текст не прилипал к краям * /
    background: #fff; / * цвет фона * /
    border-radius: 20px; / * скругление углов * /
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);/ * тень у блока * /
}


Перемещение placeholder над полем ввода при фокусе.

Далее красиво оформим поля формы.

.container h2{
    color: #111; / * цвет заголовка * /
    margin-bottom: 45px; / * отступ снизу * /
    line-height: 1em; / * вертикальное выравнивание * /
    font-weight: 500; / * толщина шрифта * /
    padding-left: 10px; / * горизонтальное выравнивание * /
    border-left: 5px solid #e91e63; / * красная линия слева от заголовка * /
}
.inputBox{
    position: relative;
    width: 300px; / * ширина поля * /
    height: 46px; / * высота поля * /
    margin-bottom: 35px; / * отступ снизу * /
}
.inputBox:last-child{
    margin-bottom: 0; / * обнуление отступа под вторым полем * /
}
.inputBox input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #111; / * сплошная обводка поля * /
    background: transparent; / * прозрачный фон * /
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    outline: none;
    font-size: 16px;
    color: #111;
    font-weight: 300;
}
.inputBox span{
    position: absolute;
    top: 1px;
    left: 1px;
    display: inline-block; / * отображать как строчно-блочный элемент * /
    padding: 10px;
    font-size: 16px;
    color: #111;
    font-weight: 300;
    transition: 0.5s; / * плавный переход * /
    pointer-events: none;
}

На картинке ниже, стрелочками обозначены Full Name и Email Address. Это и есть placeholder, что значит заполнители. Когда пользователь начинает заполнять форму, эти надписи исчезают. В этом нет ничего страшного, но было бы немного комфортнее, если надписи остаются в поле зрения.



Перемещение placeholder над полем ввода при фокусе.

Перемещение placeholder-ов.

В состоянии фокуса, произошло перемещение вверх.

.inputBox input:focus ~ span,
.inputBox input:valid ~ span{
    font-size: 12px;
    color: #111;
    transform: translateX(-10px) translateY(-32px); / * перемещение placeholder-ов * /
}


Перемещение placeholder над полем ввода при фокусе.

Стилизация кнопки

.inputBox input[type="submit"]{
    background: #2196f3;
    color: #fff;
    border: none;
    max-width: 120px;
    cursor: pointer;
    font-weight: 500;
}
.inputBox input[type="submit"]:hover{
    background: #e91e63;
}


Перемещение placeholder над полем ввода при фокусе.

Посмотрите пример на CodePen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

boris021 boris021 30.09.2021 14:22:05

супер

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.