Sesión 5

Programación Nivel Básico

Sesión 5:

Fundamentos de
Programación y HTML
Formularios básicos
 Objetivos de la sesión
Al finalizar esta sesión estarás en capacidad de:

01 02 03 04

Capturar información Permitir la interacción Automatizar Mejorar la usabilidad

del usuario con el usuario procesos del sitio web
Los formularios HTML son el medio Los formularios permiten a los Los formularios pueden automatizar Los formularios bien diseñados
principal para recopilar información usuarios interactuar con el sitio tareas como el envío de correos y fáciles de usar mejora la
de los usuarios de un sitio web. Ya sea web y realizar acciones electrónicos, la actualización de bases experiencia del usuario. Una
para realizar una compra, registrarse específicas. Desde enviar de datos o el procesamiento de interfaz intuitiva y clara facilita
en un servicio o participar en una solicitudes de información hasta solicitudes. Al recibir la información la navegación y el envío de
encuesta, los formularios permiten enviar comentarios o realizar del usuario a través de un formulario, información, mejorando la
que los usuarios proporcionen la pedidos, los formularios son el el sitio web puede ejecutar acciones satisfacción del usuario con el
información necesaria de forma puente entre los usuarios y la predefinidas, simplificando los sitio web.
organizada y eficiente. funcionalidad del sitio. procesos y mejorando la eficiencia.
Introducción a los
formularios básicos
de HTML
Los formularios HTML son una herramienta fundamental
para la interacción entre los usuarios y las páginas web.
Permiten a los visitantes de un sitio web enviar
información, como datos personales, opiniones,
solicitudes o cualquier tipo de contenido que se requiera
para un determinado proceso. Los formularios son
esenciales para realizar tareas como registro de usuarios,
envío de formularios de contacto, realización de
encuestas, compra de productos online y muchas otras
funciones cruciales en los sitios web modernos.
Definición y estructura de un formulario
HTML
Un formulario HTML es un conjunto de elementos que
permiten al usuario introducir información y enviarla al
servidor. La estructura básica de un formulario HTML se define
con la etiqueta <form>. Dentro de esta etiqueta, se incluyen
otros elementos de formulario, como campos de texto,
botones de opción, casillas de verificación, áreas de texto y
botones de envío.

La etiqueta <form> tiene varios atributos importantes, como

"action", que especifica la URL del script que procesará los
datos del formulario, y "method", que indica el método HTTP
que se utilizará para enviar los datos. Los métodos más
comunes son "GET" y "POST", cada uno con sus propias
características y ventajas.
Elementos básicos de un formulario HTML
Campos de texto Botones de opción Casillas de verificación
(<input type="text">) (<input type="radio">) (<input type="checkbox">)
Permiten al usuario introducir texto de Permiten al usuario seleccionar una sola Permiten al usuario seleccionar varias
una sola línea, como un nombre, una opción de un grupo. Se utilizan para opciones de un grupo. Se utilizan para
dirección de correo electrónico o una representar opciones mutuamente representar opciones múltiples, como
contraseña. Se pueden utilizar para excluyentes, como un tamaño de intereses, habilidades o preferencias.
capturar información básica del usuario. camiseta o un método de pago.
Ejemplos prácticos de formularios HTML
Un formulario de contacto básico permite a los usuarios
enviar mensajes a un sitio web. Este formulario suele
incluir un campo de nombre, un campo de correo
electrónico y un área de texto para el mensaje. Se puede
utilizar para solicitudes de información, comentarios o
sugerencias.

Un formulario de registro para un sitio web permite a los

usuarios crear una cuenta. Este formulario suele incluir
campos para el nombre de usuario, la contraseña, la
dirección de correo electrónico y otros datos relevantes.
También se pueden incluir campos opcionales para
información adicional del usuario.
 Atributos comunes en los elementos de
formulario
Atributo Descripción

name Nombre del elemento del formulario. Este atributo es esencial para identificar el
elemento al procesar los datos del formulario.

value Valor predeterminado del elemento. Se utiliza para definir el valor inicial del
campo, como el texto inicial en un campo de texto o el valor seleccionado en
un botón de opción.

required Indica que el elemento es obligatorio. El usuario debe completar el campo para
poder enviar el formulario.

placeholder Texto de ayuda que se muestra dentro del campo del formulario. Proporciona una
descripción o un ejemplo del tipo de información que se espera en el campo.

maxlength Define el número máximo de caracteres permitidos en el campo. Este atributo

ayuda a controlar la longitud de la entrada del usuario.
Etiquetas más relevantes
para crear formularios
<form> </form>:
Etiqueta de apertura y cierre de un formulario de una página web.
El resto de etiquetas de formulario deben ir siempre recogidas
entre estas etiquetas de apertura y cierre de formulario.

<fieldset></fieldset>:
Etiqueta que representa un conjunto o agrupación de elementos de
un formulario. «Pinta» un recuadro alrededor de las etiquetas que
estén contenidas dentro del <fieldset>

<legend> </legend>:
Etiqueta ligada a <fieldset>. Indica el título del <fieldset>

<label> </label>:
Se usa para definir el nombre o título de un control del formulario.
Etiquetas más relevantes
para crear formularios
<input>
Añade un campo de introducción de datos para el usuario. Es de las
principales etiquetas de un formulario.

<button> </button>:
Etiqueta utilizada para representar un botón en el formulario.

<select> </select>:
Input que permite una selección entre un conjunto de opciones.

<option> </option>:
Etiqueta ligada a <select>. Permite añadir diferentes opciones al <select>

<textarea> </textarea>:
Añade un campo al usuario para que pueda introducir texto en
unas líneas máximas de texto que el desarrollador puede definir.
 <form action="/my-handling-form-page" method="post">
<ul>
<li>
<label for="name">Nombre:</label>
<input type="text" id="name" name="user_name" />
La </li>

implementación <li>
<label for="mail">Correo electrónico:</label>
de un <input type="email" id="mail" name="user_mail" />

formulario </li>

HTML - 1
<li>
<label for="msg">Mensaje:</label>
De acuerdo, intentemos crear el HTML para
<textarea id="msg" name="user_message"></textarea>
nuestro formulario. Vamos a utilizar los
</li>
elementos HTML siguientes: <form>, </ul>
<label>, <input> y <textarea>. </form>
 <html>
<head>
<title>Prueba de formulario</title>
<meta charset="UTF-8">
</head>
<body>

La <form action="registrardatos.php" method="post">

Ingrese su nombre:
implementación <input type="text" name="nombre" size="20">

de un <br>

formulario Ingrese su clave:

HTML - 2
<input type="password" name="clave" size="12">
<br>
De acuerdo, intentemos crear el HTML para
<input type="submit" value="enviar">
nuestro formulario. Vamos a utilizar los
<input type="reset" value="borrar">
elementos HTML siguientes: <form>,
</form>
<label>, <input>, <textarea> y <botton>.
</body>
</html>
 <html>
<head>
<title>Prueba de formulario</title>
<meta charset="UTF-8">
</head>
<body>
<form action="registrardatos.php" method="post">

La
Ingrese su mail:
<input type="text" name="nombre" size="50">

implementación <br>

de un
Ingrese su clave:
<input type="password" name="clave1" size="12">

formulario <br>

HTML - 3
Repita el ingreso de su clave:
<input type="password" name="clave2" size="12">
De acuerdo, intentemos crear el HTML para
<br>
nuestro formulario. Vamos a utilizar los <input type="submit" value="enviar"
elementos HTML siguientes: <form>, <input type="reset" value="borrar"> >
</form>
<label>, <input>, <textarea> y <botton>.
</body>
La
implementación
de un
formulario
HTML - 4
De acuerdo, intentemos crear el HTML para
que nuestro formulario se vea así:
Validación de formularios HTML
La validación del formulario permite verificar la
información introducida por el usuario antes de enviarla
al servidor. La validación del lado del cliente se realiza
utilizando HTML5 y JavaScript, mientras que la
validación del lado del servidor se realiza utilizando
lenguajes como PHP o Python.

La validación del lado del cliente proporciona una

respuesta inmediata al usuario si los datos introducidos
son inválidos, mientras que la validación del lado del
servidor ofrece una mayor seguridad y control sobre la
información recibida. La combinación de ambas técnicas
es crucial para asegurar la calidad y la seguridad de los
datos recopilados a través de formularios HTML.
Envío y procesamiento de
datos de formularios
Envío del formulario
Cuando el usuario envía un formulario, los datos introducidos se envían al
servidor web. El servidor procesa los datos y realiza las acciones necesarias,
como guardarlos en una base de datos, enviar un correo electrónico o
realizar una determinada operación.

Procesamiento de datos
El servidor web utiliza un lenguaje del lado del servidor, como PHP o Python,
para procesar los datos recibidos del formulario. Este procesamiento puede
incluir la validación de los datos, el almacenamiento en una base de datos, la
generación de una respuesta al usuario o la realización de otras acciones
específicas.

Respuesta al usuario
Después de procesar los datos, el servidor envía una respuesta al usuario.
Esta respuesta puede ser un mensaje de éxito, un error o una redirección a
otra página web. La respuesta debe ser clara y concisa para que el usuario
comprenda el resultado de la acción realizada.
 Recursos y Existen numerosos recursos online que pueden ayudarte a
aprender más sobre formularios HTML y a mejorar tus
material de apoyo habilidades en el desarrollo web. Algunos de los recursos
para formularios HTML más populares incluyen:

• W3Schools: Un sitio web completo con tutoriales,

referencias y ejemplos para aprender HTML, CSS y
JavaScript, incluyendo formularios HTML.
• Mozilla Developer Network (MDN): Un recurso
completo para desarrolladores web, que incluye
documentación detallada sobre formularios HTML,
validación y otros aspectos relacionados.
• Codecademy: Una plataforma online de aprendizaje
interactivo que ofrece cursos gratuitos y de pago sobre
desarrollo web, incluyendo formularios HTML.
• Khan Academy: Una organización sin ánimo de lucro que
ofrece recursos educativos gratuitos sobre una amplia
gama de temas, incluyendo desarrollo web, con
tutoriales sobre formularios HTML.
Conclusión y
recomendaciones finales
Los formularios HTML son una herramienta esencial
para cualquier sitio web que desee interactuar con sus
usuarios. Es fundamental comprender los elementos
básicos de los formularios, la validación y el
procesamiento de datos, así como utilizar los recursos
y el material de apoyo disponibles para mejorar tus
habilidades en el desarrollo web.

A medida que te familiarices con los formularios

HTML, podrás crear sitios web más interactivos y
funcionales, que satisfagan las necesidades de tus
usuarios y mejoren su experiencia en línea.
Ejercicios de práctica
¡Gracias
por ser parte de
esta experiencia
de aprendizaje!