Bonjour,
J'ai finalement procédé à pas mal de modification de ton html et de ton css. Le point clé est de donner la même largeur à tous les inputs text courts, et environ 2 fois cette largeur pour l'input adresse et le textarea des messages, et de ne pas modifier ces largeurs même quand on a des écrans plus petits. Ça me semble plus joli, c'est plus simple, et on n'a pas besoin de bricoler avec les media queries. J'ai seulement gardé les media queries qui s'occupe de l'image en haut à droite : c'est cosmétique. Et pour tout dire, je pense que moins on utilise les media queries, mieux on se porte.
- il manquait le doctype (1re ligne du fichier)
- ajout de <meta name="viewport" content="width=device-width,initial-scale=1.0">
- déplacement de la 1re balise script dans <head>, elle était directement fille de la balise <html>, ce qui est incorrect
- l'id livraison sur 2 éléments (il ne peut y en avoir qu'un, j'ai supprimé celui qui me semble ne servir à rien)
- plusieurs autofocus (il ne peut y en avoir qu'un, je n'ai gardé que le premier)
- ajout d'une balise <h1> pour le titre du formulaire
- ajout de balises <label> autour des <input>
- utilisation des unités "em" autant que possible (les "px", c'est mal)
- multiples simplifications et changements de nom
Je ne me suis pas occupé du javascript.
En ce qui concerne les css, je n'ai pas touché au fichier css "polices.css". Je n'ai modifié que le fichier "formulaire.css".
J'ai testé, et ça me semble très acceptable même pour les résolutions de 320 pixels de large. Après, faut voir comment ça marche sur ton site. Il y a peut-être des contraintes supplémentaires qui nécessiteront des adaptations.
EDIT: j'ai aussi rajouté quelques petites modifications mineures, en particulier pour mieux afficher les inputs radio.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Formulaire de commande</title>
<link href="../css/formulaire.css" rel="stylesheet" type="text/css" />
<link href="../css/polices.css" rel="stylesheet" type="text/css" />
<script>
var prix=14.5;
var fdp=[];
fdp[0]=5.95;
fdp[1]=8;
fdp[2]=10;
function test_quantite(x)
{
if ((x<1)||(x==null))
{
document.commande.quantite.value=1;
}
else
{
var p=prix;
var pt1=p*x;
var pt2=Math.round(pt1*100)/100; // arrondi à 2 decimales
if (document.getElementById("livraison").checked)
{
val_fdp=fdp[x-1]; // pas de fdp si point relais
}
else val_fdp=0;
document.commande.prix_total.value=pt2 + val_fdp;
document.commande.fdp.value=val_fdp;
}
}
function valider()
{
resultat=window.confirm('Desirez vous continuer ?');
if (resultat==0) return false;
}
function relais(p)
{
if (p==1)
{
document.getElementById("relais").style.display='none';
}
else
{
document.getElementById("relais").style.display='block';
}
}
</script>
</head>
<body >
<!-- PARTIE FLO -->
<form name="commande" method="post" action="paiement/paypal1.php">
<h1>Formulaire de commande</h1>
<div class="fieldset">
<label>Nom
<input type="text" required autofocus name="nom" placeholder="" value="">
</label>
<label>Prénom
<input type="text" required name="prenom" placeholder="" value="">
</label>
</div>
<div class="fieldset">
<label>
<input type="radio" name="livraison" id="livraison" value="1" OnClick="relais(this.value);test_quantite(document.getElementById('quantite').value)">
Livraison à mon adresse (Payant)
</label>
<label>
<input type="radio" name="livraison" value="0" OnClick="relais(this.value);test_quantite(document.getElementById('quantite').value)">
Livraison dans notre point de retrait (Gratuit)
</label>
</div>
<div id="relais">Ecole de Voile Rochelaise - Avenue de la Capitainerie, 17000 La Rochelle</div>
<div class="fieldset">
<label class="long">Adresse
<input type="text" required name="adresse" placeholder="" value="">
</label>
<label>Code postal
<input type="text" required name="code_postal" placeholder="" value="">
</label>
<label>Ville
<input type="text" required name="ville" placeholder="" value="">
</label>
</div>
<div class="fieldset">
<label>Email
<input type="email" required name="email" id="inputemail" placeholder="mail@example.com" value="">
</label>
<label>Quantité
<input type="number" required min="1" max="3" name="quantite" id="quantite" placeholder="" OnChange="test_quantite(this.value)" value="1">
</label>
<label>Frais de port + emballage
<input type="text" readonly id="fdp" name="fdp" value="">
</label>
<label>Montant total
<input type="text" readonly id="prix_total" name="prix_total" value="">
</label>
</div>
<div class="fieldset">
<label>Quel mois sommes nous ? (Je ne suis pas pas un robot - Entrer le n° du mois courant)
<input type="text" required name="capcha" placeholder="" value="">
</label>
</div>
<div class="fieldset">
<label class="long">Message
<textarea rows=3 name="commentaire" id="commentaire" placeholder=""></textarea>
</label>
<div class="finalset">
<a href="javascript:document.commande.bt.click()">VALIDER</a>
<a href="javascript:window.close()">QUITTER</a>
</div>
</div>
<div id="Img1">
<img alt="unnamed" src="../css/unnamed.png">
</div>
<!--ce bouton est caché et il est actionné par l'image :
c'est pour faire fonctionner les options required des input qui ne s'affiche que sur submit
(mais pas par js)-->
<div class="hide">
<input type="submit" name="bt" value="ok">
</div>
</form>
<script>
test_quantite(1);
relais(1);
document.getElementById("livraison").click();
</script>
</body>
</html>
Pour le css :
/* ===========================
====== Contact Form =======
=========================== */
form[name="commande"] input[type="text"],
form[name="commande"] input[type="email"],
form[name="commande"] input[type="number"],
form[name="commande"] textarea {
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 1em;
box-sizing: border-box;
margin: 0.5em 0 0 0;
padding: 0.5em;
border: 1px solid #E5E5E5;
color: #000;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
form[name="commande"] input[type="text"],
form[name="commande"] input[type="email"],
form[name="commande"] input[type="number"] {
width: 12.5em;
}
form[name="commande"] input[name="adresse"] {
width: 27em;
max-width: calc(100vw - 2em);
}
form[name="commande"] textarea {
height: 6em;
width: 27em;
max-width: calc(100vw - 2em);
}
form[name="commande"] input[type="radio"] {
margin: 0 auto;
}
form[name="commande"] input:hover, textarea:hover,
form[name="commande"] input:focus, textarea:focus {
border: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
/* ===========================
====== Submit Button ======
=========================== */
input[type=submit] {
width: 6em;
height: 2.5em;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
}
/******************* Flo ************************/
body {
background-color: #fece17;
margin: 0;
padding: 0;
}
form[name="commande"] {
font-family: 'Open Sans', sans-serif;
}
form[name="commande"] h1 {
background-color: #f4f4f4;
color: #000;
margin: 0;
padding: 1em;
text-align: center;
font-family: "Khmer MN";
font-size: 2.5em;
}
form[name="commande"] div.fieldset {
display: flex;
flex-wrap: wrap;
align-items: center;
}
form[name="commande"] div.finalset {
padding: 1em;
}
form[name="commande"] label {
margin: 1em;
padding: 0;
}
form[name="commande"] label.long {
}
form[name="commande"] a {
font-size: 1.5em;
display: inline-block;
color: #fff;
background-color: #000;
padding: 0.5em 1em;
text-decoration: none;
margin: 1em;
font-weight: bold;
}
#relais
{
text-align: center;
background-color: #ececec;
padding: 1em;
margin: 1em 10%;
}
#Img1 img {
height: 12em;
position: absolute;
top: 2em;
right: 0;
}
#prix_total {
font-weight: bold;
}
/****************** Responsive **************************/
@media screen and (max-width: 1000px) {
#Img1 img {
top: 4em;
}
}
@media screen and (max-width: 720px) {
#Img1 img {
display:none;
}
}
/******************* Fin responsive *******************/
Amicalement,
Modifié par parsimonhi (29 Jul 2020 - 09:52)
