Formulaire responsive design

Marsh Posté le 24-02-2016 à 19:33:04

Bonjour,

J'ai un formulaire de devis . Un tarif s'affiche après que l'internaute a rempli les différentes informations du formulaire.

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Devis pour correction – Liliana78</title>
<style>
body {
background-size: 5px 900px, 6px 6px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #000309;
text-align: center;
line-height: 24px;
}
#page {
width: 1200px;
margin: auto;
padding: 20px;
background: #d8d8d8; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #d8d8d8), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
background: -moz-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #d8d8d8 1%, #ffffff 100%); /* W3C */
}
.prix {
font-weight: bold;
font-size: 200%;
color: blue;
}
h1 {
font-size: 0em;
line-height: 1em;
margin: 0;
text-transform: uppercase;
}
fieldset {
border: none;
margin: 0 0 1ex;
padding: 0;
}
.explications {
border-left: solid thin #0042b0;
padding-left: 1ex;
}
.explications ul {
list-style: none;
font-size: 14px;
font-style: italic;
padding: 0;
}
.explications li {
margin: 1ex 0;
}
.explications h2 {
font-style: italic;
font-size: 2em;
font-weight: bold;
margin: 0 0 1em;
}
explications h3 {
font-style: italic;
font-size: 2em;
margin: 0 0 1em;
}
.etape {
font-weight: bold;
text-transform: uppercase;
}
.etape::after {
content: "\00A0: ";
}
</style>
</head>
<body>
<section id="page">
<h1>Calculez le coût de votre correction</h1>
<form id="testform">
<fieldset>
<p>
<label for="nbchar" class="etape">Nombre de mots</label>
<input id="nbchar" type="text" name="nbchar" value="0"/>
</p>
<div class="explications">
<h2>Où trouver le nombre de mots ? </h2>
<ul>
<li>Word 2007, 2010 et 2013 : En bas à gauche de la fenêtre du logiciel.
</li>
<li>Word 2003/OpenOffice : Cliquez sur <strong>Outils</strong>,
puis <strong>Statistiques.</strong> Repérez la ligne
<strong>"Mots".</strong>
</li>
</ul>
</div>
</fieldset>
<fieldset>
<p>
<strong class="etape">Formule</strong>
<input id="forumle1" type="radio" name="formule" value="1" checked="checked"/>
<label for="forumle1">Simple</label>
<input id="formule2" type="radio" name="formule" value="2"/>
<label for="formule2">Approfondie</label>
</p>
<p class="details">
Voir <a href="formules/correction-reformulation">Tableau comparatif des formules de correction</a>
</p>
<p>
<label class="etape" for="formjur">Statut</label>
<select id="formjur" name="formjur">
<option value="0">Étudiant</option>
<option value="1">Particulier</option>
<option value="2">Professionnel</option>
</select>
<input type="submit" value="Calculer"/>
</p>
</fieldset>
</form>
<div id="resultat"></div>
<div id="resultatSupplement"></div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
function formatNumber(num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 " )
}
function supplement(result) {
var more = (result * 10) / 100;
return Math.ceil(result - more);
}
$(function () {
$("input:submit" ).click(
function () {
var calcul = 0;
var coefReduction = 10 / 100;
var supp;
var nbMots = $("#nbchar" ).val().replace(/[^\d]+/g, "" );
if ($("input:checked" ).val() == 1) {
supp = false;
if ($("#formjur" ).val() == 1) {
calcul = nbMots * 0.020;
} else if ($("#formjur" ).val() == 2) {
calcul = nbMots * 0.0237;
} else {
calcul = nbMots * 0.0178;
}
} else {
supp = true;
if ($("#formjur" ).val() == 1) {
calcul = nbMots * 0.0346;
} else if ($("#formjur" ).val() == 2) {
calcul = nbMots * 0.0395;
} else {
calcul = nbMots * 0.0297;
}
}
var resultat = Math.ceil(calcul);
var resultatMajore = resultat + (calcul * coefReduction);
var resultatSupplement = supplement(resultat);
var resultatSupplementMajore = Math.round(resultatSupplement + (resultatSupplement * coefReduction));
$("#resultat" ).html("Tarif généralement appliqué : <span class=\"prix\">" + formatNumber(resultat) + " € </span>/ Si correction en rouge : <span class=\"prix\">" + formatNumber(Math.round(resultatMajore)) + " € </span>" );
$('#resultatSupplement').html((supp) ? "Tarif économique (délai > à 1 mois ) : <span class=\"prix\">" + formatNumber(resultatSupplement) + " € </span>" : "" );
return false;
}
);
});
// ]]></script>

Cependant, il n'est pas responsive design.

1°) Un tel formulaire peut-il s'adapter aux mobiles ?

2°) Si oui, pourriez-vous m'aider ? Je ne suis pas douée en informatique. En retour, je pourrai vous aider dans mon domaine.

Je vous remercie.

Marsh Posté le 24-02-2016 à 19:33:04

Marsh Posté le 25-02-2016 à 09:23:12

Pour du responsive, en général, on évite de travailler avec des unités absolues (ex : px, pt) mais plutôt relatives (em, %).

Je commencerais par changer :
body {
background-size: 5px 900px, 6px 6px;
}

et

#page {
width: 1200px;
}

Le width va devoir soit être un % de la largeur de l'écran. Sinon, regarde les media queries : http://www.w3schools.com/css/css_rwd_mediaqueries.asp

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *