<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; background: #f0f4f8; }
        form { max-width: 450px; margin: 0 auto; background: white; padding: 25px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        label { display: block; margin-top: 12px; font-weight: bold; color: #1B3A5C; }
        input, select, textarea { width: 100%; padding: 10px; margin-top: 5px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 15px; box-sizing: border-box; }
        input:focus, select:focus, textarea:focus { border-color: #2E86AB; outline: none; }
        input:invalid { border-color: #E84D3D; }
        input:valid { border-color: #27AE60; }
        button { width: 100%; margin-top: 15px; padding: 12px; background: #2E86AB; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
    </style>
</head>
<body>
    <form>
        <h2 style="text-align:center;color:#1B3A5C">Anketa</h2>
        <label>Ism (kamida 2 harf):</label>
        <input type="text" minlength="2" maxlength="50" required placeholder="Ismingiz">
        <label>Yosh (10-100):</label>
        <input type="number" min="10" max="100" required>
        <label>Telefon (+998...):</label>
        <input type="tel" pattern="\+998[0-9]{9}" placeholder="+998901234567">
        <label>Shahar:</label>
        <select required>
            <option value="">-- Tanlang --</option>
            <option>Toshkent</option>
            <option>Samarqand</option>
            <option>Buxoro</option>
            <option>Guliston</option>
        </select>
        <label>Xabar:</label>
        <textarea rows="3" placeholder="Xabaringiz..."></textarea>
        <button type="submit">Yuborish</button>
    </form>
</body>
</html>