Controles: Campos de texto

La etiqueta HTML <input> puede tomar varios valores diferentes en su atributo type para permitir al usuario introducir información de texto, además de otra etiqueta denominada <textarea> para cantidades de texto más grandes como varios párrafos.

Según nuestras necesidades, tendremos varias opciones:

Tipo de información a obtener	Etiqueta a utilizar	Ejemplo
Texto alfanumérico libre (texto corto)	<input type="text">
Texto para búsquedas	<input type="search">
Número de teléfono o móvil	<input type="tel">
Dirección URL	<input type="url">
Dirección de correo email	<input type="email">
Clave o contraseña	<input type="password">
Campo oculto (no mostrar al usuario)	<input type="hidden">
Texto alfanumérico libre (extenso)	<textarea>	Esto es un campo de texto más extenso, útil para textos de uno o más párrafos.

Texto alfanumérico corto

En primer lugar, si lo que queremos es guardar información de texto libremente, la opción más habitual es optar por utilizar el campo de entrada de datos <input type="text">. Este atributo es el que se utiliza en las etiquetas <input> por defecto si no indicamos ningún atributo type. Es un campo de texto ideal para fragmentos cortos de información: nombres, apellidos, direcciones físicas, etc...

En resumen, pequeños fragmentos de texto menores a un par de palabras. Un sencillo ejemplo:

<form name="formulario" method="post" action="/send.php">
  <!-- Campo de entrada de datos -->
  <input type="text" name="nombre" autocomplete="off"
         placeholder="Introduce tu nombre de usuario" />
</form>

Obsérvese que además hemos indicado dos atributos adicionales:

• Autocompletado desactivado: No aparecerá información escrita anteriormente en ese campo.
• Placeholder: Es el texto que aparecerá a modo de sugerencia/ayuda para el usuario (en gris, ligeramente menos visible que el texto del campo). En cuanto el usuario escriba en el mismo, el mensaje desaparecerá. Sólo volvería a aparecer si el usuario decide borrar nuevamente la información que ha escrito en ese campo.

Es importante no escribir sugerencias de usuario en el atributo value, sino en placeholder. Utiliza el atributo value sólo si quieres indicar valores por defecto del campo.

Textos cortos específicos

Por otro lado, en HTML5 se añaden nuevos tipos para etiquetas <input> como search, tel, url o email. Aunque la idea es la misma que un campo de texto y en principio no notaremos ningún cambio, estos campos específicos tienen como objetivo hacer más sencillo el proceso de introducción de datos por parte del usuario.

Si utilizamos tel en vez de text, al hacer clic en el campo del formulario desde un smartphone/tablet, se nos desplegará el teclado numérico en lugar del teclado habitual, lo que nos facilitará en gran medida escribir el dispositivo móvil, ya que la intención es utilizar sólo caracteres para números. Lo mismo ocurre con los campos de tipo email o url, ya que nos mostrará un teclado con botones especiales con @, .com u otros atajos rápidos:

<form name="formulario" method="post" action="/send.php">
  <!-- Campo de entrada de teléfono -->
  Teléfono:
  <input type="tel" name="telefono" placeholder="+XX XXX XXXXXX" />
  <!-- Campo de entrada de email -->
  Email:
  <input type="email" name="correo" placeholder="[email protected]" />
  <!-- Campo de entrada de url -->
  Página web:
  <input type="url" name="web" placeholder="https://pagina.com/" />
</form>

El atributo type también permite el valor search, que es muy similar a los anteriores. Se utiliza para campos orientados a la búsqueda de palabras o textos en un sitio web, mostrando desde dispositivos móviles una x para borrar la palabra escrita con un sólo clic.

Campos para contraseñas

La etiqueta <input> tiene el valor password en su atributo type para crear campos de texto orientados a almacenar información sensible como podrían ser contraseñas, claves o pins numéricos. Esto no lo convertiría en un campo más seguro técnicamente, sino que simplemente muestra puntos o asteriscos en lugar del texto visualmente, protegiéndolo visualmente de ojos ajenos.

Por otro lado también tenemos el tipo hidden, que se puede utilizar cuando queremos enviar información en el formulario, pero que no queremos que el navegador lo muestre visualmente en el formulario, como por ejemplo un código numérico o una id informativa:

<form name="formulario" method="post" action="/send.php">
  <!-- Campo de entrada de usuario -->
  Usuario:`
  <input type="text" name="nombre" placeholder="Por ejemplo, Juan" />
  <!-- Campo de entrada de password -->
  Password:
  <input type="password" name="pass" placeholder="Contraseña" />
  <!-- Campo oculto: Este campo no se verá en el navegador -->
  <input type="hidden" name="informacion" value="72625" />
</form>

Campos extensos de texto

Por último, si queremos indicar un campo para escribir textos más extensos, lo más apropiado es utilizar la etiqueta <textarea>, que tiene también algunos atributos adicionales:

Atributo	Valor	Descripción
cols	número de columnas	Número de carácteres que caben en horizontal (columnas).
rows	número de filas	Número de carácteres que caben en vertical (filas).
wrap	soft | hard	Indica si el texto debe enviarse recolocado o como se ve visualmente.

Esta etiqueta nos permite añadir gran cantidad de texto, ya que las etiquetas <input type="text"> sólo nos permiten escribir una línea de texto y es muy incómodo si nuestra intención es escribir grandes cantidades de texto. Sus atributos cols y rows nos permiten aumentar el tamaño de ancho y alto, así como indicar si queremos que se modifique la apariencia visual del párrafo al enviar al formulario con el atributo wrap.

Un ejemplo básico de esta etiqueta <textarea>:

<form name="formulario" method="post" action="/send.php">
  <!-- Area de texto extensa -->
  <textarea name="texto" cols="80" rows="10" placeholder="Escribe aquí el texto...">
    Este es el valor por defecto
  </textarea>
</form>

Existen unas librerías de javascript para «enriquecer» y ampliar la funcionalidad de estas áreas de texto, permitiendo realizar ciertas tareas visuales como fragmentos en negrita, cursiva, imágenes, tablas, etc... Este tipo de librerías se llaman editores WYSIWYG (lo que ves es lo que obtienes).

Comprobación de ortografía

En todos estos campos, tanto etiquetas <input> como <textarea>, podemos utilizar un atributo denominado spellcheck mediante el cuál indicamos al navegador si debe revisar la ortografía del texto escrito en dicho elemento (en el cuál aparece una línea roja inferior cuando la palabra no se encuentra en el diccionario).

<form name="formulario" method="post" action="/send.php">
  <input type="text" name="objeto1" value="camion azul " spellcheck="true" />
  <input type="text" name="objeto2" value="camion azul " spellcheck="false" />
  <textarea cols="40" name="objeto3" spellcheck="true">camion azul</textarea>
</form>

Si el atributo spellcheck está a true, el navegador comprobará la ortografía, si se encuentra a false, no la comprobará. Si no se especifica el atributo, el navegador busca el atributo spellcheck en los elementos contenedores padres, y si no lo encuentra, toma el valor por defecto, que es true.

En el ejemplo anterior, hemos desactivado la comprobación de ortografía en el segundo campo (objeto2), por lo que al pulsar sobre él no aparece ninguna línea roja, a pesar de estar mal escrita. En los demás campos si ocurrirá.