mospolytech-testing-4/contact.html - master - dew77/polytech-testing

mospolytech-testing-4/contact.html
76 строк4 KB
Artyom Yurkov
Done all labs
31 дек 2025, 22:29
31 дек 2025, 22:293457a75
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 24px; background: #f7f8fa; }
        .form { max-width: 420px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 10px; border: 1px solid #e1e5ed; box-shadow: 0 8px 24px rgba(0,0,0,0.05); }
        .field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
        label { font-weight: 600; }
        input, textarea { padding: 10px 12px; border-radius: 8px; border: 1px solid #cfd5e0; font-size: 15px; }
        button { padding: 10px 14px; border: none; border-radius: 8px; background: #4f7cff; color: #fff; font-size: 15px; cursor: pointer; }
        .success { color: #1e8e3e; margin-top: 10px; display: none; }
        .error { color: #c62828; font-size: 13px; display: none; }
    </style>
</head>
<body>
    <main class="form">
        <h1>Форма обратной связи</h1>
        <div class="field">
            <label for="name">Имя *</label>
            <input id="name" type="text" placeholder="Ваше имя">
            <div id="error-name" class="error">Имя обязательно</div>
        </div>
        <div class="field">
            <label for="email">Email *</label>
            <input id="email" type="email" placeholder="example@mail.com">
            <div id="error-email" class="error">Email обязателен</div>
            <div id="error-email-format" class="error">Неверный формат email</div>
        </div>
        <div class="field">
            <label for="message">Сообщение</label>
            <textarea id="message" rows="4" placeholder="Ваше сообщение (необязательно)"></textarea>
        </div>
        <button id="submit" type="button">Отправить</button>
        <div id="success" class="success">Спасибо! Сообщение отправлено.</div>
    </main>

    <script>
        const submitBtn = document.getElementById('submit');
        const nameInput = document.getElementById('name');
        const emailInput = document.getElementById('email');
        const messageInput = document.getElementById('message');
        const success = document.getElementById('success');
        const errName = document.getElementById('error-name');
        const errEmail = document.getElementById('error-email');
        const errEmailFmt = document.getElementById('error-email-format');

        function resetErrors() {
            [errName, errEmail, errEmailFmt, success].forEach(el => el.style.display = 'none');
        }

        function isValidEmail(value) {
            // Простая проверка наличия @ и точки
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
        }

        submitBtn.addEventListener('click', () => {
            resetErrors();
            const name = nameInput.value.trim();
            const email = emailInput.value.trim();
            const message = messageInput.value.trim();

            let hasError = false;
            if (!name) { errName.style.display = 'block'; hasError = true; }
            if (!email) { errEmail.style.display = 'block'; hasError = true; }
            else if (!isValidEmail(email)) { errEmailFmt.style.display = 'block'; hasError = true; }

            if (hasError) return;
            success.style.display = 'block';
            console.log('Submitted:', { name, email, message });
        });
    </script>
</body>
</html>