Datos de identidad

Cómo pedimos información

Solemos agrupar los elementos de los formularios en fieldsets que agrupen tipos de datos similares. En este caso nombre y NIF o NIE.

Nombre y apellidos (Obligatorio)

NIF o NIE (Obligatorio)

Mostrar código

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 y apellidos (Obligatorio)"
    },
    "id": "input-nombre",
    "name": "nombre",
    "classes": "w-full lg:w-2/5",
    "autocomplete": "name"
  })  }}
  {{ componentInput({
    "label": {
      "text": "NIF o NIE (Obligatorio)"
    },
    "placeholder": "234556789N",
    "id": "input-nif",
    "name": "nif",
    "attributes": {
      "size": "19"
    }
  })  }}
</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 y apellidos (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-nombre" name="nombre" type="text" autocomplete="name">
  </div>
  <!-- /input -->
  <!-- input -->
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="input-nif">NIF o NIE (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-nif" name="nif" type="text" placeholder="234556789N" size="19">
  </div>
  <!-- /input -->
</fieldset>

Cuándo lo utilizamos #

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

Qué componentes utilizamos #

Entrada de texto

La longitud del campo Nombre y apellidos ocupa 2/5 de la anchura total en escritorio y el ancho completo en móviles.
La longitud del campo NIF o NIE ocupa una anchura fija proporcional al formato. Utilizamos el parámetro size="19".

¿NIF o NIE? #

El NIF equivale al número de DNI para para las personas que residen en España y al Número de Identificación en compañías mercantiles y otra sociedades.
El NIE es el número de identificación equivalente que se otorga únicamente a personas de países extranjeros.

En determinadas aplicaciones o solicitudes es necesario diferenciar entre uno u otro según el servicio que se ofrezca.

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 identidad). Es muy recomendable que el <legend> esté visible pero, excepcionalmente, podría ocultarse con el estilo .sr-only
El campo Nombre y apellidos debe tener el parámetro autocomplete= "name".
El campo NIF o NIE debe tener información acerca del formato requerido.
Consulta la información sobre accesibilidad en formularios y en el componente entrada de texto.