Form

Contact informations :
Code HTML

    <fieldset>
        <legend>Contact information :</legend>
        <form class="form">
            <div class="row">
                <div class="md:col-6 col-12">
                    <div class="form-group has-success">
                        <label for="Email">Enter email</label>
                        <input class="" type="email" placeholder="test@mail.com" id="Email">
                        <div class="feedback">Entrer une adresse email valide</div>
                    </div>
                </div>
                <div class="md:col-6 col-12">
                    <div class="form-group has-error">
                        <label for="Input">Reason for contact</label>
                        <select class=" form-select" id="Input">
                            <option value="Option 1">Help</option>
                            <option value="Option 2">Thanks</option>
                            <option value="Option 3">Support</option>
                        </select>
                        <div class="feedback">Veuillez choisir une option</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group has-error">
                        <label for="Message">Message</label>
                        <textarea class="" placeholder="Your message.." id="Message"></textarea>
                        <div class="feedback">Le message ne peut pas être vide</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="lg:col-5 sm:col-6 col-12">
                    <div class="form-group has-error">
                        <label class="">Date de naissance</label>
                        <input type="date" name="birthday" id="birthday" class="form-date">
                        <div class="feedback">Veuillez choisir une date</div>
                    </div>
                </div>
                <div class="lg:col-2 sm:col-6 col-12">
                    <div class="form-group">
                        <label class="">Color</label>
                        <input type="color" name="color" id="color" class="form-color">
                    </div>
                </div>
                <div class="lg:col-5 col-12">
                    <div class="form-group has-error">
                        <label class="">Nature of problem</label>
                        <select class="form-select" id="select">
                            <option value="Option 1">Help</option>
                            <option value="Option 2">Thanks</option>
                            <option value="Option 3">Support</option>
                        </select>
                        <div class="feedback">Veuillez choisir une option</div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="form-group has-error">
                        <label for="number">Enter number</label>
                        <input class="" type="number" placeholder="number" id="Email">
                        <div class="feedback">Entrer une valeur numérique valide</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <label for="switch" class="switch">
                        <input type="checkbox" name="switch" id="switch" checked>
                        <span class="slider"></span>
                        <span class="switch-label">Switch toggle</span>
                    </label>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="form-group has-error">
                        <input type="file" name="file" id="file">
                        <div class="feedback">Format de fichier non valide</div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="Send">
                            <input type="checkbox" id="Send">
                            <span class="-label-body">Send a copy to yourself</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <input class="btn btn-primary" type="submit" value="Submit">
                    <input class="btn btn-reset" type="reset" value="Reset">
                </div>
            </div>
        </form>
    </fieldset>