Datos de contacto

Cómo pedimos información

Solemos agrupar los elementos de los formularios en fieldsets que agrupen tipos de datos similares. En este caso correo electrónico y teléfono.

Correo electrónico

Teléfono móvil

Mostrar código

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"
    },
    "id": "input-email",
    "name": "email",
    "classes": "w-full lg:w-2/5",
    "placeholder": "ejemplo@mail.com",
    "autocomplete": "email"
  })  }}
  {{ componentInput({
    "label": {
      "text": "Teléfono móvil"
    },
    "id": "input-movil",
    "name": "movil",
    "attributes": {
      "size": "19"
    },
    "placeholder": "652000000",
    "autocomplete": "tel-national"
  })  }}
</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</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" autocomplete="email" placeholder="ejemplo@mail.com">
  </div>
  <!-- /input -->
  <!-- input -->
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="input-movil">Teléfono móvil</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" autocomplete="tel-national" placeholder="652000000" size="19">
  </div>
  <!-- /input -->
</fieldset>

Cuándo lo utilizamos #

Segundo paso o bloque de un formulario de registro.
En el formulario de datos del perfil personal.

Qué componentes utilizamos #

Entrada de texto

La longitud del campo Correo electrónico ocupa 2/5 de la anchura total en escritorio y el ancho completo en móviles.
La longitud del campo Teléfono móvil ocupa una anchura fija proporcional al formato. Utilizamos el parámetro size="19".

Accesibilidad #

Los campos relacionados deben estar agrupados dentro de una etiqueta <fieldset>. Es obligatorio que tenga un elemento <legend> que describa el bloque (Datos de contacto). Es muy recomendable que el <legend> esté visible pero, excepcionalmente, podría ocultarse con el estilo .sr-only
El campo Correo electrónico debe tener información acerca del formato requerido y el parámetro autocomplete= "email".
El campo Teléfono móvil debe tener información acerca del formato requerido y el parámetro autocomplete= "tel-national".
Consulta la información sobre accesibilidad en formularios y en el componente entrada de texto.