/
leraaa
/
koloboki
Обзор
Документация
Войти
/
leraaa
/
koloboki
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
form.html
169 строк
7 KB
leraaa
практики 2-11
18 май 2026, 12:56
Верифицирован
18 май 2026, 12:56
b7a8d64
Код
Авторство
О чём код?
<!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 rel="icon" href="img/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"> </head> <body> <header> <div style="display: flex; align-items: center; gap: 15px;"> <img src="img/logo.png" alt="Логотип пекарни Колобок" width="60" height="60"> <h1>Пекарня "Колобок"</h1> </div> <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="#">Наше меню ▼</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#desserts"> Сладкое настроение</a></li> <li><a href="index.html#drinks"> Напитки</a></li> </ul> </li> <li><a href="index.html#gallery">Галерея</a></li> <li><a href="index.html#prices">Цены</a></li> <li><a href="form.html">Заказ</a></li> <li><a href="index.html#contacts">Контакты</a></li> </ul> </nav> </header> <main> <section class="order-section"> <h2> Оформить заказ</h2> <p>Заполните форму, и мы свяжемся с вами для подтверждения</p> <form id="orderForm" action="#" method="POST" class="order-form"> <fieldset> <legend> Контактные данные</legend> <div class="form-group"> <label for="name">Имя *</label> <input type="text" id="name" name="name" required minlength="2" placeholder="Введите ваше имя"> </div> <div class="form-group"> <label for="phone">Телефон *</label> <input type="tel" id="phone" name="phone" required placeholder="+7 (___) ___-__-__"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="example@mail.ru"> </div> </fieldset> <fieldset> <legend> Выбор продукции</legend> <div class="form-group"> <label for="product">Выберите товар *</label> <select id="product" name="product" required> <option value="">-- Выберите --</option> <option value="bread"> Хлеб ржаной (120₽)</option> <option value="borodinsky"> Бородинский (150₽)</option> <option value="croissant"> Круассан (90₽)</option> <option value="pie"> Пирожки (70₽)</option> <option value="tiramisu"> Тирамису (280₽)</option> <option value="coffee"> Кофе (150₽)</option> </select> </div> <div class="form-group"> <label for="quantity">Количество</label> <input type="number" id="quantity" name="quantity" min="1" max="50" value="1"> </div> </fieldset> <fieldset> <legend> Способ получения</legend> <div class="radio-group"> <label> <input type="radio" name="delivery" value="pickup" checked> Самовывоз (ул. Пряничная, 15) </label> <label> <input type="radio" name="delivery" value="delivery"> Доставка (+300 ₽ в пределах МКАД) </label> </div> <div class="form-group" id="address-group" style="display: none;"> <label for="address">Адрес доставки</label> <input type="text" id="address" name="address" placeholder="Улица, дом, квартира"> </div> </fieldset> <fieldset> <legend> Дополнительно</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> </fieldset> <div class="checkbox-group"> <label> <input type="checkbox" name="agreement" required> Я согласен на обработку персональных данных * </label> </div> <div class="form-buttons"> <button type="submit" class="submit-btn">✅ Оформить заказ</button> <button type="reset" class="reset-btn">🗑 Очистить форму</button> </div> <p class="required-note">* — поля, обязательные для заполнения</p> </form> </section> </main> <footer> <p> 📱 Мы в соцсетях: <a href="https://instagram.com" target="_blank" rel="noopener">Instagram</a> | <a href="https://vk.com" target="_blank" rel="noopener">ВКонтакте</a> </p> <p> <a href="#">⬆ Наверх</a> </p> <p>© 2026 Пекарня "Колобок"</p> </footer> <script> const deliveryRadios = document.querySelectorAll('input[name="delivery"]'); const addressGroup = document.getElementById('address-group'); deliveryRadios.forEach(radio => { radio.addEventListener('change', function() { if (this.value === 'delivery') { addressGroup.style.display = 'block'; } else { addressGroup.style.display = 'none'; } }); }); </script> </body> </html>