Soucis text area + bouton submit
Chooper01 Le 28 août 2016 à 14:13 (Édité le 25 janvier 2019 à 17:52)
Voila j'ai un soucis avec mon Formulaire de Contact lorsque je clic sur le bouton Submit rien ce passe sa ne refresh pas la page je crois que c'est un soucis avec ma structure de html .. Mais je vois pas comment le résoudre, je vous mets mon code html et css merci !
HTML :
<div id="contact">
<fieldset>
<legend>Contacez-nous</legend>
<form id="bouton" method="POST" action="">
<input type="text" name="pseudo" placeholder="Votre Pseudo" /><br/>
<input type="email" name="email" placeholder="Votre E-mail" size="30" /> <br />
<select>
<option> Problème du au site </option>
<option> Report d'une personne </option>
<option> Autre </option>
</select>
</form>
<div id="texta">
<textarea cols="100" rows="10" name="message" placeholder="Entrez votre message".></textarea>
</div>
<input type="submit" name="mailform" value="Envoyer !" />
</fieldset>
</div>
#contact {
text-align: center;
padding-top: 20px ;
}
#contact fieldset {
background-color: rgba(92, 209, 182, 0.09);
padding:0 20px 20px 20px;
margin-bottom:10px;
border:1px outset rgba(127, 204, 156, 0.93);
border-radius: 10px;
}
#contact fieldset legend {
font-family: 'Cuisine';
font-style: italic;
}
#bouton {
align-content: center;
display: inline-flex;
padding-top: 50px ;
padding-left: 30px ;
}
#bouton input {
text-align: center;
margin-right: 10px ;
}
#bouton input, select {
display: block;
padding:3px;
border:1px solid rgba(127, 204, 156, 0.93);
border-radius:5px;
width:200px;
box-shadow:1px 1px 2px #C0C0C0 inset;
}
#texta {
text-align: center;
padding-top: 50px ;
width: 70% ;
height: 35% ;
margin: auto;
}
#texta textarea {
resize: none ;
width: 50% ;
margin: auto ;
margin-top: 2px ;
border:2px solid rgba(127, 204, 156, 0.93);
border-radius:5px;
box-shadow:1px 1px 2px #C0C0C0 inset;
}
#contact input[type=submit] {
margin-top: 12px ;
border:1px solid rgba(127, 204, 156, 0.93);
border-radius:5px;
width:100px;
height: 25px ;
box-shadow:1px 1px 2px #C0C0C0 inset;
}
TheOldNoob Le 28 août 2016 à 14:20
Bon déjà, il y a un gros problème avec ton indentation dans ton code html. C'est moche et illisible.
Ensuite, si tu veux que ça fonctionne, il faut pensé a mettre ton textarea et ton bouton DANS ton formulaire. Sinon bah... ça marche pas 😀
Chooper01 Le 28 août 2016 à 14:24
Bah oui c'était mes début dans le html css ^^ Bah je vois vraiment pas comment faire .. Pour que les inputs soient l'un à coté de l'autre avec un petit espacement que le textarea soit en dessous des inputs et le submit en dessous du textarea ...
Merci !
TheOldNoob Le 28 août 2016 à 14:28
Du coup, ton textarea et ton bouton submit ne sont pas dans ton formulaire...
C'est pas question d'epassement, c'est question de fermé ton formulaire au bon endroit
Chooper01 Le 28 août 2016 à 14:34
Merci de tes réponses ^^
TheOldNoob Le 28 août 2016 à 14:36 (Édité le 28 août 2016 à 14:37)
P.S. un indice c'est glicé dans la phrase si dessus 😉
Chooper01 Le 28 août 2016 à 18:25 (Édité le 28 août 2016 à 18:26)
HTML :
<div id="contact">
<fieldset>
<legend>Contacez-nous</legend>
<form id="bouton" method="POST" action="">
<input type="text" name="pseudo" placeholder="Votre Pseudo" /><br/>
<input type="email" name="email" placeholder="Votre E-mail" size="30" /> <br />
<select>
<option> Problème du au site </option>
<option> Report d'une personne </option>
<option> Autre </option>
</select> <br /> <br />
<textarea id="texta" cols="100" rows="10" name="message" placeholder="Entrez votre message".></textarea> <br />
<input type="submit" name="mailform" value="Envoyer !" />
</form>
</fieldset>
</div>
#contact {
text-align: center;
padding-top: 20px ;
}
#contact fieldset {
background-color: rgba(92, 209, 182, 0.09);
padding:0 20px 20px 20px;
margin-bottom:10px;
border:1px outset rgba(127, 204, 156, 0.93);
border-radius: 10px;
}
#contact fieldset legend {
font-family: 'Cuisine';
font-style: italic;
}
#bouton:nth-child(n+3) {
align-content: center;
display: inline-flex;
padding-top: 50px ;
padding-left: 30px ;
}
#bouton input {
text-align: center;
margin-right: 10px ;
}
#bouton input, select {
padding:3px;
border:1px solid rgba(127, 204, 156, 0.93);
border-radius:5px;
width:200px;
box-shadow:1px 1px 2px #C0C0C0 inset;
}
#texta {
resize: none ;
width: 50% ;
margin: auto ;
margin-top: 2px ;
border:2px solid rgba(127, 204, 156, 0.93);
border-radius:5px;
box-shadow:1px 1px 2px #C0C0C0 inset;
}
#contact input[type=submit] {
margin-top: 12px ;
border:1px solid rgba(127, 204, 156, 0.93);
border-radius:5px;
width:100px;
height: 25px ;
box-shadow:1px 1px 2px #C0C0C0 inset;
}
TheOldNoob Le 28 août 2016 à 18:36
Il faut vraiment que tu découvre a quoi sere les <br> !
TheOldNoob Le 28 août 2016 à 18:54
<br> c'est un retour chariot, ou retour a la ligne pour ceux qui n'ont pas connu les machine a écrire ^^
Chooper01 Le 28 août 2016 à 19:08
