Si queremos indicar un campo para escribir textos extensos, probablemente la etiqueta HTML <input>
se nos quede corta o sea incómoda. Lo más apropiado sería utilizar la etiqueta HTML <textarea>
, que nos permite escribir párrafos y líneas de contenido de texto sin restricciones.
Esta etiqueta tiene algunos atributos que podría ser interesante destacar:
Atributo | Descripción |
---|---|
cols |
Número de carácteres que caben en horizontal (columnas). |
rows |
Número de carácteres que caben en vertical (filas). |
wrap |
Con soft (por defecto) o hard puedes indicar si el texto debe enviarse ajustado o tal cuál se escribió. |
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:
<form method="post" action="/send/">
Nombre: <input name="nickname">
<textarea name="text">
Este es el valor de texto por defecto
</textarea>
</form>
Observa que en este caso, la etiqueta <textarea>
tiene un valor por defecto, pero no lo hemos indicado en el atributo value
como hacíamos en la etiqueta <input>
, sino que aquí lo incluímos en el interior de la etiqueta <textarea>
, ya que esta etiqueta si tiene etiqueta de cierre.
cols
y rows
Los atributos cols
y rows
nos permiten aumentar el tamaño de ancho y alto del área de texto, así como indicar si queremos que se modifique la apariencia visual del párrafo al enviar al formulario con el atributo wrap
. Con el valor soft
(valor por defecto) el texto se enviará literalmente, mientras que con el valor hard
se añadirán nuevas líneas (\n
) para ajustar el texto enviado a como se ve en el navegador.
Un ejemplo básico de la etiqueta HTML <textarea>
:
<form method="post" action="/send/">
Nombre: <input name="nickname">
<textarea name="text" cols="80" rows="10"
placeholder="Queridos Reyes Magos, este año me he portado muy bien..."></textarea>
</form>
Recuerda nuevamente, que el valor por defecto (interior de la etiqueta) y el placeholder
no es lo mismo.
Ten en cuenta que a veces puedes tener el contenido de la etiqueta
<textarea>
vacía, pero tienes espacios, por lo que cuentan como texto y no se ve la sugerencia visual. Para ver elplaceholder
no debes tener absolutamente ningún contenido.
<textarea>
(WYSIWYG)Existen algunas librerías de Javascript que permiten mejorar, «enriquecer» y ampliar la funcionalidad de estas áreas de texto, permitiendo realizar ciertas tareas visuales como si fueran pequeños editores de texto: fragmentos en negrita, cursiva, imágenes, tablas, etc...
Este tipo de librerías se suelen denominar editores WYSIWYG (lo que ves es lo que obtienes) y existen muchos y muy variados. Algunos de ellos son los siguientes:
Nombre | Descripción |
---|---|
Ligeros | |
Quill | Editor WYSIWYG sencillo, ligero y atractivo. |
Medium Editor | Al estilo de la web Medium. |
Woofmark | Basado en DOM, modular, progresivo y soporta Markdown. |
EtherPad | Editor colaborativo, en tiempo real y escalable. |
ProseMirror | Editor WYSIWYG semántico y modular. |
Trix | Editor WYSIWYG sencillo y bonito. |
Jodit Editor 3 | Editor WYSIWYG escrito en Typescript sin librerías adicionales. |
Slate | Editor WYSIWYG personalizable. |
Clásicos (y algo más pesados) | |
Aloha Editor | Uno de los editores WYSIWYG más conocidos. |
Tiny (antes TinyMCE) | Probablemente, el primer editor WYSIWYG en popularizarse. |
CKEditor5 | Editor WYSIWYG bastante popular. |
AlloyEditor | Editor moderno WYSIWYG basado en CKEditor. |
TrumboWYG | Incorpora soporte de plugins. Requiere jQuery. |
SummerNote | Requiere jQuery y Bootstrap. |
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev