Formularios
Los patrones de formularios se usan para solicitar a la persona usuaria diversos datos.
Datos de identidad: Nombre y nif #
Solemos agrupar los elementos de los formularios en fieldsets que agrupen tipos de datos similares. En este caso nombre y nif.
Mostrar código del ejemplo: includes/_pattern.formularios-nombre-nif.njk
Contenido
Nunjucks macro del ejemplo: includes/_pattern.formularios-nombre-nif.njk
{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}
<fieldset>
<legend class="sr-only">Datos de identidad</legend>
{{ componentInput({
"label": {
"text": "Nombre"
},
"id": "input-nombre",
"name": "nombre",
"classes": "w-full lg:w-2/5",
"value": "Ana Pérez"
}) }}
{{ componentInput({
"label": {
"text": "NIF o NIE"
},
"id": "input-nif",
"name": "nif",
"attributes": {
"size": "19"
},
"value": "234556789N"
}) }}
</fieldset>HTML del ejemplo: includes/_pattern.formularios-nombre-nif.njk
<fieldset>
<legend class="sr-only">Datos de identidad</legend>
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="input-nombre">Nombre</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full lg:w-2/5" id="input-nombre" name="nombre" type="text" value="Ana Pérez">
</div>
<!-- /input -->
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="input-nif">NIF o NIE</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-nif" name="nif" type="text" value="234556789N" size="19">
</div>
<!-- /input -->
</fieldset>Datos de contacto: correo electrónico y teléfono #
Solemos agrupar los elementos de los formularios en fieldsets que agrupen tipos de datos similares. En este caso correo electrónico y teléfono.
Mostrar código del ejemplo: includes/_pattern.formularios-correo-telefono.njk
Contenido
Nunjucks macro del ejemplo: includes/_pattern.formularios-correo-telefono.njk
{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}
<fieldset>
<legend class="sr-only">Datos de contacto</legend>
{{ componentInput({
"label": {
"text": "Correo electrónico (Obligatorio)"
},
"id": "input-email",
"name": "email",
"classes": "w-full lg:w-2/5",
"value": "anaperez@gmail.com"
}) }}
{{ componentInput({
"label": {
"text": "Teléfono móvil (Obligatorio)"
},
"id": "input-movil",
"name": "movil",
"attributes": {
"size": "19"
},
"value": "652 000 000"
}) }}
</fieldset>HTML del ejemplo: includes/_pattern.formularios-correo-telefono.njk
<fieldset>
<legend class="sr-only">Datos de contacto</legend>
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="input-email">Correo electrónico (Obligatorio)</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full lg:w-2/5" id="input-email" name="email" type="text" value="anaperez@gmail.com">
</div>
<!-- /input -->
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="input-movil">Teléfono móvil (Obligatorio)</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="input-movil" name="movil" type="text" value="652 000 000" size="19">
</div>
<!-- /input -->
</fieldset>Dirección postal completa #
Si este patrón tiene excesivos elementos, puedes borrar los que no interesen y quedarte con una versión simplificada de él.
Mostrar código del ejemplo: includes/_pattern.formularios-direccion-postal.njk
Contenido
Nunjucks macro del ejemplo: includes/_pattern.formularios-direccion-postal.njk
{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}
<fieldset>
<legend class="sr-only">Domicilio postal</legend>
<div class="grid lg:grid-cols-4 gap-x-4">
{{ componentSelect({
"id": "select-tipo-via",
"name": "tipo-via",
"classes": "lg:w-full",
"label": {
"text": "Tipo de vía"
},
"items": [
{
"value": 1,
"text": "Calle",
"selected": true
},
{
"value": 2,
"text": "Paseo"
},
{
"value": 3,
"text": "Plaza"
},
{
"value": 4,
"text": "Avenida"
}
]
}) }}
{{ componentInput({
"formGroup": {
"classes": "lg:col-span-3"
},
"label": {
"text": "Vía"
},
"id": "input-nombre-via",
"name": "nombre-via",
"classes": "w-full"
}) }}
</div>
<div class="grid lg:grid-cols-4 gap-x-4">
<div class="lg:col-span-2 grid grid-cols-4 gap-x-4">
{{ componentInput({
"label": {
"text": "Número"
},
"id": "input-numero",
"name": "numero",
"classes": "w-full"
}) }}
{{ componentInput({
"label": {
"text": "Escalera"
},
"id": "input-escalera",
"name": "escalera",
"classes": "w-full"
}) }}
{{ componentInput({
"label": {
"text": "Piso"
},
"id": "input-piso",
"name": "piso",
"classes": "w-full"
}) }}
{{ componentInput({
"label": {
"text": "Puerta"
},
"id": "input-puerta",
"name": "puerta",
"classes": "w-full"
}) }}
</div>
{{ componentInput({
"formGroup": {
"classes": "lg:col-span-2"
},
"label": {
"text": "Indicaciones adicionales"
},
"id": "input-indicaciones",
"name": "indicaciones",
"classes": "w-full"
}) }}
</div>
<div class="grid lg:grid-cols-5 gap-x-4">
{{ componentInput({
"label": {
"text": "Código Postal"
},
"id": "input-cpostal",
"name": "cpostal",
"classes": "w-44 lg:w-full"
}) }}
{{ componentSelect({
"formGroup": {
"classes": "lg:col-span-2"
},
"id": "select-provincia",
"name": "provincia",
"classes": "w-full",
"label": {
"text": "Provincia"
},
"items": [
{
"value": 0,
"text": "Selecciona una opción",
"selected": true,
"disabled": true,
"hidden": true
},
{
"value": 1,
"text": "Option 1"
},
{
"value": 2,
"text": "Option 2"
},
{
"value": 3,
"text": "Option 3"
}
]
}) }}
{{ componentSelect({
"formGroup": {
"classes": "lg:col-span-2"
},
"id": "select-municipio",
"name": "municipio",
"classes": "w-full",
"label": {
"text": "Municipio"
},
"items": [
{
"value": 0,
"text": "Selecciona una opción",
"selected": true,
"disabled": true,
"hidden": true
},
{
"value": 1,
"text": "Option 1"
},
{
"value": 2,
"text": "Option 2"
},
{
"value": 3,
"text": "Option 3"
}
],
"disabled": true
}) }}
</div>
</fieldset>HTML del ejemplo: includes/_pattern.formularios-direccion-postal.njk
<fieldset>
<legend class="sr-only">Domicilio postal</legend>
<div class="grid lg:grid-cols-4 gap-x-4">
<!-- select -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="select-tipo-via">Tipo de vía</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base lg:w-full" id="select-tipo-via" name="tipo-via">
<option value="1" selected>Calle</option>
<option value="2">Paseo</option>
<option value="3">Plaza</option>
<option value="4">Avenida</option>
</select>
</div>
<!-- /select -->
<!-- input -->
<div class="c-form-group lg:col-span-3">
<!-- label -->
<label class="block" for="input-nombre-via">Vía</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="input-nombre-via" name="nombre-via" type="text">
</div>
<!-- /input -->
</div>
<div class="grid lg:grid-cols-4 gap-x-4">
<div class="lg:col-span-2 grid grid-cols-4 gap-x-4">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="input-numero">Número</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="input-numero" name="numero" type="text">
</div>
<!-- /input -->
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="input-escalera">Escalera</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="input-escalera" name="escalera" type="text">
</div>
<!-- /input -->
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="input-piso">Piso</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="input-piso" name="piso" type="text">
</div>
<!-- /input -->
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="input-puerta">Puerta</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="input-puerta" name="puerta" type="text">
</div>
<!-- /input -->
</div>
<!-- input -->
<div class="c-form-group lg:col-span-2">
<!-- label -->
<label class="block" for="input-indicaciones">Indicaciones adicionales</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="input-indicaciones" name="indicaciones" type="text">
</div>
<!-- /input -->
</div>
<div class="grid lg:grid-cols-5 gap-x-4">
<!-- input -->
<div class="c-form-group">
<!-- label -->
<label class="block" for="input-cpostal">Código Postal</label>
<!-- /label -->
<input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-44 lg:w-full" id="input-cpostal" name="cpostal" type="text">
</div>
<!-- /input -->
<!-- select -->
<div class="c-form-group lg:col-span-2">
<!-- label -->
<label class="block" for="select-provincia">Provincia</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="select-provincia" name="provincia">
<option value="0" selected disabled hidden>Selecciona una opción</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<!-- /select -->
<!-- select -->
<div class="c-form-group lg:col-span-2">
<!-- label -->
<label class="block" for="select-municipio">Municipio</label>
<!-- /label -->
<select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="select-municipio" name="municipio" disabled>
<option value="0" selected disabled hidden>Selecciona una opción</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<!-- /select -->
</div>
</fieldset>Acepto políticas #
Es común tener que aceptar obligatoriamente algún tipo de politica antes de permitir enviar un formulario.
Mostrar código del ejemplo: includes/_pattern.formularios-acepto-politica.njk
Contenido
Nunjucks macro del ejemplo: includes/_pattern.formularios-acepto-politica.njk
{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{{ componentCheckboxes({
"idPrefix": "politicas-rgpd",
"name": "check-politicas",
"fieldset": {
"legend": {
"text": "Política de privacidad y protección de datos",
"classes": "sr-only"
}
},
"items": [
{
"value": "si",
"html": 'Acepto la <a href="#" class="c-link">política de privacidad y la protección de datos</a>',
"checked": true
}
]
}) }}HTML del ejemplo: includes/_pattern.formularios-acepto-politica.njk
<!-- checkboxes -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset>
<legend class="sr-only">
Política de privacidad y protección de datos
</legend>
<div class="c-checkboxes" data-module="c-checkboxes">
<div class=" c-checkboxes__conditional-active">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="politicas-rgpd" name="check-politicas" type="checkbox" value="si" checked aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block" for="politicas-rgpd">Acepto la <a href="#" class="c-link">política de privacidad y la protección de datos</a></label>
<!-- /label -->
</div>
</div>
</div>
</div>
</fieldset>
<!-- /fieldset -->
</div>
<!-- /checkboxes -->