API tools faq
paste
Advertisement
Guest User

form.html

a guest
Mar 20th, 2017
255
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html class="no-js">
  3. <head>
  4.  
  5. <style>
  6. /*custom font*/
  7. @import url(http://fonts.googleapis.com/css?family=Montserrat);
  8.  
  9. /*basic reset*/
  10. * {margin: 0; padding: 0;}
  11.  
  12. html {
  13.     height: 100%;
  14.     /*Image only BG fallback*/
  15.    
  16.     /*background = gradient + image pattern combo*/
  17.     background:
  18.         linear-gradient(rgba(153, 0, 102, 0.7), rgba(102, 0, 153, 0.7));
  19. }
  20.  
  21. body {
  22.     font-family: montserrat, arial, verdana;
  23. }
  24. /*form styles*/
  25. #msform {
  26.     width: 400px;
  27.     margin: 50px auto;
  28.     text-align: center;
  29.     position: relative;
  30. }
  31. #msform fieldset {
  32.     background: white;
  33.     border: 0 none;
  34.     border-radius: 3px;
  35.     box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  36.     padding: 20px 30px;
  37.     box-sizing: border-box;
  38.     width: 80%;
  39.     margin: 0 10%;
  40.    
  41.     /*stacking fieldsets above each other*/
  42.     position: relative;
  43. }
  44. /*Hide all except first fieldset*/
  45. #msform fieldset:not(:first-of-type) {
  46.     display: none;
  47. }
  48. /*inputs*/
  49. #msform input, #msform textarea , #msform select{
  50.     padding: 15px;
  51.     border: 1px solid #ccc;
  52.     border-radius: 3px;
  53.     margin-bottom: 10px;
  54.     width: 100%;
  55.     box-sizing: border-box;
  56.     font-family: montserrat;
  57.     color: #2C3E50;
  58.     font-size: 13px;
  59. }
  60. /*buttons*/
  61. #msform .action-button {
  62.     width: 100px;
  63.     background: #2C3E50;
  64.     font-weight: bold;
  65.     color: white;
  66.     border: 0 none;
  67.     border-radius: 1px;
  68.     cursor: pointer;
  69.     padding: 10px 5px;
  70.     margin: 10px 5px;
  71. }
  72. #msform .action-button:hover, #msform .action-button:focus {
  73.     box-shadow: 0 0 0 2px white, 0 0 0 3px #56799c;
  74. }
  75.  
  76.  
  77. #msform p{
  78.     text-align: left;
  79.     font-size: 15px;
  80.     font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  81. }
  82.  
  83.  
  84. /*headings*/
  85. .fs-title {
  86.     font-size: 15px;
  87.     text-transform: uppercase;
  88.     color: #2C3E50;
  89.     margin-bottom: 10px;
  90. }
  91. .fs-subtitle {
  92.     font-weight: normal;
  93.     font-size: 13px;
  94.     color: #666;
  95.     margin-bottom: 20px;
  96. }
  97. /*progressbar*/
  98. #progressbar {
  99.     margin-bottom: 30px;
  100.     overflow: hidden;
  101.     /*CSS counters to number the steps*/
  102.     counter-reset: step;
  103. }
  104. #progressbar li {
  105.     list-style-type: none;
  106.     color: white;
  107.     text-transform: uppercase;
  108.     font-size: 9px;
  109.     width: 33.33%;
  110.     float: left;
  111.     position: relative;
  112. }
  113. #progressbar li:before {
  114.     content: counter(step);
  115.     counter-increment: step;
  116.     width: 20px;
  117.     line-height: 20px;
  118.     display: block;
  119.     font-size: 10px;
  120.     color: #333;
  121.     background: white;
  122.     border-radius: 3px;
  123.     margin: 0 auto 5px auto;
  124. }
  125. /*progressbar connectors*/
  126. #progressbar li:after {
  127.     content: '';
  128.     width: 100%;
  129.     height: 2px;
  130.     background: white;
  131.     position: absolute;
  132.     left: -50%;
  133.     top: 9px;
  134.     z-index: -1; /*put it behind the numbers*/
  135. }
  136. #progressbar li:first-child:after {
  137.     /*connector not needed before the first step*/
  138.     content: none;
  139. }
  140. /*marking active/completed steps green*/
  141. /*The number of the step and the connector before it = green*/
  142. #progressbar li.active:before,  #progressbar li.active:after{
  143.     background: #2C3E50;
  144.     color: white;
  145. }
  146.  
  147. .exceeded {
  148.     color: red;
  149. }
  150.  
  151. textarea {
  152.     width: 400px;
  153.     height: 200px;
  154. }
  155.  
  156. .coutdown  {
  157.     text-align: center;
  158.     font-size: 15;
  159. }
  160.  
  161.  
  162. /* Bottone upload */
  163.  
  164. *,
  165. *:after,
  166. *:before {
  167.     -webkit-box-sizing: border-box;
  168.     box-sizing: border-box;
  169. }
  170.  
  171. .clearfix:before,
  172. .clearfix:after {
  173.     display: table;
  174.     content: '';
  175. }
  176.  
  177. .clearfix:after {
  178.     clear: both;
  179. }
  180.  
  181. body {
  182.  
  183.     -webkit-font-smoothing: antialiased;
  184.     -moz-osx-font-smoothing: grayscale;
  185. }
  186.  
  187.  
  188.  
  189. .hidden {
  190.     position: absolute;
  191.     overflow: hidden;
  192.     width: 0;
  193.     height: 0;
  194.     pointer-events: none;
  195. }
  196.  
  197.  
  198.  
  199.  
  200. .js .inputfile {
  201.     width: 0.1px;
  202.     height: 0.1px;
  203.     opacity: 0;
  204.     overflow: hidden;
  205.     position: absolute;
  206.     z-index: -1;
  207. }
  208.  
  209. .inputfile + label {
  210.     max-width: 100%;
  211.     font-size: 18px;
  212.     /* 20px */
  213.     font-weight: 700;
  214.     text-overflow: ellipsis;
  215.     white-space: nowrap;
  216.     cursor: pointer;
  217.     display: inline-block;
  218.     overflow: hidden;
  219.     padding: 0.625rem 1.25rem;
  220.     /* 10px 20px */
  221. }
  222.  
  223. .no-js .inputfile + label {
  224.     display: none;
  225. }
  226.  
  227. .inputfile:focus + label,
  228. .inputfile.has-focus + label {
  229.     outline: 1px dotted #000;
  230.     outline: -webkit-focus-ring-color auto 5px;
  231. }
  232.  
  233. .inputfile + label * {
  234.     /* pointer-events: none; */
  235.     /* in case of FastClick lib use */
  236. }
  237.  
  238. .inputfile + label svg {
  239.     width: 1em;
  240.     height: 1em;
  241.     vertical-align: middle;
  242.     fill: currentColor;
  243.     margin-top: -0.25em;
  244.     /* 4px */
  245.     margin-right: 0.25em;
  246.     /* 4px */
  247. }
  248.  
  249.  
  250. /* style 2 */
  251.  
  252. .inputfile-2 + label {
  253.     color: #2C3E50;
  254.     border: 2px solid currentColor;
  255.     padding: 15px;
  256.     border: 1px solid #ccc;
  257.     border-radius: 3px;
  258.     margin-bottom: 10px;
  259.     width: 100%;
  260.     box-sizing: border-box;
  261.     font-family: montserrat;
  262.     font-size: 13px;
  263.    
  264. }
  265.  
  266. .inputfile-2:focus + label,
  267. .inputfile-2.has-focus + label,
  268. .inputfile-2 + label:hover {
  269.     color: #56799c;
  270. }
  271.  
  272.  
  273.  
  274.  
  275.  
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282. </style>
  283.   <meta charset="UTF-8">
  284.   <title>Workin - Application</title>
  285.  
  286.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  287.  
  288.  
  289.  
  290. <!-- Script per contare il numero dei caratteri 1 -->
  291. <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
  292.  
  293. </head>
  294.  
  295. <body>
  296.  
  297. <!-- Inizio FORM -->
  298. <form id="msform" enctype="multipart/form-data" method = "POST">
  299.  
  300. <!-- La progressbar in alto -->
  301.   <ul id="progressbar">
  302.     <li class="active">Dati Personali</li>
  303.     <li>Presentazione</li>
  304.     <li>Immagini</li>
  305.   </ul>
  306. <!-- Fieldset 1 -->
  307. <fieldset>
  308.     <h2 class="fs-title">Dati Personali</h2>
  309.     <h3 class="fs-subtitle">Inserisci i tuoi dati</h3>
  310.    
  311.     <p>Lavoro:</p></br>
  312.     <select>
  313.     <option>Seleziona un lavoro</option>
  314.     <option>Imbianchino</option>
  315.     <option>Idraulico</option>
  316.     <option>Elettricista</option>
  317.     <option>Ripetizioni</option>
  318.     <option>Dottore</option>
  319.     <option>Insegnante musica</option>
  320.     <option>Babysitter</option>
  321.     <option>Giardiniere</option>
  322.     </select>
  323.     <p>Indirizzo Email:</p></br>
  324.     <input type="email" name="email" placeholder="Email" />
  325.     <p>Nome:</p></br>
  326.     <input type="text" name="nome" placeholder="Nome" />
  327.     <p>Cognome:</p></br>
  328.     <input type="text" name="cognome " placeholder="Cognome" />
  329.     <p>Data di nascita:</p></br>
  330.     <input type="date" name="nascita"/>
  331.    
  332.     <input type="button" name="next" class="next action-button" value="Prossimo" />
  333. </fieldset>
  334.  
  335. <!-- Fieldset 2 -->
  336. <fieldset>
  337.     <h2 class="fs-title">Presentazione</h2>
  338.     <h3 class="fs-subtitle">Forniscici una tua presentazione</h3>
  339.    
  340.     <p>Video di presentazione:</p></br>
  341.     <p>
  342.         <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
  343.         <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Inserisci un video&hellip;</span></label>
  344.     </p>
  345.     <p>Biografia & Competenze:</p></br>
  346.     <div class = "countdown"><textarea name ="bio" id="bio" placeholder="Biografia & Competenze"></textarea></div>
  347.    
  348.    <input type="button" name="previous" class="previous action-button" value="Indietro" />
  349.    <input type="button" name="next" class="next action-button" value="Prossimo" />
  350.  </fieldset>
  351.  
  352.  
  353. <!-- Fieldset 3 -->
  354. <fieldset>
  355.    <h2 class="fs-title">Immagini</h2>
  356.    <h3 class="fs-subtitle">Le immagini dei documenti non verranno divulgate</h3>
  357.    
  358.    <p>Immagine del profilo:</p></br>
  359.     <p>
  360.         <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
  361.         <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>Immagine del profilo&hellip;</span></label>
  362.     </p>
  363.     <p>Fronte documento:</p></br>
  364.     <p>
  365.         <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
  366.         <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>ID front&hellip;</span></label>
  367.     </p>
  368.     <p>Retro documento:</p></br>
  369.     <p>
  370.         <input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" />
  371.         <label for="file-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg> <span>ID retro&hellip;</span></label>
  372.     </p>
  373.     <input type="button" name="previous" class="previous action-button" value="Indietro" />
  374.     <input type="submit" name="submit" class="submit action-button" value="Invia!" />
  375. </fieldset>
  376.  
  377. </form>
  378.  
  379.  
  380.  
  381.  
  382. <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  383. <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
  384. <script src="js/index.js"></script>
  385.  
  386.  
  387. <!-- Funzione per l'upload dei file personalizzato -->
  388. <script src="js/custom-file-input.js"></script>
  389.  
  390. <!-- Funzione per contare il numero dei caratteri 2 -->
  391. <script type="text/javascript" src="jquery.charactercounter.js"></script>
  392. <script>
  393.         $(function(){
  394.             $("#bio").characterCounter();
  395.         });
  396. </script>
  397.  
  398.  
  399.  
  400.  
  401.  
  402. </body>
  403. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!