Formulario alineado CSS puro

Pure CSS es un marco de CSS. Es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web adaptables. Pure CSS es desarrollado por Yahoo y se usa para crear sitios web más rápidos, hermosos y receptivos. Se puede utilizar como alternativa a Bootstrap .

Pure CSS Aligned Form es un tipo de formulario HTML que se utiliza para crear un formulario alineado. En este tipo de formulario, las etiquetas se alinean después de los campos de entrada, pero en la ventana gráfica móvil, las etiquetas se apilan.

En este artículo, discutiremos el formulario alineado con CSS puro.

Clase de formulario alineado con CSS puro:

pure-form-aligned: esta clase se utiliza como clase modificadora para crear un formulario alineado. En la vista de escritorio, las etiquetas se ven después de los campos de entrada, pero en la vista móvil o pequeña, las etiquetas se ven apiladas.

Sintaxis:

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

Ejemplo: Los siguientes códigos demuestran el formulario alineado CSS puro.

HTML

<!DOCTYPE html>  
<html> 
  
<head>
  <title> Pure CSS Aligned Form </title>
  <link rel="stylesheet" href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"   
        integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"   
        crossorigin="anonymous"> 
</head>
  
<body>    
   <h1 style="color:green;"> GeeksforGeeks </h1> 
   <h3> Pure CSS Aligned Form </h3>
  
   <form class="pure-form pure-form-aligned">
        <fieldset>
          <div class="pure-control-group">
            <label for="first-name"> Enter your First Name </label>
            <input type="text" id="first-name" placeholder="First name" />
            <span class="pure-form-message-inline">
              *This is a Required field.
            </span>
          </div>
  
          <div class="pure-control-group">
            <label for="last-name"> Enter your Last Name </label>
            <input type="text" id="last-name" placeholder="Last name" />
            <span class="pure-form-message-inline">
              *This is a Required field.
            </span>
          </div>
  
          <div class="pure-control-group">
            <label for="email"> Enter your email id </label>
            <input type="email" id="email" placeholder="Email id" />
          </div>
  
          <div class="pure-controls">
            <button type="submit" class="pure-button pure-button-primary">
              Register
            </button>
          </div>
        </fieldset>
   </form>
</body>
</html>

Producción:

Formulario alineado CSS puro

Referencia: https://purecss.io/forms/#aligned-form

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta