<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.

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

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

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

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

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

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

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