<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Inscription</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col s12 m12 l12" style="text-align:center; color:white;">
<i class="large material-icons">add_circle</i>
<h1>Inscription</h1>
<p>Bienvenue sur la page d'inscription, veuillez remplir les informations ci-dessous</p>
</div>
</div>
<div class="row" id="blanc">
<div class="col l12 m12 s12" id="rectangle">
<form method="GET">
<!-- Champ prénom !-->
<div class="input-field col s6">
<label for="prenom">Prénom</label>
<input class="validate" name="prenom" type="text" value="" id="prenom" placeholder="François" required>
</div>
<!-- Champ nom !-->
<div class="input-field col s6">
<label for="nom">Nom de famille</label>
<input class="validate" type="text" value="" name="nom" id="nom" placeholder="Pignon" required text-capitalize>
</div>
<!-- Champ code postal !-->
<div class="input-field col s6">
<label for="code_postal">Code postal</label>
<input class="validate" type="number" value="" name="code_postal" id="code_postal" placeholder="69000" minlength="5" maxlength="5" required>
</div>
<!-- Champ ville !-->
<div class="input-field col s6">
<label for="ville">Ville</label>
<input class="validate" type="text" value="" name="ville" id="ville" minlength="3" placeholder="Lyon" required>
</div>
<!-- Champ date de naissance !-->
<div class="input-field col s12">
<label for="naissance">Date de naissance</label>
<input type="text" class="datepicker" name="naissance" placeholder="10/02/1980" class="validate" required>
</div>
<!-- Champ email !-->
<div class="input-field col s12">
<label for="email">Email</label>
<input class="validate" type="email" value="" name="email" id="p1" placeholder="
[email protected]" required>
<input class="validate" type='email' placeholder="
[email protected]" onfocus="validateMail(document.getElementById('p1'), this);" oninput="validateMail(document.getElementById('p1'), this);" required>
</div>
<!-- Champ CGV !-->
<div class="input-field col s12">
<p>
<label>
<input class="with-gap" name="group1" type="radio"/>
<span>J'accepte les conditions d'utilisations.</span>
</label>
</p>
</div>
<!-- Bouton envoyer !-->
<div class="input-field col s12">
<button class="btn waves-effect waves-light pulse" type="submit" name="action">Valider
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js.js">
</script>
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,700");
html{
min-height: 100%;
}
body{
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);background-position: center;
}
#nom{
text-transform: uppercase;
}
.btn{
background-color: #14b0f3;
}
.btn:hover{
background-color: #0093d2;
}
header{
padding: 7em 5em 4em 5em;
}
h1{
font-family: 'Source Sans Pro', Arial, sans-serif;
}
#rectangle{
border: solid 2px white;
background-color: white;
padding: 2em 2em 2em 2em;
-webkit-box-shadow: 3px 4px 4px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 4px 4px -2px rgba(0,0,0,0.75);
box-shadow: 3px 4px 4px -2px rgba(0,0,0,0.75);
}
#blanc{
max-width: 50%;
min-width: 50%;
}
// Ajout du calendrier en Jquery //
const date = document.querySelector('.datepicker');
M.Datepicker.init(date,{format:'d-mmm-yyyy'});
// Validation email de confirmation //
function validateMail(p1, p2) {
if (p1.value != p2.value || p1.value == '' || p2.value == '') {
p2.setCustomValidity('Email incorrect');
} else {
p2.setCustomValidity('');
}
}