Ejemplo Formulario

ejemplo-formulario.markdown

Ejemplo Formulario

Ejemplo simple de un formulario con una hoja de estilo y validación de fecha con JavaScript. [No se comprueba si la fecha es correcta o no, sólo que el campo tenga una longitud y un formato]

A Pen by ERabasco on CodePen.

License.

index.html

<form action="calcula_jubilacion.php" method="post" class="form-edad" onsubmit="return validar()">
  <h2 class="edad-title">A QUÉ EDAD PUEDO JUBILARME</h2>
  <div class="contenedor-input">
    
    <div>
      <p class="p-input">Fecha Nacimiento*</p>
      <input type="text" placeholder="dd/mm/aa" class="input-responsive" name="fec_nac" id="fec_nac" size="9" maxlength="9">
    </div>

    <div>
      <p>Indique el total de días cotizados ó los años y meses</p>
    </div>

    <div>
      <p class="p-input">Total días cotizados</p>
      <input type="text" placeholder="sin puntos" class="input-responsive" name="dia_cot" id="dia_cot" size="9" maxlength="5">
    </div>
    <div>
      <p class="p-input">Años cotizados</p>
      <input type="text" placeholder="sin puntos" class="input-responsive" name="ano_cot" id="ano_cot" size="9" maxlength="2">
      <p class="p-input">Meses cotizados</p>
      <input type="text" placeholder="sin puntos" class="input-responsive" name="mes_cot" id="mes_cot" size="9" maxlength="2">
    </div>

    <input type="submit" class="btn-calcular" value="Calcular edad">

    <p class="input-parrafo">Ingrese los datos requeridos por favor</p>
  </div>

</form>

script.js

function validar() {
  var fec_nac, dia_cot, mes_cot, ano_cot, dia_nac, mes_nac, ano_nac, expresion;
  fec_nac = document.getElementById("fec_nac").value;
  dia_cot = document.getElementById("dia_cot").value;
  mes_cot = document.getElementById("mes_cot").value;
  ano_cot = document.getElementById("ano_cot").value;

  dia_nac = fec_nac.substring(0, 2);
  mes_nac = fec_nac.substring(3, 2);
  ano_nac = fec_nac.substring(6, 2);

  if (
    fec_nac.length != 8 ||
    fec_nac.charAt(2) != "/" ||
    fec_nac.charAt(5) != "/" ||
    (dia_nac > 12 && dia_nac < 1)
  ) {
    alert(
      "Falta el campo Fecha de Nacimiento o la fecha errónea, el formato es dd/mm/aa. Ejemplo: 01/01/74"
    );
    return false;
  }
}

style.css

{
    box-sizing: border-box;
    
}
body{
    margin: 0;
    font-family: sans-serif;
    background: #f3f3f3;
    
}

h1{
    text-align: center;
}

.form-edad{
    width: 95%;
    max-width: 500px;
    margin: auto;
    background-color: white;
    border-radius: 19px;
    border: 1px;
    
}
.edad-title{
    background: #14376d;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 100;
    border-top-left-radius: 19px;
    border-top-right-radius: 19px;
    border-bottom: 5px solid #205ab4;
}

.contenedor-input{
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
input{
    margin-bottom: 5px; 
    padding: 10px;
    font-size: 14px;
    border-radius: 3px;
    border: 1px solid darkgray;
}


.input-parrafo{
    width: 100%;
    text-align: center;
    font-size: 12px;
}

.p-input {
    font-size: 15px;
    display: inline-block;
    color: #205ab4;
}

.btn-calcular{
    background-color: #14376d;
    border-radius: 7px;
    color: white;
    margin: 15px auto 0px;
    font-size: 14px;#c5cfd4
    padding: 10px 40px;
    
}

@media(max-width:500px){
   .input-responsive{
        width: 100%;
       display: inline;
    }
    div{
        width: 100%;
    }
 }
}