Formulaire
Bienvenue sur cette partie où nous allons essayer d'apprendre comment réaliser un formulaire d'inscription avec Bootstrap.
Vous pouvez déjà voir la page à réaliser : Voir la page
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Notre site/Rudless</title>
<link href="css/font-face.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<link href="vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<link href="vendor/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="vendor/wow/animate.css" rel="stylesheet" media="all">
<link href="vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="vendor/slick/slick.css" rel="stylesheet" media="all">
<link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
<link href="vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<link href="css/theme.css" rel="stylesheet" media="all">
</head>
<body class="my_background" data-spy="scroll" data-target="#exemple-scrollspy" data-offset="0" style="position:relative">
<script src="vendor/jquery-3.2.1.min.js"></script>
<script src="vendor/bootstrap-4.1/popper.min.js"></script>
<script src="vendor/bootstrap-4.1/bootstrap.min.js"></script>
<script src="vendor/slick/slick.min.js">
</script>
<script src="vendor/wow/wow.min.js"></script>
<script src="vendor/animsition/animsition.min.js"></script>
<script src="vendor/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="vendor/counter-up/jquery.waypoints.min.js"></script>
<script src="vendor/counter-up/jquery.counterup.min.js">
</script>
<script src="vendor/circle-progress/circle-progress.min.js"></script>
<script src="vendor/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="vendor/chartjs/Chart.bundle.min.js"></script>
<script src="vendor/select2/select2.min.js">
</script>
</script>
<script src="js/main.js"></script>
</body>
</html>
Vous constatez que notre page est encore vraiment vide au niveau de <body> </body>.
Nous allons la remplir petit à petit.
Formulaire
<main id="main">
<section class="section row register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
<div class="container shadow col-10 col-lg-8 col-md-8 " data-aos="fade-up">
<h3 class="text-center text-primary">Formulaire d'inscription</h3>
<form action="">
<div class="row">
<div class="col-6">
<label for="nom">Nom</label>
<input type="text" name="" id="nom" class="form-control" required>
</div>
<div class="col-6">
<label for="postnom">Postnom</label>
<input type="text" name="" id="postnom" class="form-control" required>
</div>
<div class="col-12">
<label for="postnom">Prenom</label>
<input type="text" name="" id="prenom" class="form-control" required>
</div>
<div class="col-6">
<label for="phone">Téléphone</label>
<input type="tel" name="" maxlength="10" id="phone" class="form-control" required>
</div>
<div class="col-6 mb-3">
<label for="mail">Mail</label>
<input type="email" name="" id="mail" class="form-control" required>
</div>
<div class="col-6">
<label for="sexe">Sexe</label>
<select name="sexe" id="sexe" class="form-control" required>
<option value="Homme">Homme</option>
<option value="Femme">Femme</option>
</select>
</div>
<div class="col-6">
<label for="mail">Naissance</label>
<input type="date" name="" id="mail" class="form-control" required>
</div>
<div class="col-12 mb-3">
<label for="mdp">Mot de passe</label>
<input type="password" name="" id="mdp" class="form-control" required>
</div>
<div class="col-6">
<a href="" class="btn btn-danger">Annuler</a>
</div>
<div class="col-6">
<input type="submit" name="valider" class="btn btn-primary w-100 text-white mb-3" value="S'inscrire">
</div>
</div>
</form>
</div>
</section>
</main>
Obtenir le code complet : Télécharger