Utilizamos cookies propias y de terceros para hacer funcionar y mejorar nuestros servicios. Si continúa navegando, consideramos que acepta su uso. Puede obtener más información visitando nuestra política de cookies.

Cerrar este mensaje

CSS - ESTILOS PARA FOMULARIOS

Demostración con estilos CSS para elementos comunes de formularios.

Cargando video...
¡Registrarse!

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

Ejemplo de estilos para:
Etiquetas de campos
Grupos de campos (fieldset), leyendas
Botones
Botones "radio" y "checkbox"
Identificar campos obligatorios
-- 19-css-formulario.html

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplos de estilos para formularios en HTML5</title>
  <meta charset="UTF-8">
  <style>
    body { font-size: 16px; font-family: sans-serif; }

    /* Definimos una clase para los fieldset principales,
       con efectos de borde y sombra */
    .fieldset-principal {
      padding-left: 2em;
      padding-right: 2em;
      margin-top: 10px;
      margin-bottom: 10px;
      border: 2px solid #395870;
      box-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
    }
    /*
    * Le damos algo de espacio y bordes a la leyenda del fieldset,
    * además de colocarla en negrilla y un fondo con gradiente
    */
    .fieldset-principal > legend {
      padding: 0.2em 0.5em;
      border:1px solid;
      background: #395870;
      background: linear-gradient(#49708f, #293f50);
      color: white;
    }
    legend { font-weight: bold; }

    /*
    * Hacemos que las etiquetas de los campos estén en negrilla, con algo
    * de espacio y en su propia línea
    */
    label[for] {
      margin-top: 0.5em;
      font-weight:bold;
      display: block;
    }

    /*
    * Las etiquetas de los checkbox y botones radio
    * no son etiquetas de campos, sino de las opciones, así que
    * las colocamos en formato normal
    */
    label input[type="checkbox"], label input[type="radio"] {
      display: inline;
      font-weight: normal;
    }

    /* Usamos un seudo-elemento para indicar los campos obligatorios */
    .obligatorio:after {
      content: ' (obligatorio)';
    }

    /* Damos formato a los botones con gradientes y efecto hover */
    button {
      padding: 0 5px 0 5px;
      height: 25px;
      line-height: 20px;
      border: 2px solid #395870;
      border-radius: 6px;
      background: #395870;
      background: linear-gradient(#49708f, #293f50);
      font-weight: bold;
      font-size: 16px;
      color: white;
    }
    button:hover {
      background: #314b60;
      box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
    }


  </style>
</head>
<body>
  <h1>Ejemplo de estilos para formulario con CSS</h1>

  <h2>Formulario de Registro</h2>
  <form id="form2" method="post" action="http://example.com/procesar"
        enctype="multipart/form-data">
    <fieldset class="fieldset-principal">
      <legend>Datos básicos</legend>

      <label for="usuario" class="obligatorio">Usuario</label>
      <input name="usuario" id="usuario" type="text" required>

      <label for="correo">Correo electrónico</label>
      <input name="correo" id="correo" type="text">

      <label for="clave" class="obligatorio">Contraseña</label>
      <input name="clave" id="clave" type="password" required> 
    </fieldset>

    <fieldset class="fieldset-principal">
      <legend>Datos personales</legend>

      <fieldset>
        <legend>Género</legend>
        <label>
          <input name="genero" type="radio" value="M">
          Masculino
        </label> 
        <label>
          <input name="genero" type="radio" value="F">
          Femenino
        </label> 
      </fieldset>

      <fieldset>
        <legend>Nivel de Educación</legend>
        <label>
          <input name="educacion" type="checkbox" value="1">
          Primaria
        </label>
        <label>
          <input name="educacion" type="checkbox" value="2">
          Secundaria
        </label>
        <label>
          <input name="educacion" type="checkbox" value="3">
          Técnica
        </label>
        <label>
          <input name="educacion" type="checkbox" value="4">
          Grado Universitario
        </label>
        <label>
          <input name="educacion" type="checkbox" value="5">
          Posgrado, Master, Doctorado
        </label>
      </fieldset>

      <label for="area">Área de Interés</label>
      <select name="area" id="area">
        <option>--Seleccione--</option>
        <optgroup label="Humanidades">
          <option value="1">Derecho</option>
          <option value="2">Filosofía</option>
        </optgroup>
        <optgroup label="Ciencias Básicas">
          <option value="1">Matemática</option>
          <option value="2">Física</option>
          <option value="3">Biología</option>
        </optgroup>
      </select>

      <label for="campus">Campus seleccionado(s)</label>
      <select name="campus" id="campus" multiple>
        <option value="1">Springfield</option>
        <option value="3">Piedradura</option>
        <option value="2">Villa Chica</option>
        <option value="4">Ciudad Gótica</option>
        <option value="5">Yellowstone</option>
        <option value="6">Río</option>
        <option value="6">Los Ángeles</option>
      </select>

      <label for="foto">Cargar Foto</label>
      <input type="file" id="foto" name="foto" accept="image/*">

    </fieldset>

    <button name="enviar" type="submit">Enviar Formulario</button>
    <button name="reiniciar" type="reset">Reinicializar Formulario</button>
  </form>

</body>
</html>

Rating

Global

Ver video en playlist

comments powered by Disqus
Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.