<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Адаптивная контактная форма

Адаптивная контактная форма

На этом уроке мы будем создавать адаптивную контактную форму на всю ширину браузера, используя CSS и медиа-запросы.

Демонстрация примера.

HTML-разметка

Для тега form создадим розовый блок с классом container.

<div class="container">
  <form action="#">
  </form>
</div>

Внутри тега форм создадим пять рядов с классом row. Внутри каждого ряда, кроме последнего будет две колонки: первая – с классом col-25, вторая с классом col-75. Первая колонка будет служить оберткой для label, вторая колонка – оберткой для поля ввода.

<div class="row">
  <div class="col-25">
    <label for="fname">Имя</label>
  </div>
  <div class="col-75">
    <input type="text" id="fname" name="firstname" placeholder="Ваше имя..">
  </div>
  </div>

Таким образом, продемонстрированный выше фрагмент кода, будет повторяться два раза (занимать первые два ряда), меняться будет только содержимое label и полей ввода. В третьем ряду row, вместо поля ввода, вы увидите поле выбора с опциями.

<div class="row">
  <div class="col-25">
    <label for="country">Страна</label>
  </div>
  <div class="col-75">
  <select id="country" name="country">
    <option value="finland">Финляндия</option>
    <option value="germany">Германия</option>
    <option value="italy">Италия</option>
  </select>
  </div>
</div>

Четвёртый ряд состоит из label и область для ввода текста.

<div class="row">
  <div class="col-25">
    <label for="subject">Тема</label>
  </div>
  <div class="col-75">
    <textarea id="subject" name="subject" placeholder="Напишите что-нибудь.." style="height:200px"></textarea>
  </div>
</div>

Пятый ряд содержит только кнопку Отправить.

<div class="row">
  <input type="submit" value="Отправить">
</div>

Мы наметили только HTML структуру, дальше предстоит большая работа со стилями.

CSS-код

Когда речь идет об адаптивной контактной форме, это значит, что все значения width (ширина), следует задавать в %. Для самого родителя формы - container, мы не будем задавать ширину.

.container {
  border-radius: 5px; /* скруглим углы */
  background-color: #f8bbD0;
  padding: 20px;
}

А зададим ширину у колонок, 25% будут занимать лейблы, а 75% – поля формы, от всей ширины контейнера. Не забудем про float, это выстроит обе колонки в ряд.

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
  color: #212121;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

Псевдокласс after, должен очищать ряды row после обтекаемых колонок, чтобы каждый новый ряд начинался с новой строки.

.row:after {
  content: "";
  display: table;
  clear: both;
}

Чтобы мы могли для лейблов задать отступы, необходимо строчный тег label назначить строчно-блочным элементом. Поскольку для строчных элементов нельзя установить паддинги.

label {
  padding: 10px 10px 10px 0;
  display: inline-block;
}

Для полей ввода, элементов выбора и текстовой области задаются общие стили.

input[type=text], select, textarea {
  width: 100%; /* ширина полей*/
  padding: 10px; /* отступы*/
  border: 1px solid #bdbdbd; /* толщина стиль цвет рамки*/
  border-radius: 5px; /* скругление углов*/
  resize: vertical; /* Можно изменять размеры элемента по вертикали*/
}

Для поля с кнопкой Отправить, свои отдельные стили с правым обтеканием (float: right).

input[type=submit] {
  background-color: #e91e63;
  color: #fff;
  padding: 10px 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  float: right;
}

При наведении мыши, кнопка Отправить, изменит цвет фона.

input[type=submit]:hover {
  background-color: #c2185b;
}

Все элементы стилизованы, на десктопном экране все хорошо.

Адаптивная контактная форма

Работа над адаптивностью

Теперь посмотрим, что у нас с адаптивностью, уменьшаем браузер и видим, что на разрешении экрана, меньше 600 пикселей, лейблы стали некрасиво прижиматься к полям ввода, а слова перескакивать на новые строки.Вообщем надо избавляться от двух колонок, а оставить только одну колонку шириной 100%, на ширине меньше 600 пикселей. Кнопку Отправить мы сделаем тоже на всю ширину формы.

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  } }

Осталась только одна колонка.

Адаптивная контактная форма

Код целиком на CodePen:


See the Pen Responsive Form by porsake (@porsake) on CodePen.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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