Tema: [Aporte] Formulario con JavaScript puro
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 07/05/2014, 17:25
aprendiz94
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: [Aporte] Formulario con JavaScript puro
Un poco de CSS

Código CSS: 
Ver original
  1. /* RESET CSS
  2. --------------------------------------------------*/
  3.  
  4. body, form, h1, h2, h3, h4,h5, h6, p {
  5.     margin: 0;
  6.     padding: 0;
  7. }
  8. ol, ul, li {
  9.     list-style: none;
  10.     margin: 0;
  11.     padding: 0;
  12. }
  13. a img {
  14.     border: none;
  15. }
  16. fieldset {
  17.     border: none;
  18.     margin: 0;
  19.     padding: 0;
  20. }
  21. input, select, textarea  {
  22.     outline: none;
  23. }
  24. address {
  25.     font-style: normal;
  26. }
  27. table {
  28.     border-collapse: collapse;
  29.     border-spacing: 0;
  30. }
  31.  
  32.  
  33. /* BODY
  34. --------------------------------------------------*/
  35.  
  36. body {
  37.     background: #efefef;
  38.     font-family: arial;
  39. }
  40.  
  41.  
  42. /* FORMULARIO
  43. --------------------------------------------------*/
  44.  
  45. #formulario {
  46.     background: #fcfcfc;
  47.     border: 1px solid #aaa;
  48.     border-radius: 5px;
  49.     box-shadow: 0 2px 2px 0 #ccc;
  50.     padding: 25px;
  51.     margin: 50px auto;
  52.     width: 340px;
  53. }
  54.  
  55.     fieldset#datos_principales_fieldset input,
  56.     fieldset#datos_principales_fieldset textarea {
  57.         border: 1px solid #aaa;
  58.         display: block;
  59.         font: 13px arial;
  60.         margin: 0 0 10px 0;
  61.         padding: 10px;
  62.         width: 318px;
  63.     }
  64.     fieldset#datos_principales_fieldset #pais_label {
  65.         color: #444;
  66.         display: block;
  67.         font-size: 14px;
  68.         margin: 0 0 5px 0;
  69.     }
  70.     select[name=lista] {
  71.         border: 1px solid #aaa;
  72.         display: block;
  73.         margin: 0 0 5px 0;
  74.         padding: 5px;
  75.         width: 160px;
  76.     }
  77.  
  78.  
  79.     fieldset#opciciones_fieldset {
  80.         margin: 20px 0 0 0;
  81.     }
  82.         #opc_on_off label {
  83.             color: #444;
  84.             display: inline-block;
  85.             font-size: 14px;
  86.             margin: 0 20px 0 0;
  87.         }
  88.         #opc_on_off input {
  89.             border: 1px solid #aaa;
  90.             display: inline-block;
  91.             margin-right: 5px;
  92.         }
  93.  
  94.         #opc_checkboxs {
  95.             background: #e2e2e2;
  96.             font-size: 12px;
  97.             padding: 10px;
  98.             margin: 10px 0 0 0;
  99.         }
  100.             #opc_checkboxs label {
  101.                 margin: 0 10px 0 5px;
  102.             }
  103.  
  104.  
  105.     fieldset#condiciones_fieldset {
  106.         font-size: 12px;
  107.         margin: 20px 0 0 0;
  108.     }
  109.         fieldset#condiciones_fieldset a {
  110.             color: #444;
  111.             text-decoration: none;
  112.         }
  113.             fieldset#condiciones_fieldset a:hover {
  114.                 border-bottom: 1px dotted #444;
  115.             }
  116.  
  117.  
  118.     .btn {
  119.         background: #ccc;
  120.         border: 1px solid #888;
  121.         cursor: pointer;
  122.         margin: 20px 0 0 0;
  123.         padding: 5px;
  124.         text-shadow: 0 1px 1px #ddd;
  125.     }
  126.  
  127.  
  128. /* MENSAJES
  129. --------------------------------------------------*/
  130.  
  131. .mensaje_style_1 {
  132.     background: #e7585b;
  133.     border: 1px solid #fff;
  134.     border-radius: 3px;
  135.     box-shadow: 0 2px 2px #ddd;
  136.     color: #fff;
  137.     font-size: 15px;
  138.     padding: 2px 4px;
  139.     margin-bottom: 5px;
  140. }

PD: El formulario no es compatible con todas las versiones de IE, pronto pienso trabajar en eso. Tampoco está terminado, quiero ampliarlo más pero como ya es funcional decidí compartirlo. Otra cosa, algunas partes de código no las hice yo, como la función para transformar una cadena en camelcase o el "insertAfter".

EDITO:
Antes de copiar el código había cambiado algo y no me di cuenta de un error.

En la línea 196 hay que cambiar esto:

Código Javascript: 
Ver original
  1. if (campo.valor.length >= limite)

por esto:

Código Javascript: 
Ver original
  1. if (campo.value.length >= limite)
Última edición por aprendiz94; 07/05/2014 a las 18:06