Formulaire responsive design

Formulaire responsive design - HTML/CSS - Programmation

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 :
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Devis pour correction &ndash; Liliana78</title>
  6.     <style>
  7.         body {
  8.             background-size: 5px 900px, 6px 6px;
  9.             font-family: Verdana, Geneva, sans-serif;
  10.             font-size: 14px;
  11.             color: #000309;
  12.             text-align: center;
  13.             line-height: 24px;
  14.         }
  15.         #page {
  16.             width: 1200px;
  17.             margin: auto;
  18.             padding: 20px;
  19.             background: #d8d8d8; /* Old browsers */
  20.             background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #d8d8d8), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
  21.             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
  22.             background: -moz-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* FF3.6+ */
  23.             background: -webkit-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
  24.             background: -o-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Opera 11.10+ */
  25.             background: -ms-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* IE10+ */
  26.             background: linear-gradient(to bottom, #d8d8d8 1%, #ffffff 100%); /* W3C */
  27.         }
  28.         .prix {
  29.             font-weight: bold;
  30.             font-size: 200%;
  31.             color: blue;
  32.         }
  33.         h1 {
  34.             font-size: 0em;
  35.             line-height: 1em;
  36.             margin: 0;
  37.             text-transform: uppercase;
  38.         }
  39.         fieldset {
  40.             border: none;
  41.             margin: 0 0 1ex;
  42.             padding: 0;
  43.         }
  44.         .explications {
  45.             border-left: solid thin #0042b0;
  46.             padding-left: 1ex;
  47.         }
  48.         .explications ul {
  49.             list-style: none;
  50.             font-size: 14px;
  51.             font-style: italic;
  52.             padding: 0;
  53.         }
  54.         .explications li {
  55.             margin: 1ex 0;
  56.         }
  57.         .explications h2 {
  58.             font-style: italic;
  59.             font-size: 2em;
  60.             font-weight: bold;
  61.             margin: 0 0 1em;
  62.          
  63.         }
  64.         explications h3 {
  65.             font-style: italic;
  66.             font-size: 2em;
  67.             margin: 0 0 1em;
  68.         }
  69.         .etape {
  70.             font-weight: bold;
  71.             text-transform: uppercase;
  72.         }
  73.         .etape::after {
  74.             content: "\00A0: ";
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79. <section id="page">
  80.     <h1>Calculez le coût de votre correction</h1>
  81.     <form id="testform">
  82.         <fieldset>
  83.             <p>
  84.                 <label for="nbchar" class="etape">Nombre de mots</label>
  85.                 <input id="nbchar" type="text" name="nbchar" value="0"/>
  86.             </p>
  87.             <div class="explications">
  88.                 <h2>Où trouver le nombre de mots ? </h2>
  89.                 <ul>
  90.                     <li>Word 2007, 2010 et 2013 : En bas à gauche de la fenêtre du logiciel.
  91.                     </li>
  92.                     <li>Word 2003/OpenOffice : Cliquez sur <strong>Outils</strong>,
  93.                         puis <strong>Statistiques.</strong> Repérez la ligne
  94.                         <strong>"Mots".</strong>
  95.                     </li>
  96.                 </ul>
  97.             </div>
  98.         </fieldset>
  99.         <fieldset>
  100.             <p>
  101.                 <strong class="etape">Formule</strong>
  102.                 <input id="forumle1" type="radio" name="formule" value="1" checked="checked"/>
  103.                 <label for="forumle1">Simple</label>
  104.                 <input id="formule2" type="radio" name="formule" value="2"/>
  105.                 <label for="formule2">Approfondie</label>
  106.             </p>
  107.             <p class="details">
  108.                 Voir <a href="formules/correction-reformulation">Tableau comparatif des formules de correction</a>
  109.             </p>
  110.             <p>
  111.                 <label class="etape" for="formjur">Statut</label>
  112.                 <select id="formjur" name="formjur">
  113.                     <option value="0">Étudiant</option>
  114.                     <option value="1">Particulier</option>
  115.                     <option value="2">Professionnel</option>
  116.                 </select>
  117.                 <input type="submit" value="Calculer"/>
  118.             </p>
  119.         </fieldset>
  120.     </form>
  121.     <div id="resultat"></div>
  122.     <div id="resultatSupplement"></div>
  123. </section>
  124. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  125. <script type="text/javascript">// <![CDATA[
  126. function formatNumber(num) {
  127.     return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 " )
  128. }
  129. function supplement(result) {
  130.     var more = (result * 10) / 100;
  131.     return Math.ceil(result - more);
  132. }
  133. $(function () {
  134.     $("input:submit" ).click(
  135.             function () {
  136.                 var calcul = 0;
  137.                 var coefReduction = 10 / 100;
  138.                 var supp;
  139.                 var nbMots = $("#nbchar" ).val().replace(/[^\d]+/g, "" );
  140.                 if ($("input:checked" ).val() == 1) {
  141.                     supp = false;
  142.                     if ($("#formjur" ).val() == 1) {
  143.                         calcul = nbMots * 0.020;
  144.                     } else if ($("#formjur" ).val() == 2) {
  145.                         calcul = nbMots * 0.0237;
  146.                     } else {
  147.                         calcul = nbMots * 0.0178;
  148.                     }
  149.                 } else {
  150.                     supp = true;
  151.                     if ($("#formjur" ).val() == 1) {
  152.                         calcul = nbMots * 0.0346;
  153.                     } else if ($("#formjur" ).val() == 2) {
  154.                         calcul = nbMots * 0.0395;
  155.                     } else {
  156.                         calcul = nbMots * 0.0297;
  157.                     }
  158.                 }
  159.                 var resultat = Math.ceil(calcul);
  160.                 var resultatMajore = resultat + (calcul * coefReduction);
  161.                 var resultatSupplement = supplement(resultat);
  162.                 var resultatSupplementMajore = Math.round(resultatSupplement + (resultatSupplement * coefReduction));
  163.                 $("#resultat" ).html("Tarif généralement appliqué : <span class=\"prix\">" + formatNumber(resultat) + " &euro; </span>/ Si correction en rouge :  <span class=\"prix\">" + formatNumber(Math.round(resultatMajore)) + " &euro; </span>" );
  164. $('#resultatSupplement').html((supp) ? "Tarif économique (délai > à 1 mois ) : <span class=\"prix\">" + formatNumber(resultatSupplement) + " &euro; </span>" : "" );
  165.                 return false;
  166.              
  167.                
  168.                
  169.             }
  170.     );
  171. });
  172. // ]]></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.

Reply

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

Reply

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
Reply

Sujets relatifs:

Leave a Replay

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