Cómo crear una caja de comentarios con HTML

Existen varias opciones si quieres crear una caja de comentarios en HTML. Puedes hacerlo mediante un formulario clásico en HTML puro o puedes acudir a un framework como Bootstrap, Materialize o Foundation. En este artículo te contaremos cómo hacerlo.

Lee también: Cinco formas de crear una tabla responsiva en tu sitio web

Si quieres usar HTML puro, sigue estos pasos:

1. Crea un formulario HTML: para hacer una caja de comentarios, primero debes crear un formulario en HTML que contenga un cuadro de texto para que los usuarios puedan escribir sus comentarios.
2. Usa la etiqueta <form>: para crear un formulario, debes usar la etiqueta <form>. Dentro de la etiqueta <form>, debes incluir un cuadro de texto y un botón de enviar.
3. Usa la etiqueta <textarea>: para crear un cuadro de texto en HTML, debes usar la etiqueta <textarea>. Puedes especificar el tamaño y el número máximo de caracteres permitidos en el cuadro de texto, agregando atributos a la etiqueta <textarea>.
4. Usa la etiqueta <input>: para crear un botón de enviar, debes usar la etiqueta <input> con el atributo type="submit".
5. Agrega estilos CSS: para dar estilo a tu caja de comentarios, puedes agregar CSS. Por ejemplo, puedes cambiar el tamaño y el color del cuadro de texto y el botón de enviar.

Ejemplo de código HTML para una caja de comentarios:

<form>
  <textarea rows="5" cols="50"></textarea><br><br>
  <input type="submit" value="Enviar comentario">
</form>

Con Bootstrap

Además de crear una caja de comentarios en HTML puro, también puedes hacerlo utilizando un framework front-end como Bootstrap o Materialize. Estos frameworks te permiten crear elementos interactivos con poco código y estilos preconstruidos.

Pasos para hacer una caja de comentarios con Bootstrap:

1. Incluye los archivos de Bootstrap en tu proyecto: para utilizar Bootstrap, debes incluir los archivos CSS y JavaScript en tu proyecto. Puedes hacerlo descargándolos desde la página oficial de Bootstrap o incluyéndolos mediante un enlace a un servidor CDN.
2. Crea un formulario: para crear una caja de comentarios con Bootstrap, debes crear un formulario usando la clase form-group y la etiqueta <textarea>.
3. Usa la clase form-control: para aplicar el estilo de Bootstrap al cuadro de texto, debes usar la clase form-control en la etiqueta <textarea>.
4. Agrega un botón de enviar: para agregar un botón de enviar, debes usar la etiqueta <button> con la clase btn y btn-primary.

Ejemplo de código HTML para una caja de comentarios con Bootstrap:

<form>
  <div class="form-group">
    <textarea class="form-control" rows="5"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Enviar comentario</button>
</form>

Con Materialize

Los pasos para hacer una caja de comentarios con Materialize son similares. La principal diferencia es que debes incluir los archivos CSS y JavaScript de Materialize y usar las clases de Materialize en lugar de las de Bootstrap.

Ejemplo de código HTML para una caja de comentarios con Materialize:

<form>
  <div class="input-field">
    <textarea class="materialize-textarea" rows="5"></textarea>
  </div>
  <button class="btn waves-effect waves-light" type="submit">Enviar comentario</button>
</form>

Con Foundation

1. Incluye los archivos de Foundation en tu proyecto: para utilizar Foundation, debes incluir los archivos CSS y JavaScript en tu proyecto. Puedes hacerlo descargándolos desde la página oficial de Foundation o incluyéndolos mediante un enlace a un servidor CDN.
2. Crea un formulario: para crear una caja de comentarios con Foundation, debes crear un formulario usando la clase row y la etiqueta <textarea>.
3. Usa la clase large-12 columns: para determinar el tamaño del cuadro de texto, debes usar la clase large-12 columns en la etiqueta <textarea>.
4. Agrega un botón de enviar: para agregar un botón de enviar, debes usar la etiqueta <button> con la clase button.

Ejemplo de código HTML para una caja de comentarios con Foundation:

<form>
  <div class="row">
    <textarea class="large-12 columns"></textarea>
  </div>
  <button type="submit" class="button">Enviar comentario</button>
</form>

Para mostrar los comentarios en la página dinámicamente

Existen varias soluciones. La mejor de ellas es almacenando los comentarios en una base de datos, como MySQL y desplegándolos en el HTML a través de lenguajes de programación como PHP o React.

También existe una forma sencilla a través de JavaScript. Supongamos que tu código en HTML para la caja de comentarios es como el siguiente:

<div id="comment-section">
  <h3>Comments:</h3>
  <div id="comments-container"></div>
</div>

<div>
  <h3>Leave a comment:</h3>
  <textarea id="comment-input"></textarea><br>
  <button id="submit-button">Submit</button>
</div>

El siguiente código en JavaScript te permitirá desplegar el comentario en la página:

const submitButton = document.getElementById("submit-button");
const commentInput = document.getElementById("comment-input");
const commentsContainer = document.getElementById("comments-container");

submitButton.addEventListener("click", function() {
  const comment = commentInput.value;
  const commentElement = document.createElement("div");
  commentElement.innerHTML = comment;
  commentsContainer.appendChild(commentElement);
  commentInput.value = "";
});

Este código crea un submitButton y escucha un evento de clic. Cuando se hace clic en el botón, toma el valor del área de texto commentInput, crea un nuevo elemento div con ese valor como su HTML interno y lo agrega al elemento commentsContainer. Esto agregará dinámicamente nuevos comentarios a la página cada vez que se haga clic en el botón Enviar.