"fiche d'inscription à une formation "
Bootstrap 4.1.1 Snippet by letymdb

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Fiche d'inscription</title> <link rel="stylesheet" type="text/css" href="../css/formulairebyme.css"> </head> <body> <p><img src="https://www.biblond.com/wp-content/uploads/2019/05/formation-1.jpg" alt="images logo formation" width="300"></div></p> <header> <h1>Fiche d'inscription</h1> </header> <form> <fieldset> <legend>Vos coordonnées :</legend> <label for="nm">Nom et Prénom:</label> <input type="text" name="nom" id="nm" placeholder="Prénom"> <input type="text" name="prn" id="nm" placeholder="Nom"> <br> <label for="ag">Age:</label> <input type="number" name="age" id="ag" min="14" max="70"> <br> <label for="sx">Sexe:</label> <select name="jsp" id="sx" style="width:200px;"> <option value="Femme">Femme</option> <option value="Homme">Homme</option> <option value="Non Définie">Non Définie</option> </select> <br> <label for="Dn">Date de naissance</label> <input type="date" name="daten" id="Dn"> <label for="ln">lieu de naissance</label> <input type="text" name="lieun" id="ln" placeholder="Pays , ville"> <br> <label for="numtel">numéro de téléphone:</label> <input type="tel" name="numtel" id="numtel" placeholder="+213"> <br> <label for="mail">Email:</label> <input type="email" name="mail" id="mail" placeholder="exemple@gmail.com"> <br> <label for="adrs">Adress complete:</label> <input type="text" name="adress" id="adrs" placeholder="N°Rue cartier ville"> <br> <label>Statut:</label> <input type="radio" name="statut" id="etud" value="Etudiant"> <label for="dpl" >Etudiant</label> <input type="radio" name="statut" id="dp" value="Diplomé"> <label for="dpl" >Diplomé</label> <input type="radio" name="statut" id="fy" value="au foyer"> <label for="fy " >au foyer</label> <!-- faut mettre le mm name pour les 3 radio pour qu'on puisse caucher une seul --> <br> <label for="nvsc">Niveau scolaire :</label> <select name="niveau" id="nvsc"> <option value="baccalauréat">baccalauréat</option> <option value="licence 1">licence 1</option> <option value="licence 2">licence 2</option> <option value="licence 3">licence 3</option> <option value="Master 1">Master 1</option> <option value="Master 2">Master 2</option> </select> <br> <label for="prcr">Décrivez votre parcours scolaire et le choix de vos formation:</label> <br> <textarea name="décrit" id="prcr" rows="10" cols="30"></textarea> <br> </fieldset> <fieldset> <legend>Choisissez Votre Formation:</legend> <label class="bleu"><strong>Formation:</strong></label> <br> <label>formation en informatique:</label> <input type="checkbox" name="java" id="java"> <label for="java">JAVA</label> <input type="checkbox" name="site" id="csw"> <label for="csw">Création de sites Web</label> <input type="checkbox" name="python" id="pt"> <label for="pt">Python</label> <br> <label>Formation en langues étrangers:</label> <input type="checkbox" name="fra" id="fr"> <label for="fr">Français</label> <input type="checkbox" name="ang" id="ang"> <label for="ang">Anglais</label> <input type="checkbox" name="Espagnol" id="esp"> <label for="esp">Espagnol</label> <br> <label>Formation en developpement personnel:</label> <input type="checkbox" name="coachin" id="cog"> <label for="cog">coaching </label> <input type="checkbox" name="leader" id="ldr"> <label for="ldr">leadership</label> <br> <label class="bleu"><strong>journées de disponibilité: </strong></label> <br> <input type="checkbox" name="samedi" id="smd"> <label for="smd">Samedi</label> <br> <input type="checkbox" name="dimanche" id="dmch"> <label for="dmch">Dimanche</label> <br> <input type="checkbox" name="lundi" id="lndi"> <label for="lndi">Lundi</label> <br> <input type="checkbox" name="mardi" id="mrd"> <label for="mrd">Mardi</label> <br> <input type="checkbox" name="mercredi" id="mrcd"> <label for="mrcd">Mercredi</label> <br> <input type="checkbox" name="jeudi" id="jd"> <label for="jd">Jeudi</label> <br> <input type="checkbox" name="vendredi" id="vdrd"> <label for="vdrd">Vendredi</label> </fieldset> <br> <div class="bouton"> <input type="submit" name="sb" value="S'inscrire" id="sb"> <input type="reset" name="rs" value="Retour" id="rs"> </div> <br> </form>
body{ background-color: #b991bc; } p{ text-align: center; } header{ background-color: #022a5e; } h1{ padding: 15px; color: white; text-align: center; text-shadow:2px 2px 4px black; animation-name: titre; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes titre{ from{ color: white; } 25%{ color: #7ab51c; } 50%{ color: #f6a800; } 75%{ color: #0099a1; } to{ color: #ef7e01; } } form{ width: 70%; margin-right:auto; margin-left:auto; background-color:#b99dc0; box-shadow: 1px 1px 4px #022a5e; border-radius: 20px; padding: 10px; } input,select,textarea{ margin: 5px; padding: 2px; border-radius: 5px; border-color:#b991bc; box-shadow: 1px 1px 4px #b991bc; } legend,label{ color: white; text-shadow: 1px 1px 2px #b991bc; } .bleu{ color: #022a5e; text-shadow: 1px 1px 4px white; } input[type=submit],input[type=reset]{ box-shadow: 1px 1px 4px #022a5e; width: 100px; font-size: 1.1em; font-weight: bold; color: #022a5e; }

Related: See More

Paper Bootstrap Wizard

Questions / Comments: