<!DOCTYPE html>
<html>
<head>
<style>
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Remplissez la formulaire pour participer à un grand projet</h2>
<form action="/action_page.php">
<fieldset>
<legend>Information personnelle</legend>
<label for="name"> Prénom: </label> <input id="name" type="text" name="firstname" placeholder="First name" required /> <label for="last">Nom:</label> <input id="last" type="text" name="lastname" placeholder="Last name" required />
<br />
<br />
<label for="age">Age:</label> <input id="age" type="number" min="10" max="100" step="1" name="number-of-colors" /> <label for="website">Website:</label> <input id="website" type="url" multiple /> <br />
<br />
<label for="address">Addresse Email:</label> <input id="address" type="email" name="email" placeholder="YourEmail@example.com" required /> <label for="tel">Tel.:</label>
<input id="tel" type="tel" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" /><br />
<br />
</fieldset>
<fieldset>
<legend>À vous connaitre</legend>
<label for="color">Couleur préféré:</label> <input id="color" type="color" name="color" value="#1c87c9" /><br />
<p>Niveau de motivation:</p>
<input type="range" min="0" max="10" value="4" /><br />
<p>Saison préféré:</p>
<input type="radio" name="season" value="winter" /> Hiver<br />
<input type="radio" name="season" value="autumn" /> Autumn<br />
<input type="radio" name="season" value="summer" /> Été<br />
<input type="radio" name="season" value="spring" /> Printemps
<p>Musique préféré:</p>
<input type="radio" name="music" value="jazz" /> Jazz<br />
<input type="radio" name="music" value="blues" /> Blues<br />
<input type="radio" name="music" value="pop" /> Pop<br />
<input type="radio" name="music" value="rock" /> Rock
</fieldset>
<fieldset>
<legend>Disponibilité</legend>
<label for="project">Quand vous serez prêt à commencer le projet?</label> <input id="project" type="date" name="date" value="2018-01-01" min="2018-01-01" max="2018-04-01" /><br />
<label for="hours">Heures préférés pour travailler:</label>
<input id="hours" type="time" name="time" value="09:00" />
<label for="time">To </label> <input id="time" type="time" name="time" value="18:00" /><br />
<label for="password"> Mot de passe:</label>
<input id="password" type="password" name="password" minlength="6" required placeholder="6 characters minimum" />
<br />
<br />
<input type="submit" value="Send" />
<input type="reset" value="Reset" />
</fieldset>
</form>
</body>
</html>