HTML: Input y Label

Input

El elemento input es un elemento de formulario que permite al usuario introducir datos. Estos datos pueden ser de varios tipos, como texto, números, fechas, etc.

Los elementos input van dentro de un formulario, para crear un formulario solo necesitamos la etiqueta <form> y dentro de ella los elementos input que necesitemos.

Mira un ejemplo:

<form>
  <input />
</form>

Tendría un resultado parecido a este:

Prueba a escribir en la caja de texto.

Por defecto, si no le indicamos lo contrario, el input será de tipo texto. Por lo tanto esto

<form>
  <input />
</form>

Es lo mismo que esto

<form>
  <input type="text" />
</form>

Algo no muy conveniente, es que no estamos indicando en ningún lugar qué es lo que esperamos que el usuario introduzca en este campo. Eso es algo que podemos solucionar con el atributo placeholder.

<form>
  <input placeholder="Introduce tu nombre" />
</form>

El placeholder es un texto que se muestra en el campo de texto cuando está vacío. En el momento en el que el usuario empieza a escribir, el placeholder desaparece.

Esto es útil, pero cuando tenemos muchos campos, puede ser confuso utilizar solo el placeholder. dado que se borra cuando el usuario comienza a escribir, puede llegar un momento que el usuario no recuerde qué es lo que se espera que escriba en ese campo. Para solucionar esto, podemos usar la etiqueta label.

Label

El label es una etiqueta que se utiliza para describir un campo de texto. Para poder enlazarla con un campo de texto, debemos utilizar el atributo for en la etiqueta label y poner el mismo valor que el atributo id del campo de texto. De la siguiente manera:

<form>
  <label for="nombre">Nombre:</label>
  <input id="nombre" />
</form>

Como ves, ahora tenemos un texto descriptivo para el campo del formulario. Además, gracias a tener enlazada la etiqueta label mediante el atributo for, si hacemos clic en el texto, el campo de texto se selecciona. Esto es especialmente útil cuando el usuario está desde un dispositivo móvil, ya que puede ser complicado seleccionar el campo de texto directamente con el dedo.

También podemos combinar el uso de label y placeholder, en mi caso me gusta utilizar el label para describir el campo y el placeholder para dar un ejemplo

<form>
  <label for="nombre">Nombre:</label>
  <input id="nombre" placeholder="Ejemplo: Juan" />
</form>

---

---

Etiqueta br

Aprovecho el ejemplo anterior, para enseñarte una etiqueta que puedes usar en cualquier parte de tu código HTML, la etiqueta br significa "linea break" o "salto de línea" en español. Esta etiqueta se utiliza para hacer un salto de línea en el contenido de la página. Y puede ser útil por ejemplo, cuando quieres evitar que dos elementos en línea se muestren uno al lado del otro.

<form>
  <label for="nombre">Nombre:</label>
  <br />
  <input id="nombre" placeholder="Ejemplo: Juan" />
</form>

En el siguiente capítulo

Hasta ahora solo hemos visto un tipo de input, el input de texto. En el siguiente capítulo veremos los diferentes tipos de input que podemos utilizar en nuestros formularios.