fbpx
Close

Login

Close

Register

Close

Lost Password

Cómo crear una caja de comentarios con HTML

En este tutorial te explicamos cómo crear una caja de comentarios con HTML puro o varios frameworks.

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.

Anuncios

Suscríbete

Recibe los últimos artículos en tu correo electrónico:

Síguenos

El autor

Edgar Medina es el fundador de Crónicatech. Ha escrito para medios reconocidos como El Tiempo, revista Donjuán, Portafolio, La República, revista Semana y Canal RCN. Ha trabajado en marketing digital con candidatos presidenciales, entidades del sector público como Icetex y la Alcaldía de Bogotá.

8 comentarios

  1. gracias por la información

    0
    0
    Responder
  2. una consulta como puedo hacer que cuando escribas algo en la caja de comentarios al darle al botón de enviar comentario, el comentario escrita aparezca en la pagina web ?????
    Condigo de ejemplo por favor.

    -Gracias

    0
    0
    Responder
  3. excelente y real aporte mi estimado mil gracias después de demasiada búsqueda por fin te encontré

    0
    0
    Responder
    • solo tengo una duda, ya montado en el dominio se guarda? estoy comenzando en esto y quisiera saber si tengo que hacer un localstorage para que se mantenga en el sitio? 🙂

      0
      0
      Responder
  4. thanks!

    0
    0
    Responder
  5. hola me puedes poner e didigo completo? ya que solo me sale la caja de comentarios y no aparece los comentarios en la web, garacias

    0
    0
    Responder
  6. GRACIAS. Por fin una ayuda util

    0
    0
    Responder

Escribe tus comentarios

Tu dirección de correo no será publicada Los campos requeridos marcados con *

¡Gracias por tu comentario!

Anuncios

Suscríbete

Recibe los últimos artículos en tu correo electrónico:

Síguenos

El autor

Edgar Medina es el fundador de Crónicatech. Ha escrito para medios reconocidos como El Tiempo, revista Donjuán, Portafolio, La República, revista Semana y Canal RCN. Ha trabajado en marketing digital con candidatos presidenciales, entidades del sector público como Icetex y la Alcaldía de Bogotá.