<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

В курсе содержится вся необходимая теория, а также множество практических примеров, в том числе, и из моей личной практики.

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

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

Подписавшись по 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):

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