Aller au contenu

Exercice 4 : Inscription au HackTech 2025 (Corrigé)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inscription - HackTech 2025</title>
</head>
<body>
    <h1>🚀 Inscription au HackTech 2025</h1>
    <p>Rejoignez le plus grand hackathon étudiant de l'année !</p>

    <form action="#" method="POST">

        <!-- PARTIE OBLIGATOIRE -->

        <fieldset>
            <legend>Informations personnelles</legend>

            <label for="nom">Nom *</label>
            <input type="text" id="nom" name="nom" required>
            <br><br>

            <label for="prenom">Prénom *</label>
            <input type="text" id="prenom" name="prenom" required>
            <br><br>

            <label for="email">E-mail *</label>
            <input 
                type="email" 
                id="email" 
                name="email"
                placeholder="prenom.nom@example.com"
                required
            >
            <br><br>

            <label for="ddn">Date de naissance</label>
            <input type="date" id="ddn" name="date_naissance">
        </fieldset>

        <br>

        <fieldset>
            <legend>Choix de participation</legend>

            <label for="evenement">Type d'événement *</label>
            <select id="evenement" name="evenement" required>
                <option value="">-- Choisissez --</option>
                <option value="hackathon">Hackathon (24h non-stop)</option>
                <option value="conference">Conférence Tech</option>
                <option value="lan">LAN Party Gaming</option>
                <option value="workshop">Workshop IA/ML</option>
            </select>
            <br><br>

            <p>Niveau d'expérience *</p>

            <input type="radio" id="debutant" name="niveau" value="debutant" required>
            <label for="debutant">Débutant (première participation)</label>
            <br>

            <input type="radio" id="inter" name="niveau" value="intermediaire">
            <label for="inter">Intermédiaire (quelques projets perso)</label>
            <br>

            <input type="radio" id="avance" name="niveau" value="avance">
            <label for="avance">Avancé (plusieurs hackathons/projets)</label>
        </fieldset>

        <br>

        <fieldset>
            <legend>Centres d'intérêt</legend>

            <p>Technologies qui vous intéressent</p>

            <input type="checkbox" id="web" name="techno" value="web">
            <label for="web">Développement Web (Frontend/Backend)</label>
            <br>

            <input type="checkbox" id="mobile" name="techno" value="mobile">
            <label for="mobile">Développement Mobile (iOS/Android)</label>
            <br>

            <input type="checkbox" id="ia" name="techno" value="ia">
            <label for="ia">Intelligence Artificielle / Machine Learning</label>
            <br>

            <input type="checkbox" id="data" name="techno" value="data">
            <label for="data">Data Science / Big Data</label>
            <br>

            <input type="checkbox" id="cloud" name="techno" value="cloud">
            <label for="cloud">Cloud Computing / DevOps</label>
            <br>

            <input type="checkbox" id="cyber" name="techno" value="cyber">
            <label for="cyber">Cybersécurité</label>
            <br><br>

            <label for="commentaires">Parlez-nous de vos attentes</label><br>
            <textarea 
                id="commentaires" 
                name="commentaires"
                rows="5"
                cols="50"
                placeholder="Qu'espérez-vous apprendre ? Avez-vous des idées de projets ?"
                maxlength="500"
            ></textarea>
            <br>
            <small>Maximum 500 caractères</small>
        </fieldset>

        <br>

        <!-- PARTIE BONUS (si implémentée) -->

        <fieldset>
            <legend>Adresse (optionnel)</legend>

            <label for="adresse">Adresse complète</label>
            <input 
                type="text" 
                id="adresse" 
                name="adresse"
                placeholder="Numéro et nom de rue"
            >
            <br><br>

            <label for="cp">Code postal</label>
            <input 
                type="text" 
                id="cp" 
                name="code_postal"
                pattern="[0-9]{5}"
                placeholder="75001"
                title="Code postal à 5 chiffres"
            >
            <br><br>

            <label for="ville">Ville</label>
            <input type="text" id="ville" name="ville" list="villes">
            <datalist id="villes">
                <option value="Paris">
                <option value="Lyon">
                <option value="Marseille">
                <option value="Toulouse">
                <option value="Bordeaux">
                <option value="Lille">
            </datalist>
        </fieldset>

        <br>

        <!-- VALIDATION -->

        <input type="checkbox" id="cgv" name="cgv" required>
        <label for="cgv">
            J'accepte le <a href="#reglement" target="_blank">règlement de l'événement</a> 
            et la politique de confidentialité *
        </label>
        <br><br>

        <button type="submit">✅ Valider mon inscription</button>
        <button type="reset">🔄 Réinitialiser</button>
    </form>

    <br>
    <p><small>* Champs obligatoires</small></p>
</body>
</html>