html/lab5/task9/index.html - main - Coderdev/web-static-labs

html/lab5/task9/index.html
107 строк5 KB
Coderdev
26 мар 2026, 23:33
26 мар 2026, 23:336331fa1
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Форма JS</title>
<style>
body{font-family:Arial;text-align:center;background:#f2f2f2;}
h3{margin-top:40px;color:#2e7d32;}
form{display:inline-block;text-align:left;background:white;padding:20px 30px;border:2px solid #4caf50;border-radius:8px;width:320px;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
input,select{margin:5px 0 10px 0;padding:8px;font-size:14px;border:2px solid #ddd;border-radius:4px;width:100%;box-sizing:border-box;}
input:focus,select:focus{border-color:#4caf50;outline:none;}
button{margin-top:15px;padding:10px 25px;font-size:16px;border:none;background:#4caf50;color:white;border-radius:4px;cursor:pointer;width:100%;font-weight:bold;}
button:hover{background:#45a049;}
.error{color:#f44336;font-size:12px;height:18px;margin-bottom:5px;}
.check{display:flex;align-items:center;gap:8px;margin:10px 0;}
.check input{width:auto;margin:0;}
.check label{margin:0;cursor:pointer;font-weight:normal;}
#addrBox{margin-top:10px;padding:10px;border:1px dashed #4caf50;border-radius:4px;background:#f1f8e9;}
#successMessage{margin-top:15px;padding:12px;background:#4caf50;color:white;border-radius:4px;font-weight:bold;text-align:center;}
</style>
</head>
<body>
<h3>📝 Регистрационная форма</h3>
<form id="form" novalidate>
Логин<br><input id="login" type="text"><div id="e_login" class="error"></div>
Пароль<br><input id="pass" type="password"><div id="e_pass" class="error"></div>
Подтверждение<br><input id="pass2" type="password"><div id="e_pass2" class="error"></div>
Возраст<br><input id="age" type="number" min="14" max="120" step="1"><div id="e_age" class="error"></div>
Город<br><select id="city"><option value="">Не выбран</option><option value="Москва">Москва</option><option value="Краснодар">Краснодар</option><option value="Пермь">Пермь</option></select><div id="e_city" class="error"></div>
<div class="check"><input type="checkbox" id="courier"><label for="courier">🚚 Доставить курьером</label></div>
<div id="addrBox" style="display:none">Адрес<br><input id="addr"><div id="e_addr" class="error"></div></div>
<button type="submit">✅ Отправить</button>
</form>

<script>
const form=document.getElementById("form");
const login=document.getElementById("login");
const pass=document.getElementById("pass");
const pass2=document.getElementById("pass2");
const age=document.getElementById("age");
const city=document.getElementById("city");
const courier=document.getElementById("courier");
const addrBox=document.getElementById("addrBox");
const addr=document.getElementById("addr");
const e_login=document.getElementById("e_login");
const e_pass=document.getElementById("e_pass");
const e_pass2=document.getElementById("e_pass2");
const e_age=document.getElementById("e_age");
const e_city=document.getElementById("e_city");

courier.addEventListener("change",()=>{
    addrBox.style.display=courier.checked?"block":"none";
});

form.addEventListener("submit",(e)=>{
    e.preventDefault();
    let ok=true;
    document.querySelectorAll(".error").forEach(el=>el.textContent="");
    let oldSuccess=document.getElementById("successMessage");
    if(oldSuccess) oldSuccess.remove();
    
    if(login.value.length<5||login.value.length>20){
        e_login.textContent="Логин должен быть от 5 до 20 символов";
        ok=false;
    }
    if(pass.value.length<5||pass.value.length>12){
        e_pass.textContent="Пароль должен быть от 5 до 12 символов";
        ok=false;
    }
    if(pass.value!==pass2.value){
        e_pass2.textContent="Пароли не совпадают";
        ok=false;
    }
    let a=Number(age.value);
    if(isNaN(a)||a<14){
        e_age.textContent="Возраст слишком мал (минимум 14 лет)";
        ok=false;
    }else if(a>120){
        e_age.textContent="Возраст слишком велик (максимум 120 лет)";
        ok=false;
    }else if(a>=14&&a<=18){
        e_age.textContent="⚠️ Требуется согласие родителей";
    }
    if(city.value===""){
        e_city.textContent="Выберите город";
        ok=false;
    }
    if(courier.checked){
        if(addr.value.trim()===""){
            let e_addr=document.getElementById("e_addr");
            e_addr.textContent="Введите адрес доставки";
            ok=false;
        }
    }
    if(ok){
        let successMsg=document.createElement("div");
        successMsg.id="successMessage";
        let cityText=city.value;
        let deliveryText=courier.checked?`с доставкой курьером по адресу: ${addr.value}`:"без доставки";
        successMsg.innerHTML=`✅ <strong>РЕГИСТРАЦИЯ УСПЕШНА!</strong><br><br>Добро пожаловать, <strong>${login.value}</strong>!<br>Ваш город: <strong>${cityText}</strong><br>Доставка: <strong>${deliveryText}</strong>`;
        form.appendChild(successMsg);
        successMsg.scrollIntoView({behavior:"smooth",block:"nearest"});
    }
});
</script>
</body>
</html>