/
vikiii
/
bakery
Обзор
Документация
Войти
/
vikiii
/
bakery
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
flex-layout
form.html
212 строк
10 KB
Ваше Имя
ПЗ8 и ПЗ9: Форма заказа, карточки товаров, блочная модель, sticky навигация, кнопка Наверх
12 май 2026, 09:17
12 май 2026, 09:17
b69e348
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Форма заказа - Пекарня "Колобок"</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <style> html { scroll-behavior: smooth; } </style> </head> <body> <header class="header"> <img src="img/logo.png" alt="Логотип пекарни" class="logo"> <h1>Пекарня "Колобок"</h1> <nav> <ul id="navbar"> <li><a href="index.html">Главная</a></li> <li><a href="index.html#about">О нас</a></li> <li class="has-submenu"> <a href="index.html#menu">Наше меню</a> <ul class="submenu"> <li><a href="index.html#bread">Хлебная корзина</a></li> <li><a href="index.html#pastry">Сдобная выпечка</a></li> <li><a href="index.html#sweet">Сладкое настроение</a></li> <li><a href="index.html#drinks">Напитки</a></li> </ul> </li> <li><a href="index.html#prices">Цены</a></li> <li><a href="index.html#gallery">Галерея</a></li> <li><a href="index.html#contacts">Контакты</a></li> <li><a href="form.html">Заказ</a></li> <li><a href="https://eda.yandex.ru" target="_blank" rel="noopener">Доставка</a></li> </ul> </nav> </header> <main id="home"> <section id="order"> <h2>Форма заказа пекарни "Колобок"</h2> <form id="orderForm" action="#" method="POST"> <fieldset> <legend><h3>📋 Контактная информация</h3></legend> <div class="form-group"> <label for="fio">ФИО: <span class="required">*</span></label> <input type="text" id="fio" name="fio" required minlength="2" placeholder="Иванов Иван"> </div> <div class="form-group"> <label for="phone">Телефон: <span class="required">*</span></label> <input type="tel" id="phone" name="phone" required placeholder="+7 (123) 456-78-90"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="ivanov@example.com"> </div> </fieldset> <fieldset> <legend><h3>🍞 Детали заказа</h3></legend> <div class="form-group"> <label for="product-category">Тип продукции:</label> <select id="product-category" name="product-category"> <option value="">Выберите категорию</option> <option value="bread">Хлебная корзина</option> <option value="pastry">Сдобная выпечка</option> <option value="sweet">Сладкое настроение</option> <option value="drinks">Напитки</option> </select> </div> <div class="form-group"> <label for="product">Конкретный продукт: <span class="required">*</span></label> <select id="product" name="product" required> <option value="">Сначала выберите категорию</option> </select> </div> <div class="form-group"> <label for="quantity">Количество: <span class="required">*</span></label> <input type="number" id="quantity" name="quantity" min="1" max="99" value="1" required> </div> <div class="form-group"> <label>Особые требования:</label> <div class="checkbox-group"> <label class="checkbox-label"> <input type="checkbox" name="options" value="granated"> В гранёной вариации </label> <label class="checkbox-label"> <input type="checkbox" name="options" value="gluten-free"> Без глютена </label> </div> </div> </fieldset> <fieldset> <legend><h3>📅 Дата доставки/самовывоза</h3></legend> <div class="form-group"> <label for="date">Дата доставки/самовывоза: <span class="required">*</span></label> <input type="date" id="date" name="date" required> </div> <div class="form-group"> <label for="time">Время доставки:</label> <input type="time" id="time" name="time"> </div> </fieldset> <fieldset> <legend><h3>🚚 Способ получения</h3></legend> <div class="radio-group"> <label class="radio-label"> <input type="radio" name="delivery" value="pickup" checked> Самовывоз (ул. Пряничная, 15) </label> <label class="radio-label"> <input type="radio" name="delivery" value="delivery"> Доставка (+300 ₽ в пределах МКАД) </label> </div> </fieldset> <fieldset> <legend><h3>✏️ Дополнительно</h3></legend> <div class="form-group"> <label for="comment">Комментарий к заказу:</label> <textarea id="comment" name="comment" rows="3" placeholder="Особые пожелания, аллергии и т.д."></textarea> </div> <div class="form-group"> <label for="photo">Фото торта (если нужен дизайн):</label> <input type="file" id="photo" name="photo" accept="image/*"> </div> <div class="form-group"> <label for="promocode">Промокод:</label> <input type="text" id="promocode" name="promocode" placeholder="Введите, если имеется"> </div> <div class="form-group checkbox-group"> <label class="checkbox-label"> <input type="checkbox" name="agreement" required> Я согласен на обработку персональных данных <span class="required">*</span> </label> </div> </fieldset> <div class="form-buttons"> <button type="submit" class="submit-btn">Оформить заказ</button> <button type="reset" class="reset-btn">Очистить форму</button> </div> <div id="successMessage" style="display: none; background: #2ecc71; color: white; padding: 10px; border-radius: 8px; margin-top: 15px; text-align: center;"> ✅ Спасибо за заказ! Мы свяжемся с вами в ближайшее время. </div> </form> </section> </main> <footer> <p>© 2026 Пекарня "Колобок"</p> <p> <a href="https://vk.com" target="_blank" rel="noopener">ВКонтакте</a> | <a href="https://instagram.com" target="_blank" rel="noopener">Instagram</a> | <a href="https://t.me" target="_blank" rel="noopener">Telegram</a> </p> <p><a href="#home">Наверх ↑</a></p> </footer> <button id="scrollTopBtn" class="scroll-top-btn" title="Наверх">↑</button> <script> const productsByCategory = { bread: [ {value: "borodinsky", name: "Бородинский (500 г) — 120 ₽"}, {value: "derevensky", name: "Деревенский (650 г) — 150 ₽"}, {value: "ciabatta", name: "Чиабатта (400 г) — 100 ₽"}, {value: "gluten-free", name: "Безглютеновый (350 г) — 180 ₽"} ], pastry: [ {value: "croissant", name: "Круассан классический — 80 ₽"}, {value: "pie", name: "Пирожки (150 г) — 60 ₽"}, {value: "hugs", name: "Булочки 'Обнимашки' — 50 ₽"}, {value: "baguette", name: "Багет французский — 70 ₽"} ], sweet: [ {value: "tiramisu", name: "Тирамису — 250 ₽"}, {value: "eclair", name: "Эклеры — 90 ₽"}, {value: "medovik", name: "Медовик — 200 ₽"}, {value: "potato", name: "Пирожные 'Картошка' — 70 ₽"} ], drinks: [ {value: "coffee", name: "Свежесваренный кофе — 120 ₽"}, {value: "kvass", name: "Домашний квас — 80 ₽"}, {value: "tea", name: "Травяной чай с мёдом — 70 ₽"} ] }; </script> </body> </html>