Salut,
Comme j'ai eu des soucis de chargement de la page de Fiddle, je me permets de mettre tes HTML et CSS initiaux ici. Ce sera plus simple.
Ton HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Formulaire</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="formulairestyle.css" /> <!-- TMP -->
</head>
<body>
<!------------------------- HEADER ------------------------->
<header>
<div id="navbackground">
<nav>
<a href="" class="active">Home</a>
<a href="">News</a>
<a href="">Contact</a>
<a href="">About</a>
<a href="" id="search">
<input type="image" alt="searchcloud" src="cloudsearch2.svg" id="searchcloud"/>
</a>
</nav>
</div>
</header>
<section>
<!------------------------- FORMULAIRE ------------------------->
<form action="" method="POST" id="formulaire">
<!-- action="<?php echo $_SERVER['REQUEST_URL'] ?>" -->
<!-- TITLE -->
<div id="formtitle"> Contact</div>
<!-- 1 NAME -->
<div id="formname">
<label for="name">Nom</label>
<input type="text" id="name" name="name" placeholder=" nom" /> <!--required-->
</div>
<!-- 2 AGE -->
<div id="formage">
<label for="age"> Age</label>
<select id="age" name="age">
<?php
for($i=1;$i<100;$i++){
echo "<option value=\"$i\">$i</option>";
}
?>
</select>
</div>
<!-- 3 SEXE -->
<div id="formsexe">
<label for="sexe">Sexe</label>
<optgroup id="sexe">
<option>
<input type="radio" id="sexeH" name="sexeH" value="H" />
<label for="sexeH" class="formsexelabel">H</label>
</option>
<option>
<input type="radio" id="sexeF" name="sexeF" value="F"/>
<label for="sexeF" class="formsexelabel">F</label>
</option>
</optgroup>
</div>
<!-- + EMAIL -->
<div id="formemail">
<input type="email" id="email" name="email" placeholder=" email" />
</div>
<!-- + TELEPHONE -->
<div id="formtel">
<input type="tel" id="phoneNumber" name="phoneNumber" placeholder = "telephone"/>
</div>
<!-- 4 LANGUE -->
<div id="formlangues">
<label for="languesTab[]">Langue</label>
<optgroup id="langues">
<option id="optfr">
<input type="checkbox" id="fr" name="languefr" value="Français" checked>
<label for="languefr">Fr</label>
</option>
<option>
<input type="checkbox" id="en" name="langueen" value="English">
<label for="langueen">En</label>
</option>
<option>
<input type="checkbox" id="jp" name="languejp" value="Japonais">
<label for="languejp">JP</label>
</option>
</optgroup>
</div>
<!-- 5 LOISIRS -->
<div id="formloisirs">
<label id="labelloisirs">Loisirs</label>
<select id="loisirs" name="loisirs" multiple>
<option value="programmation" id="programmationloisir">Programmation</option>
<option value= "musique">Musique</option>
<option value="cinema">Cinéma</option>
<option value="nuages">Nuages</option>
</select>
</div>
<!-- 6 COMMENTAIRE -->
<div id="formcommentaire">
<label for="commentaire"></label>
<textarea id="commentaire" name="commentaire" placeholder="commentaire"></textarea>
</div>
<!-- BOUTON -->
<div id="formenvoyer">
<input type="submit" name="submit" value="Envoyer"/>
</div>
</form>
<p id="alert">
<?php echo $alert;?>
</p>
</section>
<!------------------------- FOOTER ------------------------->
<footer>
<p>
Copyright 1789-2021 by the Sky. All Clouds Reserved. <img alt="little cloud" src="littlecloud.svg" id="littlecloud" height="20px" width="20px"/>
</p>
</footer>
</body>
<!--<script src="formulaire.js"></script>-->
</html>
---
Ton CSS :
/* TEMPORARY */
/*header, footer{*/
/* display: none;*/
/*}*/
/* ################### BODY ################### */
body{
/*border: 4px solid #8dcba5;*/
margin: 0px;
background-color: white;
color: rgba(70,147,188,1);
font-family: sans-serif;
/*background-image: url("clouds.svg");
background-repeat: repeat;*/
}
/* ################### HEADER ################### */
header{
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0; /* ??? */
}
#navbackground{
background-color: rgba(70,147,188,1);
border-bottom: 5px solid white;
border-top: 5px solid white;
}
nav{
/* border: 4px solid red; */
display: flex;
justify-content: center;
height: 75px;
background-color: rgba(70,147,188,1);
min-width: 600px;
max-width: 980px;
margin: 0 auto;
}
nav a{
font-size: 1.3em;
color: white;
width: 25%;
text-align: center;
text-transform: uppercase;
padding-top: 25px;
transition: 1s;
text-decoration: none;
}
nav a:hover, nav input[type=img]:hover{
padding-bottom: 15px;
background-color: #23719a;
transition: 1s;
}
/* bouton de recherche */
nav input{
display: inline;
border: white;
border-radius: 3px;
height: 1.5em;
width: 50px;
}
/*#searchcloud{
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
bottom: 2px;
left: 10px;
height: 30px;
width: 35px;
}*/
#imgbackground{
background-color: #8bcdf0;
}
#island{
/* svg -> mettre un display block d'abord */
display: block;
margin: 0 auto;
width: 70%;
}
/* ################### SECTION ################### */
section{
/*border: 4px solid pink;*/
font-size: 1.3em;
display: block;
padding-top: 20px;
padding-bottom: 10px;
min-width: 600px;
max-width: 980px;
margin: auto;
text-align: justify;
}
section p::first-letter{
font-size: 2em;
color: #337fa0;
}
#phpdate{
color: deeppink;
text-align: center;
}
/* ################### FORMULAIRE ################### */
form{
max-width: 750px;
min-width: 650px;
height: 650px;
margin: auto;
border-radius: 3px;
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: repeat(1, 6fr);
color: white;
text-transform: uppercase;
text-align: center;
}
form label{
letter-spacing: 0.5em;
}
form div{
padding: 30px;
border: 3px solid white;
}
/* titre */
#formtitle{
color: rgba(255,255,255,1);
text-transform: uppercase;
letter-spacing: 0.8em;
font-size: 2em;
text-align: center;
background-color: #cfe7f0;
grid-column: 1 / 5;
grid-row: 1 / 2;
border-bottom: 3px solid white;
}
/* nom */
#formname{
background-color: #e85524;
grid-column: 1 / 3;
grid-row: 2 / 3;
transition: 1s;
}
#formname:hover{
background-color: #b6370d;
transition: 1s;
}
#formname label{
display: none;
}
form input[type=text] {
display:block;
border-radius: 1px;
border: none;
/*border-color: #aadaf3;*/
width: 97%;
height: 60px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-color: transparent;
text-align: center;
color: white;
font-size: 2em;
outline: none;
box-shadow:none !important;
border:none;
}
input[type=text]::placeholder{
color: white;
font-size: 0.9em;
text-align: center;
letter-spacing: 0.5em;
text-transform: uppercase;
}
/* age */
#formage{
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #1888cd;
transition: 1s;
}
#formage:hover{
/*background-color: red;*/
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #3ea6e5;
transition: 1s;
}
#age{
display: block;
margin: auto;
margin-top: 15px;
}
select {
/* ne pas afficher le style par défaut du navigateur */
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: 100%;
background-position-y: 5px;
border: 1px solid #dfdfdf;
border-radius: 2px;
margin-right: 3rem;
padding: 1rem;
padding-right: 0.5rem;
color: white;
font-size: 1em;
}
/* sexe */
#formsexe
{
background-color: #186e40;
grid-column: 4 / 5;
grid-row: 2 / 3;
transition: 1s;
}
#formsexe:hover{
background-color: #278a55;
transition: 1s;
}
#formsexe optgroup{ /* H et F réunis*/
margin-top: 10px;
margin-left: -20px;
}
.formsexelabel{
color: #bddcef;
}
input[type=radio]{
/* ne pas afficher le style par défaut du navigateur */
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
width: 12px;
height: 12px;
border-radius: 12px;
background-color: white;
vertical-align: baseline; /* radio aligné avec lettre */
}
input[type="radio"]:checked {
background: #94c63d;
border: 3px solid white;
}
/* email & telephone */
form input[type=email], form input[type=tel]{
display:block;
border-radius: 1px;
border: none;
/*border-color: #aadaf3;*/
width: 97%;
height: 60px;
margin-left: auto;
margin-right: auto;
background-color: transparent;
text-align: center;
color: white;
font-size: 1em;
/* enlever la bordure */
outline: none;
box-shadow:none !important;
border:none;
}
input[type=email]::placeholder, input[type=tel]{
color: white;
font-size: 0.9em;
text-align: center;
letter-spacing: 0.4em;
text-transform: uppercase;
}
/* email */
#formemail{
grid-column: 1/3;
grid-row: 3/4;
background-color: #94c63d; /* ! */
transition: 1s;
}
#formemail:hover{
grid-column: 1/3;
grid-row: 3/4;
background-color: #75b705;
}
/* telephone */
#formtel{
grid-column: 3/5;
grid-row: 3/4;
background-color: #c61c56;
transition: 1s;
}
#formtel:hover{
grid-column: 3/5;
grid-row: 3/4;
background-color: #E5427A;
}
/* langues */
#formlangues
{
background-color: #174f70;
grid-column: 1 / 3;
grid-row: 4 / 5;
transition: 1s;
}
#formlangues:hover
{
background-color: #23648a;
transition: 1s;
}
#langues{ /* optgroup */
margin-top: 30px;
margin-bottom: 30px;
}
#langues option{
display: inline;
letter-spacing: 0em;
}
/* checkbox et leurs labels respectifs */
input[type=checkbox] + label {
display:inline-block;
color: #94c63d;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 0em;
}
input[type=checkbox]{
/* ne pas afficher le style par défaut du navigateur */
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
width: 20px;
height: 20px;
background-color: white;
vertical-align: middle;
}
input[type="checkbox"]:checked {
background: orange;
border: 3px solid white;
}
#optfr input[type=checkbox]{
}
#optfr input[type="checkbox"]:checked {
/*background-image: url("drapeaufr2.png");
&:before {
color: grey;
}*/
}
/* loisirs */
#formloisirs
{
background-color: #FFC300 ; /*!*/
grid-column: 1 / 3;
grid-row: 5 / 6;
height: 130px;
transition: 1s;
}
#formloisirs:hover
{
background-color: #ffae00;
transition: 1s;
}
#formloisirs select{
display: block;
margin: auto;
margin-top: 20px;
padding: 2px;
height: 80px;
border: 1px solid white;
font-size: 0.8em;
}
#programmationloisir{
}
/* commentaire */
#formcommentaire
{
background-color: #5ed5ff;
grid-column: 3 / 5;
grid-row: 4 / 6;
transition: 1s;
padding: 10px;
}
#formcommentaire:hover{
background-color: #3ba7cd;
transition: 1s;
}
section textarea{
display:inline-block;
color: white;
border-style: none;
border-radius: 4px;
width: 100%;
height: 100%;
background-color: transparent;
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 1.2em;
resize: none;
}
section textarea:focus{
/* supprime la bordure du texte area*/
outline: none;
box-shadow:none !important;
border:none;
}
textarea::placeholder{
color: white;
font-size: 0.6em;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5em;
font-size: 0.8em;
}
/* bouton */
#formenvoyer
{
background-color: #cfe7f0;
grid-column: 1 / 5;
grid-row: 6 / 7;
transition: 1s;
}
#formenvoyer:hover
{
background-color: #f6d0ee;
transition: 1s;
}
input[type=submit]{
background-color: transparent;
color: white;
margin: 0;
border: none;
border-radius: 3px;
transition: 1s;
text-transform: uppercase;
letter-spacing: 1em;
font-size: 1.1em;
width: 100%;
height: 100%;
}
#formenvoyer{
padding: 0;
height: 100px;
}
form input[value="Envoyer"]{
}
/*input[type=submit]:hover{
background-color: #fae1f4;
color: #750d5a;
transition: 1s;
}*/
/*#cloudCrossing{
vertical-align: middle;
width: 20%;
height: 20%;
border: 3px solid orange;
margin: 0 0 0 0;
padding: 0 0 0 0;
}*/
#alert{
text-align: center;
margin: auto;
color: red;
border: 3px solid orange;
}
/* ################### FOOTER ################### */
footer{
color: white;
text-align: center;
background-color: #8bcdf0;
height: 60px;
border-bottom: 5px solid white;
margin-top: -150px;
}
#littlecloud{
position: relative;
top: 4px;
}
/* ################### MEDIA QUERIES ################### */
/* pour les écrans de taille moyenne type tablette */
/* marges supprimées */
@media screen and (max-width: 980px) {
* {
color: green;
}
}
/* pour les écrans de petite taille type téléphone */
/* menu vertical */
/* formulaire vertical */
@media screen and (max-width: 779px){
*{
color: orange;
}
nav{
flex-direction: column;
}
form{
display: flex;
width: 100%;
flex-direction: column;
}
form div{
max-width: 779px;
}
}
