Bootstrap En este artículo, discutiremos cómo crear un formulario de entradas agrupadas utilizando Pure CSS.
El formulario de entradas agrupadas es un tipo de formulario HTML que se utiliza para crear los elementos del formulario de entrada agrupados. En esto, los campos de entrada se agrupan y se envuelven en un elemento <fieldset> . Estos tipos de formularios son mejores cuando queremos crear los formularios de registro.
Clase de entradas agrupadas de formulario CSS puro:
- pure-form : esta clase se utiliza para crear un formulario HTML en Pure CSS.
- pure-group : Esto se usa para agrupar los campos de entrada. Podemos usar múltiples elementos <fieldset> para crear múltiples campos de entrada agrupados.
Sintaxis:
<form class="pure-form">
<fieldset class="pure-group">
Content
</fieldset>
<fieldset class="pure-group">
Content
</fieldset>
</form>
Ejemplo 1: este ejemplo ilustra las entradas agrupadas en CSS puro.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> </head> <body> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b class="is-size-4"> Pure CSS Grouped inputs form </b><br> <form class="pure-form pure-form-stacked"> <fieldset class="pure-group"> <input type="text" class="pure-input-1-2" placeholder="Enter first name" /> <input type="text" class="pure-input-1-2" placeholder="Enter middle name" /> <input type="text" class="pure-input-1-2" placeholder="Enter last name" /> </fieldset> <fieldset class="pure-group"> <input type="text" class="pure-input-1-2" placeholder="Enter Email" /> <input type="text" class="pure-input-1-2" placeholder="Enter Mobile no." /> </fieldset> <button type="submit" class="pure-button pure-input-1-2 pure-button-selected">Submit </button> </form> </body> </html>
Producción:
Entradas agrupadas de formulario CSS puro
Ejemplo 2: este ejemplo ilustra las múltiples entradas agrupadas en CSS puro.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> </head> <body> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b class="is-size-4"> Pure CSS Grouped inputs form </b><br /> <form class="pure-form pure-form-stacked"> <fieldset class="pure-group"> <input type="text" class="pure-input-1-2" placeholder="Enter first name" /> <input type="text" class="pure-input-1-2" placeholder="Enter middle name" /> <input type="text" class="pure-input-1-2" placeholder="Enter last name" /> </fieldset> <fieldset class="pure-group"> <input type="text" class="pure-input-1-2" placeholder="Enter Email" /> <input type="text" class="pure-input-1-2" placeholder="Enter Mobile no." /> </fieldset> <fieldset class="pure-group"> <input type="text" class="pure-input-1-2" placeholder="A title" /> <textarea class="pure-input-1-2" placeholder="Textareas work too"> </textarea> </fieldset> <fieldset class="pure-group"> <input type="text" class="pure-input-1-2" placeholder="City" /> <input type="text" class="pure-input-1-2" placeholder="State" /> <input type="text" class="pure-input-1-2" placeholder="Country" /> </fieldset> <button type="submit" class="pure-button pure-input-1-2 pure-button-selected"> Submit </button> </form> </body> </html>
Producción:
Referencia : https://purecss.io/forms/#grouped-inputs/
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