Formularios CSS puros

Posted on by Rudeus Greyrat

Los formularios son esenciales en los sitios web para recopilar datos o información para diversos fines. Usando Pure CSS podemos crear diferentes tipos de formularios.

Clases de formularios de CSS puro:

  • Formulario predeterminado
  • Formulario apilado
  • Formulario alineado
  • Entradas agrupadas

Formulario predeterminado: agregue la clase «pure-form» a cualquier elemento <form> para crear un formulario predeterminado. Este formulario será de naturaleza en línea.

Sintaxis:

<form class="pure-form">...</form>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
<head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
    href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
    integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
    crossorigin="anonymous"/>
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0" />
</head>
  
<body>
    <!--To create Default form add
    "pure-form" classname-->
    <form class="pure-form">
    <fieldset>
        <legend>Default Form</legend>
  
        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
        <br><br>
        <label for="remember">
        <input id="remember" type="checkbox" />
            Remember me
        </label>
  
        <button type="submit" 
                class="pure-button 
                       pure-button-primary">
        Log in
        </button>
    </fieldset>
    </form>
</body>
</html>

Producción:

Forma apilada: agregue la clase «pure-form-stacked» junto con el elemento pure-form dentro de <form>, para crear una forma apilada con elementos de entrada debajo de las etiquetas.

Sintaxis:

<form class="pure-form-stacked">...</form>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  <head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>
  
    <!-- Let browser know website is  
         optimized for mobile -->
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
  </head>
  
  <body>
    <!--To create Stacked form add
    "pure-form-stacked" classname-->
    <form class="pure-form pure-form-stacked">
      <fieldset>
        <legend>Stacked Form</legend>
  
        <label for="first-name"> First Name</label>
        <input id="first-name" type="text"
               placeholder="First Name" />
  
        <label for="last-name"> Last Name</label>
        <input id="last-name" type="text" 
               placeholder="Last Name" />
  
        <label for="email">Email</label>
        <input id="email" type="email"
               placeholder="Email" />
        <span class="pure-form-message">
             This is a required field.
        </span>
  
        <label for="password">Password</label>
        <input id="password" type="password" 
               placeholder="Password" />
  
        <label for="state">Gender</label>
        <select id="state">
          <option>Male</option>
          <option>Female</option>
          <option>Other</option>
        </select>
  
        <label for="remember" class="pure-checkbox">
          <input id="remember" type="checkbox" />
           I accept the Terms & Conditions
        </label>
  
        <button type="submit" 
                class="pure-button pure-button-primary">
          Submit
        </button>
      </fieldset>
    </form>
  </body>
</html>

Producción:

Forma alineada: agregue la clase «pure-form-aligned» junto con pure-form dentro del elemento <form>, para crear una forma alineada. En este tipo de formularios, las etiquetas se alinean a la derecha con respecto a los controles de entrada del formulario, pero en una pantalla pequeña vuelven a ser un formulario apilado.

Sintaxis:

<form class="pure-form-aligned">...</form>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  <head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
  </head>
  
  <body>
    <!--To create Aligned form add
    "pure-form-aligned" classname-->
    <form class="pure-form pure-form-aligned">
      <fieldset>
        <legend>Aligned Form</legend>
  
        <div class="pure-control-group">
          <label for="first-name"> 
           First Name
          </label>
          <input id="first-name" type="text" 
                 placeholder="First Name" />
        </div>
  
        <div class="pure-control-group">
          <label for="last-name"> 
           Last Name
          </label>
          <input id="last-name" type="text" 
                 placeholder="Last Name" />
        </div>
  
        <div class="pure-control-group">
          <label for="email">Email</label>
          <input id="email" type="email" 
                 placeholder="Email" />
          <span class="pure-form-message-inline">
            This is a required field.</span
          >
        </div>
  
        <div class="pure-control-group">
          <label for="password"> Password</label>
          <input id="password" type="password"
                 placeholder="Password" />
        </div>
  
        <div class="pure-control-group">
          <label for="state">Gender</label>
          <select id="state">
            <option>Male</option>
            <option>Female</option>
            <option>Other</option>
          </select>
        </div>
  
        <div class="pure-controls">
          <label for="remember" class="pure-checkbox">
            <input id="remember" type="checkbox" />
              I accept the Terms & Conditions
          </label>
  
          <button type="submit" 
                  class="pure-button pure-button-primary">
            Submit
          </button>
        </div>
      </fieldset>
    </form>
  </body>
</html>

Producción:

Formulario de entrada agrupado: si desea crear un formulario de registro para dispositivos móviles, este formulario es la mejor opción. Envuelva un conjunto de elementos de entrada basados ​​en texto en un elemento <fieldset> con un nombre de clase de «grupo puro» para crear dicho formulario. Requiere que la cuadrícula de respuesta pura esté presente en su página.

Sintaxis:

<fieldset class="pure-group">...</fieldset>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  <head>
    <!--Import Pure Css files-->
    <link rel="stylesheet"
      href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"/>
  
    <!--Import Pure Css Grid files-->
    <link
      rel="stylesheet"
      href=
"https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css"/>
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0" />
  </head>
  
  <body>
    <form class="pure-form">
      <!--To create groups use "pure-group"
        classname in <fieldset> element-->
      <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" 
               placeholder="First Name" />
        <input type="text" class="pure-input-1-2" 
               placeholder="Last Name" />
        <input type="text" class="pure-input-1-2" 
               placeholder="Email" />
        <input type="text" class="pure-input-1-2" 
               placeholder="Password" />
      </fieldset>
  
      <fieldset class="pure-group">
        <input
          type="text"
          class="pure-input-1-2"
          placeholder="Current Position"/>
        <textarea
          class="pure-input-1-2"
          placeholder="Description of Position">
        </textarea>
      </fieldset>
  
      <button
        type="submit"
        class="pure-button pure-input-1-2 
               pure-button-primary">
        Submit
      </button>
    </form>
  </body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por ankushingle8523 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *