Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1186 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Formulaire responsive design

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Formulaire responsive design

n°2276195
liliana78
Posté le 24-02-2016 à 19:33:04  profilanswer
 

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

mood
Publicité
Posté le 24-02-2016 à 19:33:04  profilanswer
 

n°2276238
rufo
Pas me confondre avec Lycos!
Posté le 25-02-2016 à 09:23:12  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Formulaire responsive design

 

Sujets relatifs
Formulaire avec plusieurs submit / Safari[Resolu] Une script qui valide une formulaire Web
Design couche métier/serviceDe serieux problemes avec mon formulaire
Exemple de création de cookie via un formulaire dans jspFormulaire HTML CSS vers PHP MYSQL
Wordpress : 1 page -> 1 formulaire -> 1 donnée = 1 urlRemplissage formulaire avec cURL
besoin d'aide formulaire phpFormulaire mail et encodage UTF-8
Plus de sujets relatifs à : Formulaire responsive design

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.129 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR