En este artículo, discutiremos cómo crear un formulario apilado utilizando Pure CSS.
Un formulario apilado es un tipo de formulario HTML que se utiliza para crear el formulario apilado. En este tipo de formulario, las etiquetas están debajo de los campos de entrada.
Clase de formulario apilado CSS puro:
- pure-form : Se utiliza para crear el formulario HTML en Pure CSS.
- pure-form-stacked : Se utiliza para crear el formulario apilado en el que las etiquetas se muestran debajo de los campos de entrada.
Sintaxis:
<form class="pure-form pure-form-stacked"> .... </form>
Ejemplo 1: este ejemplo describe el formulario apilado 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 Stacked form </b> <br /> <form class="pure-form pure-form-stacked"> <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-control-group"> <label for="mob"> Enter your Mobile no.</label> <input type="number" id="mob" placeholder="Mobile no." /> </div> <div class="pure-controls"> <button type="submit" class="pure-button pure-button-primary"> Register </button> </div> </fieldset> </form> </body> </html>
Producción:
Forma apilada simple
Ejemplo 2: este ejemplo describe el formulario apilado 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 Stacked form </b> <br /> <form class="pure-form pure-form-stacked"> <fieldset> <label for="name">Name</label> <input id="name" type="text" placeholder="Name" /> <span class="pure-form-message"> This is a required field. </span> <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="year">Year of passing</label> <select id="year"> <option>2022</option> <option>2023</option> <option>2023</option> </select> <label for="remember" class="pure-checkbox"> <input id="remember" type="checkbox" /> I agree </label> <button type="submit" class="pure-button pure-button-selected"> Submit form </button> </fieldset> </form> </body> </html>
Salida :
Formulario apilado
Referencia: https://purecss.io/forms/#stacked-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