# Patrones - Datos de contacto. DESY. Sistema de diseño del Gobierno de Aragón.

## Patrones Índice de páginas

Patrones

# 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.

Datos de contacto

Correo electrónico 

Teléfono móvil 

Mostrar código del ejemplo: includes/\_pattern.formularios-correo-telefono.njk

## Contenido

Nunjucks macro del ejemplo: includes/\_pattern.formularios-correo-telefono.njk HTML del ejemplo: includes/\_pattern.formularios-correo-telefono.njk

### Nunjucks macro del ejemplo: includes/\_pattern.formularios-correo-telefono.njk

```js
{% 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

```html
<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-sm 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-sm 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 [#](#cundo-lo-utilizamos)

-   Segundo paso o bloque de un [formulario de registro](patrones-pagina-formulario.html#paso-2-correo-electrnico-y-telfono).
-   En el formulario de datos del [perfil personal](patrones-pagina-otras.html#perfil-personal).

## Qué componentes utilizamos [#](#qu-componentes-utilizamos)

-   [Entrada de texto](componente-input-text.html)
    -   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 [#](#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](componente-formularios.html#accesibilidad) y en el componente [entrada de texto](componente-input-text.html#accesibilidad).