<MyRusakov.ru />

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

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

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

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

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Верстка формы + скрипт выбора даты

Верстка формы + скрипт выбора даты

На этом уроке, мы займемся версткой формы, пока без отправления данных на сервер. Кроме того, установим скрипт выбора даты, при онлайн бронировании.

Изучение макета

Перед нами фрагмент формы для бронирования из реального PSD макета, из которого нужно сделать HTML страницу с точно таким же стилевым оформлением.

 Верстка формы + скрипт выбора даты.

Мысленно разобьем макет-дизайн формы, на блоки-обертки и вложенные в них элементы. Мы сгруппировали однотипные элементы в четыре блока и всю эту конструкцию поместили в один общий контейнер booking_form.

  • В первом блоке - заголовок h2
  • Во втором input_contact – четыре текстовых поля для контактов
  • В третьем input_label – два текстовых поля с метками
  • В четвертом submit_button – кнопка Отправить

Зачем обертывать однотипные элементы в общие блоки? Так, нам проще задавать для них общие стили оформления, делать отступы и контролировать их расположение и поведение.

В атрибут placeholder закладывается подсказка, какую информацию, должен ввести пользователь

HTML структура

<div class="booking_form">
<h2>Забронировать визит</h2>
  <form action="#">
    <div class="input_contact">
      <input type="text" placeholder="Имя">
      <input type="text" placeholder="Фамилия">
      <input type="text" placeholder="Е-майл">
      <input type="text" placeholder="Тел.">
    </div>
    <div class="input_label">
      <label><span>Время</span><input type="text"></label>
      <label><span>Дата</span><input type="text" id="datepicker"></label>
    </div>
    <div class="submit_button">
      <input type="submit" value="Отправить">
    </div>
  </form>
</div>

Написать HTML код, можно, просто глядя на макет, однако для написания CSS, необходимо детально погрузиться в Photoshop или Avocode.

CSS код

Задаем общие базовые стили для всех элементов. Обнуляем поля и отступы, убираем дефолтную обводку внутри полей и уберем влияние паддингов и маржинов на размеры элементов (border-box).

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

Максимальная ширина формы, отступы от края браузера. Свойство auto, ставит форму посередине от правого и левого края браузера.

.booking_form {
    max-width: 400px;
    margin: 4rem auto;
}

Стилевое оформление для заголовка. Шрифт Roboto Condensed, находите на Google Font и выполняете их инструкции.

h2 {
    font-family: 'Roboto Condensed';
    font-size: 32px;
    color: #313030;
    padding-bottom: 30px;
}

Для того, чтобы во втором блоке, поля расположить в строку, подключаем flex-технологию. Свойство space-between, раскидает инпуты по краям формы, а свойство wrap, разрешит перенос полей на новую строку.

.booking_form .input_contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

Для достижения лучшей кроссбраузерности, добавим вендорные префиксы, для flexbox c помощью сервиса.

https://autoprefixer.github.io/ru/

Общие стили оформления, для вводимого текста для всех текстовых полей.

input[type=text] {
    height: 30px;
    border: 1px solid #f1f1f1;
    padding: 0 13px;
    font-family: 'Open Sans';
    color: #737272;
    font-size: 14px;
}

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

.booking_form .input_contact input[type=text] {
    width: 190px;
    margin-bottom: 15px;
}


.booking_form .input_label input[type=text] {
    width: 320px;
    margin-bottom: 15px;
}

В третьем блоке, label и input, расположим в строку.

.booking_form .input_label label {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

Отдельно стилизуем, метки.

.booking_form .input_label span {
    font-family: 'Open Sans';
    color: #737272;
    font-size: 14px;
    line-height: 30px;
}

Текст у placeholder.

input::-webkit-input-placeholder,
input::-moz-input-placeholder {
    font-family: 'Open Sans';
    color: #737272;
    font-size: 14px;
}

При установке курсора в текстовое поле, текст у placeholder, исчезает.

*:focus::-webkit-input-placeholder {
    color: transparent;
}


*:focus::-ms-input-placeholder {
    color: transparent;
}

Сместим кнопку к правому краю формы.

.booking_form .submit_button {
    display: flex;
    justify-content: flex-end;
}

Оформление для кнопки.

.booking_form input[type=submit] {
    width: 120px;
    height: 45px;
    background: #607D8B;
    color: #fff;
    font-family: 'Roboto Condensed';
    font-size: 20px;
    margin-top: 20px;
    border: none;
    cursor: pointer;
}

Скрипт выбора даты jQuery UI

https://jqueryui.com/datepicker

К текстовому полю, прикрутим идентификатор datepicker, при клике по которому появится календарь.

<label><span>Дата</span><input type="text" id="datepicker"></label>

Подключим между тегами head, CSS файл библиотеки.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Перед закрывающим тегом body подключим обе библиотеки и инициализируем скрипт выбора даты datepicker.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$( function() {
    $( "#datepicker" ).datepicker();
});
</script>

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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