Ejercicio Forms HTML5 / ComunidadIT

In this example below you will see how to do a Ejercicio Forms HTML5 / ComunidadIT with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by fmorisan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright fmorisan ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ejercicio Forms HTML5 / ComunidadIT</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div>
  <form action="inscripcion.php" method="POST">
    <fieldset>
      <legend>
        Datos Personales
      </legend>
      <label for="name">Nombre
        <input type="text" name="name" required/>
      </label>
      <label for="surname">Apellido
        <input type="text" name="surname" required/>
      </label>
      <label for="dni">DNI
        <input type="number" required />
      </label>
      <label for="gender">Seleccione su genero
        <select name="gender" id="" required>
          <option value="male">Masculino</option>
          <option value="female">Femenino</option>
          <option value="other">Otro</option>
        </select>
      </label>
    </fieldset>
    <fieldset>
      <legend>
        Estudios
      </legend>
      <label for="estudia">Estudias?
        <input type="radio" name="estudia" value="si" required checked />Si
        <input type="radio" name="estudia" value="no" required />No 
      </label>
      <label for="uni">Universidad
        <input type="text" name="uni"/>
      </label>
      <label for="carrera">Carrera
        <input type="text" name="uni"/>
      </label>
      <label for="inicio">Fecha de inicio
        <input type="date" name="inicio"/>
      </label>
      <label for="fin">Fecha de fin
        <input type="date" name="fin"/>
      </label>
    </fieldset>
    <fieldset>
      <legend>
        Trabajo
      </legend>
      <label for="trabaja">Trabajas?
        <div class="radio">
          <input type="radio" name="trabaja" value="si" required checked/>Si
        </div>
        <div class="radio">
          <input type="radio" name="trabaja" value="no" required/>No
        </div>
      </label>
      <label for="nombreEmpresa">Nombre de la empresa
        <input type="text" name="nombreEmpresa"/>
      </label>
      <label for="inicioTrabajo">Fecha de Inicio
        <input type="date" name="inicioTrabajo"/>
      </label>
      <label for="puesto">Nombre del puesto
        <input type="text" name="puesto"/>
      </label>
    </fieldset>
    <button type="submit">Enviar</button>
  </form>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/fmorisan/ejercicio-forms-html5-comunidadit-JRRrzR */
body {
  font-family: Monospace;
}
label {
  display: block;
  margin-bottom: 3px;
  padding: 4px;
}
input,select,div.radio{
  float: right;
}
fieldset {
  margin: 30px;
  border: 5px solid blue;
}
legend {
  text-decoration: underline;
  font-weight: bold;
}

Comments