Text input

Campos de Texto

Actualizado el 14/03/2024

El campo de texto es un elemento básico de formulario que permite la inserción y edición de texto en una única línea.

Campos de texto

<> Código
× Ocultar Código
  • HTML
  • JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item">
    <label for="text-input-id">Etiqueta</label>
    <input id="text-input-id" name="text-input" placeholder="Ejemplo" type="text" />
</div>
 

Variantes

Con texto de ayuda

Esto es un texto de ayuda
<> Código
× Ocultar Código
  • HTML
  • JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item">
    <label for="text-input-id2">Etiqueta</label>
    <input id="text-input-id2" name="text-input" placeholder="Ejemplo" type="text" />
    <div class="help-text">Esto es un texto de ayuda</div>
</div>
</form> 

Con error

Esto es un mensaje de error
<> Código
× Ocultar Código
  • HTML
  • JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item">
    <label for="text-input-id">Etiqueta</label> 
    <input id="text-input-id" name="text-input" placeholder="Ejemplo" type="text" required="required" class="ulpgcds-form__item__error"/>
    <div class="help-text">Esto es un mensaje de error</div>
</div>
</form> 

Con campos opcionales

Esto es un texto de ayuda
Esto es un texto de ayuda
 
<> Código
× Ocultar Código
  • HTML
  • JS
<form action="" class="ulpgcds-form" method="post">
<div class="ulpgcds-form__item">
    <label for="text-input-id-1">Etiqueta</label>
    <input id="text-input-id-1" name="text-input" placeholder="Ejemplo" required="" type="text" />
<div class="help-text">Esto es un texto de ayuda</div>
</div>

<div class="ulpgcds-form__item">
    <label for="text-input-id-2">Etiqueta (optional)</label> 
    <input id="text-input-id-2" name="text-input" placeholder="Ejemplo" type="text" />
    <div class="help-text">Esto es un texto de ayuda</div>
</div>
<input class="ulpgcds-btn ulpgcds-btn--primary" type="submit" value="Enviar" />&nbsp;</form> 

Campo de texto con icono

Esto es un texto de ayuda
<> Código
× Ocultar Código
  • HTML
  • JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item">
    <label for="text-input-id6">Nombre de usuario</label>
    <input id="text-input-id6" name="text-input" placeholder="Introduce tu email" type="text" class="ulpgcds-form__item--icon" />
    <span class="ulpgcds-icon-envelope"></span>
    <div class="help-text">Esto es un texto de ayuda</div>
</div>
</form> 

Uso del componente

Este componente es la forma más sencilla de inserción y edición de texto. Suele ser empleado en la mayoría de los formularios.

Los campos de texto tienen que venir acompañados de una etiqueta siempre visible que identifique la información requerida. También debe mostrar en todo momento el estado en el que se encuentra (vacío, completado, error y desactivado)

Buenas prácticas:

  • Sea claro y conciso en el texto de las etiquetas. No emplee textos que el usuario no tiene porque conocer previamente. 
  • Es conveniente evitar que texto de la etiqueta este escrito en mayúsculas, esto puede dificultar la experiencia del usuario.
  • Si espera que el usuario inserte una gran cantidad de texto que no puede ser segragada, es preferible que utilice las áreas de texto.
  • Siempre que sea posible, incluya ayuda programada. Por ejemplo, detecte y rellene los campos de los que ya disponga información. Esto previene errores y facilita la tarea del usuario.
  • Siempre que pueda, ofrezca la función de auto-completado mediante una taxonomía cerrada. Por ejemplo, para inserta el nombre de un país o ciudad.
  • Siempre que sea posible, intente alinear todos los campos de formulario en una sola columna.
  • En el caso de formularios muy largos, es conveniente agrupar los elementos de formulario por contexto.
  • Si, en un formulario, la mayoría de los campos son obligatorios, es más adecuado destacar aquellos que son opcionales.
  • Si se comete un error al completar un formulario, los campos que provocan dicho error deben ser fácilmente identificables y siempre acompañados de la razón del error.
  • En ocasiones, puede ser interesante ofrecer algún texto de ayuda al usuario que se mantenga visible en todo momento y muestre pautas relativas al campo. Este texto de ayuda solo debe emplearse en aquellos campos de formularios que se consideren complejos o propensos al error.

Estilos CSS

Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.

Selector CSSDescripción
form.ulpgcds-formNecesario en el formulario dónde se introducen los campos de texto
form div.ulpgcds-form__itemCada fila correspondiente al componente del formulario
form div.ulpgcds-form__item--iconVariación para campos de texto con icono
form div.help-textTexto de ayuda debajo del campo
form div input.form-item__errorIndica que ese componente tiene un error

Diseño

En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.

Especificaciones de diseño de los campos de texto de la ULPGC
Estado del componente
Estable