[et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n
En el desarrollo de p\u00e1ginas web, los formularios son una pieza clave para interactuar con los usuarios, y entre ellos, los comentarios en HTML destacan por ser una herramienta eficaz para recoger opiniones, sugerencias o retroalimentaci\u00f3n<\/strong>. Estos formularios permiten que los visitantes de un sitio compartan sus ideas o comentarios de forma directa, creando un canal de comunicaci\u00f3n valioso entre los creadores del contenido y su audiencia<\/strong>.<\/p>\n Un formulario de comentarios en HTML es una estructura b\u00e1sica que incluye campos como el nombre del usuario<\/strong>, su direcci\u00f3n de correo electr\u00f3nico<\/strong> y, por supuesto, un espacio para escribir el comentario. A pesar de su sencillez, este tipo de formulario puede personalizarse para adaptarse a cualquier estilo o necesidad espec\u00edfica del sitio web<\/a>. Con el uso adecuado de HTML<\/a>, CSS<\/a> y Javascript, es posible dise\u00f1ar un formulario funcional, atractivo y responsivo<\/strong>.<\/p>\n Este tipo de funciones son ideales para blogs<\/a>, foros<\/a> o cualquier p\u00e1gina que busque fomentar la interacci\u00f3n con su p\u00fablico<\/strong>. Los comentarios no solo enriquecen la experiencia del usuario al permitirles expresar su opini\u00f3n, sino que tambi\u00e9n pueden aportar valor al contenido, fortaleciendo la comunidad en torno al sitio.<\/p>\n En esta gu\u00eda, aprenderemos a construir un formulario de comentarios en HTML desde cero. Exploraremos c\u00f3mo estructurar el c\u00f3digo, a\u00f1adir estilos con CSS y optimizar la experiencia del usuario. Si est\u00e1s listo para ofrecer a tus visitantes una forma sencilla y efectiva de interactuar con tu contenido, \u00a1comencemos!<\/strong><\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Una secci\u00f3n de comentarios en HTML es un formulario interactivo dise\u00f1ado para que los visitantes de un sitio web puedan compartir sus pensamientos, preguntas o retroalimentaci\u00f3n de forma directa desde la p\u00e1gina. Este elemento es clave para que los creadores de contenido y su audiencia puedan interactuar<\/strong>, logrando una comunicaci\u00f3n directa que mejora la experiencia del usuario y enriquece el contenido.<\/p>\n De forma sencilla, una secci\u00f3n de comentarios en HTML es una estructura construida con etiquetas de HTML, que incluye campos para capturar informaci\u00f3n del usuario, como su nombre<\/strong>, correo electr\u00f3nico<\/strong> y el mensaje<\/strong> que desean enviar. Esta funci\u00f3n se encuentra por lo general en blogs<\/a>, foros, tiendas en l\u00ednea y cualquier plataforma que busque involucrar de forma activa a su audiencia.<\/p>\n [\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/pruebasweb.argenispaz.com\/wp-content\/uploads\/2025\/01\/Add-Comment-2-Streamline-Brooklyn.png\u00bb title_text=\u00bbAdd-Comment-2–Streamline-Brooklyn\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb width=\u00bb30%\u00bb max_width=\u00bb30%\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n La secci\u00f3n de comentarios sirve para que las personas participen, compartan opiniones, hagan preguntas o den su opini\u00f3n sobre un art\u00edculo, producto o servicio. Adem\u00e1s, este tipo de formulario no solo mejora la experiencia del usuario, sino que tambi\u00e9n contribuye al posicionamiento y la auditoria SEO<\/a> del sitio al generar contenido din\u00e1mico a trav\u00e9s de las interacciones de los usuarios.<\/p>\n En esta gu\u00eda, veremos c\u00f3mo crear una secci\u00f3n de comentarios en HTML desde cero, dise\u00f1\u00e1ndola para que sea funcional, atractiva y f\u00e1cil de usar, asegurando una buena experiencia para los visitantes.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Incluir una secci\u00f3n de comentarios en HTML en una p\u00e1gina web es un proceso sencillo pero esencial para fomentar la interacci\u00f3n con los visitantes. Esta secci\u00f3n permite a los usuarios compartir sus opiniones, ideas o preguntas, lo que enriquece el contenido y crea una experiencia m\u00e1s din\u00e1mica. Aqu\u00ed vamos a ver como podemos a\u00f1adir una secci\u00f3n de comentarios a nuestra web de manera efectiva.<\/p>\n Estructura b\u00e1sica en HTML<\/strong><\/p>\n El primer paso es crear la estructura b\u00e1sica del formulario utilizando etiquetas de HTML. A continuaci\u00f3n, un ejemplo t\u00edpico de c\u00f3mo se ve un formulario de comentarios:<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#2d2d4d\u00bb custom_padding=\u00bb24px|48px|24px|48px|false|false\u00bb hover_enabled=\u00bb0″ border_radii=\u00bbon|8px|8px|8px|8px\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n <form action=\u00bbprocess_comment.php\u00bb method=\u00bbpost\u00bb> <label for=\u00bbemail\u00bb>Correo electr\u00f3nico:<\/label> <label for=\u00bbcomment\u00bb>Comentario:<\/label> <button type=\u00bbsubmit\u00bb>Enviar<\/button> [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Implementar la funcion en el servidor<\/strong><\/p>\n Aunque el formulario en HTML es el n\u00facleo visual, necesitaremos un script en el servidor (como PHP) para procesar y guardar los comentarios. Esto asegura que los datos ingresados sean almacenados o enviados de forma correcta.<\/p>\n Validaci\u00f3n del lado del cliente y servidor:<\/strong> debemos asegurarnos de validar los datos tanto en el navegador como en el servidor para evitar errores y posibles abusos.<\/p>\n Optimizaci\u00f3n para dispositivos m\u00f3viles:<\/strong> podemos utilizar un dise\u00f1o web<\/a> responsivo para que la secci\u00f3n de comentarios funcione bien en cualquier dispositivo.<\/p>\n Mejora de la experiencia del usuario:<\/strong> agregar elementos como notificaciones de confirmaci\u00f3n tras enviar un comentario.<\/p>\n Incluir una secci\u00f3n de comentarios en HTML no solo mejora la experiencia del usuario, sino que tambi\u00e9n enriquece el contenido de nuestra p\u00e1gina y fomentar una comunidad activa en torno a nuestro sitio web.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Para guardar los comentarios en HTML en el servidor, primero necesitaremos un archivo PHP<\/a> que act\u00fae como puente entre nuestro formulario y el almacenamiento de datos. Este archivo recibir\u00e1, validar\u00e1 y guardar\u00e1 la informaci\u00f3n enviada. A continuaci\u00f3n, vamos a ver c\u00f3mo implementarlo paso a paso de forma sencilla, ideal para proyectos peque\u00f1os.<\/p>\n Primero, crearemos un archivo llamado process_comment.php<\/strong>. Este archivo procesar\u00e1 los datos que se env\u00edan desde nuestro formulario. Aqu\u00ed tenemos un ejemplo de c\u00f3mo configurarlo para guardar los comentarios en un archivo de texto:<\/p>\n [\/et_pb_text][et_pb_code _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_code][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#2d2d4d\u00bb custom_padding=\u00bb24px|48px|24px|48px|false|false\u00bb hover_enabled=\u00bb0″ border_radii=\u00bbon|8px|8px|8px|8px\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n <?php \/\/ Validar que todos los campos est\u00e9n completos \/\/ Guardar en un archivo de texto echo \u00ab\u00a1Comentario guardado con \u00e9xito!\u00bb; [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Este script recibe los datos del formulario<\/strong>, verifica que los campos<\/strong> no est\u00e9n vac\u00edos, los sanitiza para prevenir <\/strong>inyecciones de c\u00f3digo<\/a> y los guarda en un archivo llamado comments.txt<\/strong>. Este archivo debe estar en la misma carpeta que el script PHP y contar con permisos de escritura.<\/p>\n Despu\u00e9s, es fundamental que nuestro formulario HTML est\u00e9 conectado al archivo PHP. Para ello, debemos asegurarnos de que el atributo action<\/strong> del formulario apunte a process_comment.php<\/strong>, como en este ejemplo:<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#2d2d4d\u00bb custom_padding=\u00bb24px|48px|24px|48px|false|false\u00bb hover_enabled=\u00bb0″ border_radii=\u00bbon|8px|8px|8px|8px\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n <form action=\u00bbprocess_comment.php\u00bb method=\u00bbpost\u00bb><\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Es importante recordar que este sistema b\u00e1sico funciona bien para proyectos peque\u00f1os o educativos. Si necesitamos manejar un mayor volumen de datos o mejorar la organizaci\u00f3n, podr\u00edamos optar por guardar los comentarios en una base de datos<\/a> como MySQL<\/a>. En ese caso, ser\u00eda necesario ajustar nuestro script PHP para interactuar con la base de datos, lo cual nos proporcionar\u00e1 una soluci\u00f3n m\u00e1s robusta y escalable.<\/p>\n Este enfoque nos permitir\u00e1 tener una secci\u00f3n funcional de comentarios en nuestra p\u00e1gina, fortaleciendo la interacci\u00f3n con los usuarios y facilitando la gesti\u00f3n de su retroalimentaci\u00f3n.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Una vez que hemos aprendido a guardar los comentarios en HTML en el servidor, el siguiente paso es mostrar esos comentarios en tiempo real dentro de nuestra p\u00e1gina web utilizando JavaScript<\/strong> o JS<\/a>. Esto permite que los usuarios puedan visualizar los comentarios que han dejado, creando una experiencia m\u00e1s din\u00e1mica e interactiva. En este punto, unificaremos el formulario HTML, el script PHP para guardar los comentarios y JavaScript para mostrarlos de forma directa en nuestra p\u00e1gina.<\/p>\n Crear un contenedor para los comentarios<\/strong><\/p>\n Lo primero es en nuestra p\u00e1gina HTML, agregaremos un contenedor donde se mostrar\u00e1n los comentarios enviados por los usuarios. Este contenedor estar\u00e1 vac\u00edo y se llenar\u00e1 de forma din\u00e1mica con JavaScript.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#2d2d4d\u00bb custom_padding=\u00bb24px|48px|24px|48px|false|false\u00bb hover_enabled=\u00bb0″ border_radii=\u00bbon|8px|8px|8px|8px\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n <div id=\u00bbcomments-section\u00bb> [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n El contenedor #comments-section<\/strong> contendr\u00e1 una lista desordenada #comments-list<\/strong>, donde cada comentario se agregar\u00e1 como un nuevo elemento de lista.<\/p>\n Ajustar el script PHP para devolver comentarios<\/strong><\/p>\n Modificaremos nuestro archivo process_comment.php<\/strong> para que, adem\u00e1s de guardar los comentarios, devuelva el \u00faltimo comentario enviado en formato JSON<\/a>. Esto permitir\u00e1 a JavaScript procesarlo y agregarlo al contenedor en tiempo real.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#2d2d4d\u00bb custom_padding=\u00bb24px|48px|24px|48px|false|false\u00bb hover_enabled=\u00bb0″ border_radii=\u00bbon|8px|8px|8px|8px\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n <?php if (!empty($name) && !empty($email) && !empty($comment)) { \/\/ Devolver el comentario como JSON [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Este script ahora devuelve un objeto JSON con el nombre y comentario enviados, lo que facilita su manejo en JavaScript.<\/p>\n Agregar el JavaScript para mostrar comentarios<\/strong><\/p>\n Por \u00faltimo, implementaremos JavaScript para enviar los datos del formulario al script PHP, recibir la respuesta y mostrar el comentario en la lista.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#2d2d4d\u00bb custom_padding=\u00bb24px|48px|24px|48px|false|false\u00bb hover_enabled=\u00bb0″ border_radii=\u00bbon|8px|8px|8px|8px\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n <script> form.addEventListener(\u00absubmit\u00bb, async (event) => { const formData = new FormData(form); if (response.ok) { [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Para dar una breve explicacion de este flujo seria el siguiente:<\/strong><\/p>\n Este enfoque combina HTML, PHP y JavaScript<\/strong> para crear un sistema de comentarios funcional, interactivo y din\u00e1mico, ofreciendo a los usuarios una experiencia fluida al interactuar con nuestra p\u00e1gina web.<\/p>\n Podemos incluir el script de forma directa dentro de la p\u00e1gina HTML donde se encuentra el formulario de comentarios y el contenedor de los comentarios. Esto es \u00fatil para proyectos peque\u00f1os o pruebas r\u00e1pidas, ya que no requiere crear archivos adicionales.<\/p>\n El c\u00f3digo ir\u00eda dentro de la etiqueta <script><\/strong> al final del archivo HTML, justo antes de cerrar el <body<\/strong>>:<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#2d2d4d\u00bb custom_padding=\u00bb24px|48px|24px|48px|false|false\u00bb hover_enabled=\u00bb0″ border_radii=\u00bbon|8px|8px|8px|8px\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n <!DOCTYPE html> <label for=\u00bbemail\u00bb>Correo electr\u00f3nico:<\/label> <label for=\u00bbcomment\u00bb>Comentario:<\/label> <button type=\u00bbsubmit\u00bb>Enviar<\/button> <!– Contenedor para los comentarios –> <!– Script de JavaScript –> form.addEventListener(\u00absubmit\u00bb, async (event) => { const formData = new FormData(form); if (response.ok) { [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Para proyectos m\u00e1s grandes o si planeamos reutilizar el c\u00f3digo en varias p\u00e1ginas, es mejor colocar el script en un archivo JavaScript independiente. Esto facilita el mantenimiento y mejora<\/strong> la legibilidad del c\u00f3digo.<\/p>\n Crearemos un archivo llamado comments.js<\/strong> y guardamos el siguiente c\u00f3digo dentro:<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#2d2d4d\u00bb custom_padding=\u00bb24px|48px|24px|48px|false|false\u00bb hover_enabled=\u00bb0″ border_radii=\u00bbon|8px|8px|8px|8px\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n const form = document.querySelector(\u00abform\u00bb); form.addEventListener(\u00absubmit\u00bb, async (event) => { const formData = new FormData(form); if (response.ok) { [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n En el archivo HTML, enlaza el archivo comments.js<\/strong> utilizando la etiqueta <script>, colocando\u00a0 esta l\u00ednea justo antes de cerrar la etiqueta <body>.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb text_text_color=\u00bb#FFFFFF\u00bb background_color=\u00bb#2d2d4d\u00bb custom_padding=\u00bb24px|48px|24px|48px|false|false\u00bb hover_enabled=\u00bb0″ border_radii=\u00bbon|8px|8px|8px|8px\u00bb global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n <script src=\u00bbcomments.js\u00bb><\/script><\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb custom_margin=\u00bb||5px|||\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Mostrar comentarios en HTML con JavaScript es una herramienta poderosa que nos permite enriquecer la experiencia de los usuarios y mejorar la interacci\u00f3n en nuestras p\u00e1ginas web. Este proceso combina las capacidades de HTML, PHP y JavaScript<\/strong> para ofrecer un sistema din\u00e1mico y funcional que capta las opiniones de los usuarios y las refleja en tiempo real, sin necesidad de recargar la p\u00e1gina.<\/p>\n Hemos visto c\u00f3mo crear un flujo completo: desde un formulario de comentarios, pasando por el procesamiento en el servidor, hasta mostrar los datos de forma din\u00e1mica con JavaScript<\/strong>. Este enfoque no solo garantiza que los comentarios sean manejados de forma eficiente, sino que tambi\u00e9n crea una experiencia intuitiva y fluida para los usuarios.<\/p>\n Usar JSON para la comunicaci\u00f3n entre el servidor y el cliente nos ayuda a manejar datos de forma organizada y eficiente, permitiendo agregar funciones como filtros, ordenar comentarios o responder en tiempo real.<\/p>\n Es importante recordar que este sistema es solo una base. Si bien es funcional para proyectos peque\u00f1os o medianos, en aplicaciones m\u00e1s complejas podr\u00edamos optar por usar bases de datos y frameworks<\/strong> m\u00e1s avanzados para manejar comentarios de manera escalable y segura.<\/p>\n En definitiva, la implementaci\u00f3n de comentarios en HTML con JavaScript no solo mejora la funcionalidad de nuestro sitio, sino que tambi\u00e9n refuerza el v\u00ednculo con nuestros usuarios al ofrecerles un espacio para expresarse y ser escuchados.<\/p>\n [\/et_pb_text][et_pb_text _builder_version=\u00bb4.21.0″ _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0″ global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0″]<\/p>\n Tambi\u00e9n te puede interesar:<\/p>\n <\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" En el desarrollo de p\u00e1ginas web, los formularios son una pieza clave para interactuar con los usuarios, y entre ellos, los comentarios en HTML destacan por ser una herramienta eficaz para recoger opiniones, sugerencias o retroalimentaci\u00f3n. Estos formularios permiten que los visitantes de un sitio compartan sus ideas o comentarios de forma directa, creando un […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/10997"}],"collection":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/comments?post=10997"}],"version-history":[{"count":28,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/10997\/revisions"}],"predecessor-version":[{"id":11033,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/posts\/10997\/revisions\/11033"}],"wp:attachment":[{"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/media?parent=10997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/categories?post=10997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pruebasweb.argenispaz.com\/index.php\/wp-json\/wp\/v2\/tags?post=10997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\u00bfQu\u00e9 es una secci\u00f3n de comentarios en HTML?<\/h2>\n
\u00bfC\u00f3mo incluir una secci\u00f3n de comentarios en HTML en una web?<\/h2>\n
<label for=\u00bbname\u00bb>Nombre:<\/label>
<input type=\u00bbtext\u00bb id=\u00bbname\u00bb name=\u00bbname\u00bb required><\/p>\n
<input type=\u00bbemail\u00bb id=\u00bbemail\u00bb name=\u00bbemail\u00bb required><\/p>\n
<textarea id=\u00bbcomment\u00bb name=\u00bbcomment\u00bb rows=\u00bb5″ required><\/textarea><\/p>\n
<\/form><\/p>\n\u00bfC\u00f3mo guardar los comentarios HTML en el servidor?<\/h2>\n
\/\/ Comprobar si se han enviado datos a trav\u00e9s del formulario
if ($_SERVER[\u00abREQUEST_METHOD\u00bb] == \u00abPOST\u00bb) {
\/\/ Recibir los datos del formulario y sanitizarlos
$name = htmlspecialchars($_POST[‘name’]);
$email = htmlspecialchars($_POST[‘email’]);
$comment = htmlspecialchars($_POST[‘comment’]);<\/p>\n
if (!empty($name) && !empty($email) && !empty($comment)) {
\/\/ Formatear los datos para guardarlos
$entry = \u00abNombre: $name\\nCorreo: $email\\nComentario: $comment\\n——————-\\n\u00bb;<\/p>\n
$file = fopen(\u00abcomments.txt\u00bb, \u00aba\u00bb); \/\/ Abrir en modo de a\u00f1adir
fwrite($file, $entry); \/\/ Escribir los datos
fclose($file); \/\/ Cerrar el archivo<\/p>\n
} else {
echo \u00abPor favor, completa todos los campos antes de enviar.\u00bb;
}
}
?><\/p>\n\u00bfC\u00f3mo mostrar comentarios en HTML con JS?<\/h2>\n
<h3>Comentarios:<\/h3>
<ul id=\u00bbcomments-list\u00bb><\/ul>
<\/div><\/p>\n
if ($_SERVER[\u00abREQUEST_METHOD\u00bb] == \u00abPOST\u00bb) {
$name = htmlspecialchars($_POST[‘name’]);
$email = htmlspecialchars($_POST[‘email’]);
$comment = htmlspecialchars($_POST[‘comment’]);<\/p>\n
$entry = \u00abNombre: $name\\nCorreo: $email\\nComentario: $comment\\n——————-\\n\u00bb;
$file = fopen(\u00abcomments.txt\u00bb, \u00aba\u00bb);
fwrite($file, $entry);
fclose($file);<\/p>\n
echo json_encode([
\u00abname\u00bb => $name,
\u00abcomment\u00bb => $comment
]);
} else {
http_response_code(400);
echo json_encode([\u00aberror\u00bb => \u00abTodos los campos son obligatorios.\u00bb]);
}
}
?><\/p>\n
const form = document.querySelector(\u00abform\u00bb);
const commentsList = document.getElementById(\u00abcomments-list\u00bb);<\/p>\n
event.preventDefault();<\/p>\n
const response = await fetch(\u00abprocess_comment.php\u00bb, {
method: \u00abPOST\u00bb,
body: formData,
});<\/p>\n
const data = await response.json();
const listItem = document.createElement(\u00abli\u00bb);
listItem.textContent = `${data.name}: ${data.comment}`;
commentsList.appendChild(listItem);
form.reset();
} else {
const errorData = await response.json();
alert(errorData.error || \u00abOcurri\u00f3 un error al enviar el comentario.\u00bb);
}
});
<\/script><\/p>\n\n
<html lang=\u00bbes\u00bb>
<head>
<meta charset=\u00bbUTF-8″>
<meta name=\u00bbviewport\u00bb content=\u00bbwidth=device-width, initial-scale=1.0″>
<title>Comentarios en HTML<\/title>
<\/head>
<body>
<!– Formulario de comentarios –>
<form action=\u00bbprocess_comment.php\u00bb method=\u00bbpost\u00bb>
<label for=\u00bbname\u00bb>Nombre:<\/label>
<input type=\u00bbtext\u00bb id=\u00bbname\u00bb name=\u00bbname\u00bb required><\/p>\n
<input type=\u00bbemail\u00bb id=\u00bbemail\u00bb name=\u00bbemail\u00bb required><\/p>\n
<textarea id=\u00bbcomment\u00bb name=\u00bbcomment\u00bb rows=\u00bb5″ required><\/textarea><\/p>\n
<\/form><\/p>\n
<div id=\u00bbcomments-section\u00bb>
<h3>Comentarios:<\/h3>
<ul id=\u00bbcomments-list\u00bb><\/ul>
<\/div><\/p>\n
<script>
const form = document.querySelector(\u00abform\u00bb);
const commentsList = document.getElementById(\u00abcomments-list\u00bb);<\/p>\n
event.preventDefault();<\/p>\n
const response = await fetch(\u00abprocess_comment.php\u00bb, {
method: \u00abPOST\u00bb,
body: formData,
});<\/p>\n
const data = await response.json();
const listItem = document.createElement(\u00abli\u00bb);
listItem.textContent = `${data.name}: ${data.comment}`;
commentsList.appendChild(listItem);
form.reset();
} else {
const errorData = await response.json();
alert(errorData.error || \u00abOcurri\u00f3 un error al enviar el comentario.\u00bb);
}
});
<\/script>
<\/body>
<\/html><\/p>\n
const commentsList = document.getElementById(\u00abcomments-list\u00bb);<\/p>\n
event.preventDefault();<\/p>\n
const response = await fetch(\u00abprocess_comment.php\u00bb, {
method: \u00abPOST\u00bb,
body: formData,
});<\/p>\n
const data = await response.json();
const listItem = document.createElement(\u00abli\u00bb);
listItem.textContent = `${data.name}: ${data.comment}`;
commentsList.appendChild(listItem);
form.reset();
} else {
const errorData = await response.json();
alert(errorData.error || \u00abOcurri\u00f3 un error al enviar el comentario.\u00bb);
}
});<\/p>\nConclusi\u00f3n<\/h2>\n
\n