Exemple de formulaire complet

HTML

<form>
    <div class="row g-3">
        <!-- texte et nombre -->
        <div class="md:col-6">
            <label for="nom" class="form-label">
                Nom complet
            </label>
            <input type="text" class="form-control" id="nom" placeholder="Votre nom">
        </div>
        <div class="md:col-6">
            <label for="age" class="form-label">
                Âge
            </label>
            <input type="number" class="form-control" id="age" min="16" max="99"
                placeholder="Votre âge">
        </div>

        <!-- courriel -->
        <div class="col-12">
            <h5>Courriel</h5>
            <div class="input-group">
                <input type="password" class="form-control" id="email" placeholder="Entrez votre adresse courriel">
            <label for="email" class="input-group-text">
                @cegeplevis.ca
            </label>

            </div>
        </div>

        <!-- mot de passe -->
        <div class="col-12">
            <label for="password" class="form-label">
                Mot de passe
            </label>
            <input type="password" class="form-control" id="password"
                placeholder="Entrez votre mot de passe">
        </div>

        <!-- Cases à cocher -->
        <div class="col-12">
            <h5>
                Vos intérêts
            </h5>
            <div class="form-field">
                <input class="check" type="checkbox" id="sport">
                <label for="sport">
                    Sports
                </label>
            </div>
            <div class="form-field">
                <input class="check" type="checkbox" id="musique">
                <label for="musique">
                    Musique
                </label>
            </div>
            <div class="form-field">
                <input class="check" type="checkbox" id="lecture">
                <label for="lecture">
                    Lecture
                </label>
            </div>
        </div>

        <!-- Boutons radio -->
        <div class="col-12">
            <h5>
                Type de participation
            </h5>
            <div class="form-field">
                <input class="radio" type="radio" name="participation"
                    id="presentiel">
                <label for="presentiel">
                    En présentiel
                </label>
            </div>
            <div class="form-field">
                <input class="radio" type="radio" name="participation" id="distance">
                <label for="distance">
                    À distance
                </label>
            </div>
        </div>

        <!-- Boutons -->
        <div class="col-12 mt-4">
            <div class="d-flex gap-2">
                <button type="button" class="btn-solid theme-primary">
                    S'inscrire
                </button>
                <button type="reset" class="btn-outline theme-secondary">
                    Effacer
                </button>
            </div>
        </div>

   </div>

</form>