# data[].attributes.headline
Crucigrama en línea: Tercero Informática A

# data[].attributes.subject
Crucigrama en línea: Tercero Informática A

# data[].attributes.body
Arme el crucigrama en linea, revise las pistas proporcionadas.

no olvidar ingresar su nombre y apellido

# data[].attributes.attachment_link.provider_name
Wordwall - Crea mejores lecciones de forma más rápida

# data[].attributes.attachment_link.description
Crucigrama - Usa las pistas para resolver el crucigrama. Toca en una palabra y escribe la respuesta.

# data[].attributes.headline
 CRUCIGRAMA EN FÍSICO: Tercero Informática A:

# data[].attributes.subject
 CRUCIGRAMA EN FÍSICO: Tercero Informática A:

# data[].attributes.body
Arme el crucigrama en el documento , revise las pistas proporcionadas.

# data[].attributes.headline
Indicaciones para descargar e imprimir el documento

# data[].attributes.subject
Indicaciones para descargar e imprimir el documento

# data[].attributes.body
Clic en el crucigrama

clic en la parte superior en los puntitos.

seleccionar de la lista descargar adjunto

listo descargaste el documento en pdf

# data[].attributes.body
si aparece esa ventana con otro nombre

Clic en no soy yo y digitar su nombre y apellido y continuar

# data[].attributes.headline
Actividad virtual 2: Rompecabezas en línea

# data[].attributes.subject
Actividad virtual 2: Rompecabezas en línea

# data[].attributes.body
Seguir las indicaciones

# data[].attributes.attachment_link.title
Diseño A - Rompecabezas Del Usuario #1024283

# data[].attributes.attachment_link.description
Puzzle de Diseño A del álbum PROGRAMACIÓN. Juega y crea rompecabezas gratis en línea.

# data[].attributes.headline
Indicaciones generales : Actividad 2 rompecabezas

# data[].attributes.subject
Indicaciones generales : Actividad 2 rompecabezas

# data[].attributes.body
Leer por favor las indicaciones

# data[].attributes.attachment_link.title
ACTIVIDAD VIRTUAL Lunes 13 de mayo tercero A 

# data[].attributes.headline
Actividad virtual 3: Persecución y laberinto de HTML

# data[].attributes.subject
Actividad virtual 3: Persecución y laberinto de HTML

# data[].attributes.body
corre a la respuesta correcta y evita a los enemigos

desplázate arriba, abajo, derecha e izquierda

No olvides digitar tu nombre y apellido para ingresar

Si aparece otro nombre, clic en no soy yo y podrás digitar tu nombre.

listo iniciar

# data[].attributes.attachment_link.provider_name
Wordwall - Crea mejores lecciones de forma más rápida

# data[].attributes.attachment_link.description
Persecución en el laberinto - Corre a la zona de la respuesta correcta evitando los enemigos.

# data[].attributes.body
Clic en las fichas para encontrar las parejas semejantes en HTML

# data[].attributes.attachment_link.provider_name
Wordwall - Crea mejores lecciones de forma más rápida

# data[].attributes.attachment_link.title
Diseño y Desarrollo Web 3ro. A (Pares semejantes)

# data[].attributes.attachment_link.description
Parejas - Toca un par de fichas a la vez para descubrir si son iguales.

# data[].attributes.body
Revisar las actividades 1,3 y 4 para evaluación siguiente clase

# data[].attributes.attachment_link.provider_name
Wordwall - Crea mejores lecciones de forma más rápida

# data[].attributes.attachment_link.title
3ro. A Diseño y Desarrollo Web . evaluación diagnóstica

# data[].attributes.attachment_link.description
Une las parejas - Arrastra y suelta cada palabra junto a su definición.

# data[].attributes.attachment_link.readable_text
Tarea Parejas 16 may. 20:37 Sin fecha límite 12

wordwall.net/play/73425/572/800 ⧉

Inicia sesión en Google Classroom para mostrar los resultados.

Iniciar sesión en Google Classroom

Concede permisos a Google Classroom para mostrar los resultados.

Conceder permisos

Inicia sesión en Google Classroom como profesor del curso para mostrar los resultados.

Cambiar usuario

# data[].attributes.attachment_link.title
" Diseño y Desarrollo Web 3ro. A (Pares semejantes)"

# data[].attributes.attachment_link.description
Tarea Parejas 16 may. 20:37 Sin fecha límite 12 wordwall.net/play/73425/572/800 ⧉ Inicia sesión en Google Classroom para mostrar los resultados. Iniciar sesión en Google Classroom Concede permisos a Google Classroom para mostrar los resultados. Conceder permisos Inicia sesión en Google Classroom como profesor del curso para mostrar los resultados.

# data[].attributes.attachment_link.readable_text
Tarea Persecución en el laberinto 16 may. 0:49 Sin fecha límite 18

wordwall.net/play/73370/207/290 ⧉

Inicia sesión en Google Classroom para mostrar los resultados.

Iniciar sesión en Google Classroom

Concede permisos a Google Classroom para mostrar los resultados.

Conceder permisos

Inicia sesión en Google Classroom como profesor del curso para mostrar los resultados.

Cambiar usuario

# data[].attributes.attachment_link.description
Tarea Persecución en el laberinto 16 may. 0:49 Sin fecha límite 18 wordwall.net/play/73370/207/290 ⧉ Inicia sesión en Google Classroom para mostrar los resultados. Iniciar sesión en Google Classroom Concede permisos a Google Classroom para mostrar los resultados. Conceder permisos Inicia sesión en Google Classroom como profesor del curso para mostrar los resultados.

# data[].attributes.attachment_link.readable_text
Tarea Crucigrama 10 may. 8:26 Sin fecha límite 9

wordwall.net/play/72560/075/347 ⧉

Inicia sesión en Google Classroom para mostrar los resultados.

Iniciar sesión en Google Classroom

Concede permisos a Google Classroom para mostrar los resultados.

Conceder permisos

Inicia sesión en Google Classroom como profesor del curso para mostrar los resultados.

Cambiar usuario

# data[].attributes.attachment_link.title
Resultado 44 para "CRUCIGRAMA CONCEPTOS WEB" tercero A

# data[].attributes.attachment_link.description
Tarea Crucigrama 10 may. 8:26 Sin fecha límite 9 wordwall.net/play/72560/075/347 ⧉ Inicia sesión en Google Classroom para mostrar los resultados. Iniciar sesión en Google Classroom Concede permisos a Google Classroom para mostrar los resultados. Conceder permisos Inicia sesión en Google Classroom como profesor del curso para mostrar los resultados.

# data[].attributes.body
naomi

# data[].attributes.attachment_link.readable_text
html>
celular2

Práctica 2

Ejercicio con celular 2 u hoja en blanco

El celular se le debe dar uso para trabajar en clase codificando en HTML

# data[].attributes.attachment_link.provider_name
Wordwall - Crea mejores lecciones de forma más rápida

# data[].attributes.attachment_link.readable_text
1) TITULO DE TABLA 2) CABECERA DE TABLA 3) CUERPO DE TABLA 4) PIE DE TABLA 5) ALINEACION A LA DERECHA DE UNA TABLA 6) FONDO DE COLOR DE UNA TABLA 7) COLOR DEL TEXTO DE UNA CELDA 8) ALINEACION A LA IZQUIERDA DE UNA TABLA 9) ALINEACION DE UNA TABLA EN EL CENTRO 10) FONDO DE COLOR DE UNA CELDA

# data[].attributes.attachment_link.description
1) TITULO DE TABLA 2) CABECERA DE TABLA 3) CUERPO DE TABLA 4) PIE DE TABLA 5) ALINEACION A LA DERECHA DE UNA TABLA 6) FONDO DE COLOR DE UNA TABLA

# data[].attributes.body
Reproduce y analiza el video

# data[].attributes.attachment_link.title
¿Sabes qué es la etiqueta FORM (html) y cómo se utiliza? (Ejemplo)

# data[].attributes.attachment_link.readable_text
Conocer la opinión de tus clientes es vital, y una forma fácil y rápida de obtener sus comentarios es incluir un formulario en tu sitio web. Si deseas ahorrar un poco de inversión en su creación, puedes recurrir a la programación para lograrlo.

Antes de decirte cómo desarrollarlo, veamos en qué consiste un formulario programado en HTML.

¿Qué es un formulario HTML?

Un formulario HTML es una caja de texto que puede contener casillas de verificación, botones y campos alfanuméricos. Suelen encontrarse en los sitios web para recolectar los datos personales de los usuarios interesados en la oferta del sitio. Estos datos posteriormente se envían a una base de datos para ser procesados.

¿Para qué sirven los formularios HTML?

Como puedes ver, el objetivo de un formulario es la interacción del usuario con la empresa. Por ello, es importante que no los satures de campos y solicitudes de información que realmente no necesitas.

Desde el punto de vista del usuario, debes pensar en la usabilidad y la pertinencia de tus formularios, para que no provoquen el efecto contrario al que buscas: entablar una relación con un cliente potencial.

Es indispensable que conozcas un poco del lenguaje básico que estarás manejando en HTML, así como la estructura de los sitios web en este lenguaje de programación. Empecemos con un poco de teoría.

Estructura de un formulario HTML y sus elementos

Un formulario HTML no requiere tantas etiquetas y atributos, siempre y cuando lo mantengas con un formato básico.

1. Form

Sus etiquetas son <form> y </form>

Dentro de ellas, se agregan todos los atributos necesarios para dar estructura a tu formulario, los cuales son:

Action: especifica la acción asociada al formulario.

Method: indica el método de acceso de la acción del formulario.

Enctype: determina el tipo de codificación nombre/valor.

2. Input

Su etiqueta es <input>. Cuenta con diferentes tipos de entrada:

Texto: se expresa como <input type=text> y es por defecto la entrada de una sola línea. También puede tener otros atributos: <input maxlenght> que limita los campos a introducir; <input size> para indicar el espacio a disponer para cada campo y finalmente <input value> que indica el valor inicial de campo.

Caja de selección: se expresa como <input type=checkbox> y sirve para representar opciones como "Sí/No".

Botón: su etiqueta es <input type=radio>; representa un conjunto de varios elementos de este tipo con el mismo nombre con un campo de selección múltiple.

Botón de envío: se expresa como <input type=submit> y representa la opción de lo que tiene que hacer el usuario, que es, en este caso, enviar el formulario.

3. Select

Su etiqueta es <select>. Se utiliza para reducir una lista de valores, por ejemplo:

Multiple: indica que puede haber más de una opción.

Name: nombre de campo.

Size: número de ítems visibles.

4. Text area

Su etiqueta es <textarea>. Representa el espacio donde puedes añadir todo el texto que requieras y puede tener los siguientes atributos:

Cols: número de columnas visibles.

Name: nombre del campo.

Rows: número de líneas visibles.

5. Fieldset

Fieldset es un elemento que sirve para agrupar varios datos relacionados entre sí mismos. Su etiqueta es <fieldset>. Por ejemplo, si necesitas varios campos personales en un formulario, puedes agruparlos con este campo como en el siguiente ejemplo:

<fieldset><label for="nombre">Nombre</label><input type="text" id="nombre"/><label for="apellido paterno">Apellido paterno</label><input type="text" id="apellido paterno"/><label for="apellido materno">Apellido materno</label><input type="text" id="apellido materno"/></fieldset>

6. Legend

Legend es un elemento que sirve para etiquetar o identificar una agrupación de campos. Su etiqueta es <legend>.

<fieldset><leyend>Introduce tu nombre y apellidos</leyend><label for="nombre">Nombre</label><input type="text" id="nombre"/><label for="apellido paterno">Apellido paterno</label><input type="text" id="apellido paterno"/><label for="apellido materno">Apellido materno</label><input type="text" id="apellido materno"/></fieldset>

Con estos elementos tus formularios lucirán mejor y mejorarán su usabilidad, con lo cual los usuarios se sentirán más cómodos.

Cómo hacer un formulario HTML

1. Usa PHP para crear tu página.

2. Añade el código.

3. Habilita el envío del formulario a un correo electrónico.

4. Especifica el destino del formulario HTML.

1. Usa PHP para crear tu página

Al momento de crear tu página web en donde habilitarás tu formulario, en lugar de utilizar la extensión .html, escribe .php. Al hacer esto, el servidor sabrá alojar el PHP que escribas, en vez de guardar la página HTML vacía. Agrega un nombre como "formulariodecontacto.php". Una vez creada y guardada, podrás comenzar a desarrollar tu formulario.

2. Añade el código

En este paso debes escribir el código HTML para crear el formulario. Para hacerlo, utiliza las etiquetas y atributos que te compartimos anteriormente. Te compartimos un código de formulario básico:

Con este formulario podrás solicitar el nombre y correo electrónico del usuario, el área que le interesa contactar, la razón por la que te contacta y también le puedes proporcionar un cuadro de texto en blanco para que pueda agregar su mensaje. Incluye un CTA que indica dónde enviar su solicitud. Cópialo y cambia los datos que desees.

<form action="contact.php" method="post"> <div class="elem-group"> <label for="name">Nombre</label> <input type="text" id="name" name="visitor_name" placeholder="Nombre de ejemplo" pattern=[A-Z\sa-z]{3,20} required> </div> <div class="elem-group"> <label for="email">Correo electrónico</label> <input type="email" id="email" name="visitor_email" placeholder="ejemplo@email.com" required> </div> <div class="elem-group"> <label for="department-selection">Área a contactar</label> <select id="department-selection" name="concerned_department" required> <option value="">Selecciona un área</option> <option value="billing">Facturación</option> <option value="marketing">Marketing</option> <option value="technical support">Servicio al cliente</option> </select> </div> <div class="elem-group"> <label for="title">Motivo de contacto</label> <input type="text" id="title" name="email_title" required placeholder="Problema/Consulta" pattern=[A-Za-z0-9\s]{8,60}> </div> <div class="elem-group"> <label for="message">Solicitud</label> <textarea id="message" name="visitor_message" placeholder="Escribe tu mensaje aquí." required></textarea> </div> <button type="submit">Enviar mensaje</button></form>

3. Habilita el envío del formulario a un correo electrónico

Una vez que realices una vista previa de tu formulario para cerciorarte de que todo aparezca justo como lo deseas, es tiempo de crear las instrucciones para que, cuando el usuario haga clic en "Enviar", el formulario se mande por mensaje de correo electrónico hasta tu bandeja.

Para ello, regresa al inicio de tu código y arriba de él agrega un código más: será el que habilite esta acción. Copia y pega el siguiente código:

<?phpif($_POST["message"]) {mail("your@email.address", "Here is the subject line",$_POST["insert your message here"]. "From: an@email.address");}?>

Recuerda cambiar los datos por tu información de contacto para que así el formulario llegue directamente a tu bandeja de entrada. Te explicamos la función de este código de manera desglosada: "mail" envía el formulario completo como un correo electrónico a "your@email.address" (el correo electrónico que elijas para recibir los formularios); lo que sigue en el código es la línea de asunto. En el párrafo siguiente posterior puedes escribir "copia del mensaje de correo electrónico" y se enviará desde la dirección de correo que escojas.

Al final, tu código debe lucir de manera similar a la imagen:

Una vez que se envía el formulario, llegarán los datos por automático. De esta manera, ya habrás creado un formulario básico para tu sitio web.

4. Especifica el destino del formulario HTML

De acuerdo con Mozilla, el atributo action especifica a qué archivo de script deben enviarse los datos del formulario para su procesamiento.

La etiqueta de este atributo es <form action="url-destino"> ... </form>. En el siguiente ejemplo, podemos ver cómo se vería esta etiqueta:

<form action="envio.php" method="GET"><label for="nombre">Nombre</label><input type="text" id="nombre" name="nombre"/><label for="apellido">Apellido</label><input type="text" id="apellido" name="apellido"/><button id="envio">Enviar Formulario</button></form>

Al utilizar el atributo method GET, obtendríamos una URL de destino que incluye los parámetros del formulario en su estructura.

Ten en cuenta que el código HTML puede ser complejo, sobre todo si no cuentas con experiencia en programación. Por lo tanto, puedes optar por otra forma de hacer tu formulario. El Creador gratuito de formularios online de HubSpot cumple con estas y más funciones especializadas en los negocios. Lo mejor es que con su ayuda tus formularios tendrán una mejor apariencia y te olvidarás de las configuraciones complicadas:

3 ejemplos de formularios en HTML

Veamos algunos ejemplos de formularios HTML para que conozcas el tipo de apariencia que obtendrías con el código:

1. Ejemplo de formulario HTML de información personal

Este ejemplo de formulario HTML muestra pocos campos y está enfocado en recolectar la información básica personal de un usuario. Es adecuado para los sitios web que requieren datos demográficos, ya sea de sus suscriptores, leads o clientes.
Imagen de Geeks for geeks
2. Ejemplo de formulario HTML para el ingreso de usuario

Este formulario HTML permite a los usuarios del servicio Novell entrar a su cuenta, no sin antes especificar información como su nombre en la plataforma, contraseña, ciudad, servidor web, rol en la empresa donde trabajan y la casilla de inicio de sesión único.

3. Ejemplo de formulario HTML de satisfacción del cliente
Imagen de Novell
Este formulario está enfocado en la retroalimentación del cliente para conocer las emociones relacionadas con su experiencia y su nivel de satisfacción con un servicio. Además, permite dejar más comentarios para que puedan conocer su opinión a detalle.

Ahora que conoces lo básico para hacer un formulario HTML, tómate el tiempo necesario para comprender su funcionamiento y creación. Como lo mencionamos, el uso de código puede ser complejo, pero con un poco de práctica y consejos, podrás estar realizando formularios personalizados.
Imagen de W3 Si te interesa aprender más sobre el código HTML y CSS, te recomendamos nuestra guía básica enfocada en los profesionales de marketing.

# data[].attributes.attachment_link.title
Cómo crear un formulario en HTML (con ejemplo)

# data[].attributes.attachment_link.description
Conoce qué es un formulario HTML, sus elementos y la manera de estructurarlos, así como los pasos para crear un formulario básico y ejemplos.HTML

# data[].attributes.body
Diseñe un mapa mental : tema formularios en HTML y sus elementos

# data[].attributes.attachment_link.readable_text
Conocer la opinión de tus clientes es vital, y una forma fácil y rápida de obtener sus comentarios es incluir un formulario en tu sitio web. Si deseas ahorrar un poco de inversión en su creación, puedes recurrir a la programación para lograrlo.

Antes de decirte cómo desarrollarlo, veamos en qué consiste un formulario programado en HTML.

¿Qué es un formulario HTML?

Un formulario HTML es una caja de texto que puede contener casillas de verificación, botones y campos alfanuméricos. Suelen encontrarse en los sitios web para recolectar los datos personales de los usuarios interesados en la oferta del sitio. Estos datos posteriormente se envían a una base de datos para ser procesados.

¿Para qué sirven los formularios HTML?

Como puedes ver, el objetivo de un formulario es la interacción del usuario con la empresa. Por ello, es importante que no los satures de campos y solicitudes de información que realmente no necesitas.

Desde el punto de vista del usuario, debes pensar en la usabilidad y la pertinencia de tus formularios, para que no provoquen el efecto contrario al que buscas: entablar una relación con un cliente potencial.

Es indispensable que conozcas un poco del lenguaje básico que estarás manejando en HTML, así como la estructura de los sitios web en este lenguaje de programación. Empecemos con un poco de teoría.

Estructura de un formulario HTML y sus elementos

Un formulario HTML no requiere tantas etiquetas y atributos, siempre y cuando lo mantengas con un formato básico.

1. Form

Sus etiquetas son <form> y </form>

Dentro de ellas, se agregan todos los atributos necesarios para dar estructura a tu formulario, los cuales son:

Action: especifica la acción asociada al formulario.

Method: indica el método de acceso de la acción del formulario.

Enctype: determina el tipo de codificación nombre/valor.

2. Input

Su etiqueta es <input>. Cuenta con diferentes tipos de entrada:

Texto: se expresa como <input type=text> y es por defecto la entrada de una sola línea. También puede tener otros atributos: <input maxlenght> que limita los campos a introducir; <input size> para indicar el espacio a disponer para cada campo y finalmente <input value> que indica el valor inicial de campo.

Caja de selección: se expresa como <input type=checkbox> y sirve para representar opciones como "Sí/No".

Botón: su etiqueta es <input type=radio>; representa un conjunto de varios elementos de este tipo con el mismo nombre con un campo de selección múltiple.

Botón de envío: se expresa como <input type=submit> y representa la opción de lo que tiene que hacer el usuario, que es, en este caso, enviar el formulario.

3. Select

Su etiqueta es <select>. Se utiliza para reducir una lista de valores, por ejemplo:

Multiple: indica que puede haber más de una opción.

Name: nombre de campo.

Size: número de ítems visibles.

4. Text area

Su etiqueta es <textarea>. Representa el espacio donde puedes añadir todo el texto que requieras y puede tener los siguientes atributos:

Cols: número de columnas visibles.

Name: nombre del campo.

Rows: número de líneas visibles.

5. Fieldset

Fieldset es un elemento que sirve para agrupar varios datos relacionados entre sí mismos. Su etiqueta es <fieldset>. Por ejemplo, si necesitas varios campos personales en un formulario, puedes agruparlos con este campo como en el siguiente ejemplo:

<fieldset><label for="nombre">Nombre</label><input type="text" id="nombre"/><label for="apellido paterno">Apellido paterno</label><input type="text" id="apellido paterno"/><label for="apellido materno">Apellido materno</label><input type="text" id="apellido materno"/></fieldset>

6. Legend

Legend es un elemento que sirve para etiquetar o identificar una agrupación de campos. Su etiqueta es <legend>.

<fieldset><leyend>Introduce tu nombre y apellidos</leyend><label for="nombre">Nombre</label><input type="text" id="nombre"/><label for="apellido paterno">Apellido paterno</label><input type="text" id="apellido paterno"/><label for="apellido materno">Apellido materno</label><input type="text" id="apellido materno"/></fieldset>

Con estos elementos tus formularios lucirán mejor y mejorarán su usabilidad, con lo cual los usuarios se sentirán más cómodos.

Cómo hacer un formulario HTML

1. Usa PHP para crear tu página.

2. Añade el código.

3. Habilita el envío del formulario a un correo electrónico.

4. Especifica el destino del formulario HTML.

1. Usa PHP para crear tu página

Al momento de crear tu página web en donde habilitarás tu formulario, en lugar de utilizar la extensión .html, escribe .php. Al hacer esto, el servidor sabrá alojar el PHP que escribas, en vez de guardar la página HTML vacía. Agrega un nombre como "formulariodecontacto.php". Una vez creada y guardada, podrás comenzar a desarrollar tu formulario.

2. Añade el código

En este paso debes escribir el código HTML para crear el formulario. Para hacerlo, utiliza las etiquetas y atributos que te compartimos anteriormente. Te compartimos un código de formulario básico:

Con este formulario podrás solicitar el nombre y correo electrónico del usuario, el área que le interesa contactar, la razón por la que te contacta y también le puedes proporcionar un cuadro de texto en blanco para que pueda agregar su mensaje. Incluye un CTA que indica dónde enviar su solicitud. Cópialo y cambia los datos que desees.

<form action="contact.php" method="post"> <div class="elem-group"> <label for="name">Nombre</label> <input type="text" id="name" name="visitor_name" placeholder="Nombre de ejemplo" pattern=[A-Z\sa-z]{3,20} required> </div> <div class="elem-group"> <label for="email">Correo electrónico</label> <input type="email" id="email" name="visitor_email" placeholder="ejemplo@email.com" required> </div> <div class="elem-group"> <label for="department-selection">Área a contactar</label> <select id="department-selection" name="concerned_department" required> <option value="">Selecciona un área</option> <option value="billing">Facturación</option> <option value="marketing">Marketing</option> <option value="technical support">Servicio al cliente</option> </select> </div> <div class="elem-group"> <label for="title">Motivo de contacto</label> <input type="text" id="title" name="email_title" required placeholder="Problema/Consulta" pattern=[A-Za-z0-9\s]{8,60}> </div> <div class="elem-group"> <label for="message">Solicitud</label> <textarea id="message" name="visitor_message" placeholder="Escribe tu mensaje aquí." required></textarea> </div> <button type="submit">Enviar mensaje</button></form>

3. Habilita el envío del formulario a un correo electrónico

Una vez que realices una vista previa de tu formulario para cerciorarte de que todo aparezca justo como lo deseas, es tiempo de crear las instrucciones para que, cuando el usuario haga clic en "Enviar", el formulario se mande por mensaje de correo electrónico hasta tu bandeja.

Para ello, regresa al inicio de tu código y arriba de él agrega un código más: será el que habilite esta acción. Copia y pega el siguiente código:

<?phpif($_POST["message"]) {mail("your@email.address", "Here is the subject line",$_POST["insert your message here"]. "From: an@email.address");}?>

Recuerda cambiar los datos por tu información de contacto para que así el formulario llegue directamente a tu bandeja de entrada. Te explicamos la función de este código de manera desglosada: "mail" envía el formulario completo como un correo electrónico a "your@email.address" (el correo electrónico que elijas para recibir los formularios); lo que sigue en el código es la línea de asunto. En el párrafo siguiente posterior puedes escribir "copia del mensaje de correo electrónico" y se enviará desde la dirección de correo que escojas.

Al final, tu código debe lucir de manera similar a la imagen:

Una vez que se envía el formulario, llegarán los datos por automático. De esta manera, ya habrás creado un formulario básico para tu sitio web.

4. Especifica el destino del formulario HTML

De acuerdo con Mozilla, el atributo action especifica a qué archivo de script deben enviarse los datos del formulario para su procesamiento.

La etiqueta de este atributo es <form action="url-destino"> ... </form>. En el siguiente ejemplo, podemos ver cómo se vería esta etiqueta:

<form action="envio.php" method="GET"><label for="nombre">Nombre</label><input type="text" id="nombre" name="nombre"/><label for="apellido">Apellido</label><input type="text" id="apellido" name="apellido"/><button id="envio">Enviar Formulario</button></form>

Al utilizar el atributo method GET, obtendríamos una URL de destino que incluye los parámetros del formulario en su estructura.

Ten en cuenta que el código HTML puede ser complejo, sobre todo si no cuentas con experiencia en programación. Por lo tanto, puedes optar por otra forma de hacer tu formulario. El Creador gratuito de formularios online de HubSpot cumple con estas y más funciones especializadas en los negocios. Lo mejor es que con su ayuda tus formularios tendrán una mejor apariencia y te olvidarás de las configuraciones complicadas:

3 ejemplos de formularios en HTML

Veamos algunos ejemplos de formularios HTML para que conozcas el tipo de apariencia que obtendrías con el código:

1. Ejemplo de formulario HTML de información personal

Este ejemplo de formulario HTML muestra pocos campos y está enfocado en recolectar la información básica personal de un usuario. Es adecuado para los sitios web que requieren datos demográficos, ya sea de sus suscriptores, leads o clientes.
Imagen de Geeks for geeks
2. Ejemplo de formulario HTML para el ingreso de usuario

Este formulario HTML permite a los usuarios del servicio Novell entrar a su cuenta, no sin antes especificar información como su nombre en la plataforma, contraseña, ciudad, servidor web, rol en la empresa donde trabajan y la casilla de inicio de sesión único.

3. Ejemplo de formulario HTML de satisfacción del cliente
Imagen de Novell
Este formulario está enfocado en la retroalimentación del cliente para conocer las emociones relacionadas con su experiencia y su nivel de satisfacción con un servicio. Además, permite dejar más comentarios para que puedan conocer su opinión a detalle.

Ahora que conoces lo básico para hacer un formulario HTML, tómate el tiempo necesario para comprender su funcionamiento y creación. Como lo mencionamos, el uso de código puede ser complejo, pero con un poco de práctica y consejos, podrás estar realizando formularios personalizados.
Imagen de W3 Si te interesa aprender más sobre el código HTML y CSS, te recomendamos nuestra guía básica enfocada en los profesionales de marketing.

# data[].attributes.attachment_link.title
Cómo crear un formulario en HTML (con ejemplo)

# data[].attributes.attachment_link.description
Conoce qué es un formulario HTML, sus elementos y la manera de estructurarlos, así como los pasos para crear un formulario básico y ejemplos.HTML

# data[].attributes.body
Practica Arelys Benitez Tercero "A" Informatica

# data[].attributes.body
Arelys Benitez

# data[].attributes.body
Practica 2

# data[].attributes.body
Naomi Cabezas

# data[].attributes.body
Naomi Cabezas