Formulario HTML

Tu primer formulario

Este artículo le proporciona su primera experiencia en la creación de un formulario web, incluido el diseño de un formulario simple, implementándolo utilizando los controles de formulario HTML correctos y otros elementos HTML.

¿Qué son los formularios web?

Formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios ingresar datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento o usado en el lado del cliente para actualizar inmediatamente la interfaz de alguna manera, (por ejemplo, agregar otro elemento a una lista, o mostrar u ocultar una función de interfaz de usuario).

El HTML de un formulario web está compuesto por uno o más controles de formulario ( a veces llamado widgets), más algunos elementos adicionales para ayudar a estructurar la forma general — a los que a menudo se les conoce como Formularios HTML.
Los controles pueden ser campos de texto de una o varias líneas, cuadros desplegables, botones, casillas de verificación o botones de radio, y se crean principalmente utilizando el <input> elemento, aunque también hay otros elementos sobre los que aprender. Los controles de formulario también se pueden programar para aplicar formatos o valores específicos que se ingresarán (validación de formulario), y emparejado con etiquetas de texto que describen su propósito tanto para usuarios videntes como para discapacitados visuales.

HTML-CSS-JavaScript

Diseñando tu formulario

Antes de comenzar a codificar, siempre es mejor dar un paso atrás y tomarse el tiempo para pensar en su formulario. Diseñar una maqueta rápida (en papel) lo ayudará a definir el conjunto correcto de datos que desea pedirle a su usuario que ingrese. Desde el punto de vista de la experiencia del usuario, es importante recordar que cuanto mayor sea su forma, más se arriesgará a frustrar a las personas y perder usuarios. Manténgalo simple y manténgase enfocado: solicite solo los datos que necesita absolutamente.

HTML-CSS-JavaScript

Aprendizaje activo: implementación de nuestro formulario HTML

Utilizaremos los siguientes elementos HTML: <form>, <label>, <input>.

El elemento <form>

Todos los formularios comienzan con un elemento como este:<form>,

<form action = ".." method ="post" >,.......</form>,

Este elemento define formalmente un formulario. Es un elemento contenedor, pero específicamente para contener formularios; También admite algunos atributos específicos para configurar la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos el action = ".." y method = ".." atributos:

El atributo action: indica la ubicación del programa que procesará la información enviada por el navegador, cuando el formulario sea despachado. Este programa está escrito en cualquier lenguaje del lado servidor y se supone que esté preparado para recibir y procesar los datos del formulario.

Por otra parte, el atributo method: indica cómo debe el navegador adjuntar los datos del formulario a la petición. Es recomendable usar el método "POST" debido a que éste oculta la información enviada y permite la transmisión de datos binarios. Sin embargo, algunas situaciones específicas pueden requerir el uso del método GET.

Nota: Le voy colocar un link para que investiguen cómo funcionan esos atributos al final del artículo.

HTML-CSS-JavaScript

Siguiendo con el formulario

Por ahora, agregue lo anterior el elemento <form> en tu HTML <body>. Vamos agregar un elemento <ul>dentro del elemento <form>. Como no tiene estilo con CSS, la lista desordenada <ul> lo va organizar mejor al formulario. Para mi tiene más sentido utilizar las listas UL que las etiqueta <br>, en los formularios.

<body>

<form action =".." method ="post" >

<ul>

<li> ..........................</li>

</ul>

</form>

</body>

Agreguemos los elementos <label>, dentro del elemento <form>, vamos agregar 4 label. El primero para el nombre, el segundo apellido, el tercero el e-mail y cuarto password. El <label>, es un elemento utilizado para proveer una etiqueta a los controles del formulario.

<body>

<form action = ".." method = "post" >,

<ul>

<li> <label for = ""> Nombre</label> <li>

<li> <label for =""> Apellido</label> <li>

<li> < label for =""> e-mail</label> <li>

<li> <label for = ""> password</label> <li>

</ul>

</form>

</body>

En el siguiente paso sería agregar el elemento <input> para este formulario.
Inputs, son el principal elemento, el más importante, específica que campo es de entrada y permite que el usuario pueda ingresar datos.
Estos son algunos de los valores, al final del artículo le describo los demás.

<input type = ”text”>: es el valor por defecto si no definimos un type que describa el tipo de input que vamos a escribir. Especifica que el input aceptará valores de texto (valen números, letras y caracteres especiales como “@”, “-“, etc.).

<input type = ”number”>:especifica un input que solamente aceptará valores numéricos.

<input type = ”password”>: especifica un input de password, los valores introducidos no se mostrará por pantalla, en su lugar, se verán caracteres como: •••••.

<body>

<form action = ".." method = "post" >,

<ul>

<li> <label for = ""> Nombre</label>

<input type ="text" name ="nombre" placeholder ="Ingrese su nombre" ></li>

<li> <label for =""> Apellido</label>

<input type ="text" name ="apellido" placeholder ="Ingrese su apellido" ></li>

<li>< label for =""> e-mail </label>

<input type ="text" name ="e-mail" placeholder ="Ingrese su e-mail" ></li>

<li> <label for = ""> password</label>

<input type = "password" > </li>

</ul>

</form>

</body>

Un Placeholder es, ni más ni menos, que un elemento provisorio, también llamado dummy. Su función es «rellenar» un espacio que más adelante se reemplazará

El último paso sería Crea el input para enviar el formulario.
input type = ”submit”: hemos preparado varios input del formulario para su envío pero una vez están todos completados ¿Cómo lo enviamos? Para ello, necesitamos crear el famoso input de envío de formulario. El botón de Submit que nos permitirá realizar el envío (es muy común verlo bajo con el texto de “send” o “submit” en inglés o si es en Castellano como “enviar”).

Visual Studio Code

<!DOCTYPE html>
<html lang="es">
<head>
<title> Proyecto mundo <title>
</head>

<body>

<h1> Elemento <form></h1>

<form action =".." method ="post" >,

<ul>

<li> <label for = ""> Nombre</label>

<input type ="text" name ="nombre" placeholder ="Ingrese su nombre" ></li>

<li> <label for =""> Apellido</label>

<inputtype ="text" name ="apellido" placeholder ="Ingrese su apellido" ></li>

<li>< label for =""> e-mail </label>

<inputtype ="text" name ="e-mail" placeholder ="Ingrese su e-mail" ></li>

<li> <label for = ""> password</label>

<input type = "password" > </li>

<li><input type ="submit" value = "enviar"> </li>

</ul>

</form>

</body>

<html>

Copia el código que está dentro de <body> y pegar en Visual Studio Code

El resultado final de mi primer formulario HTML es el siguiente.

Envío de un formulario

En HTML implica enviar los datos ingresados por el usuario en el formulario a un servidor web para su procesamiento adicional.

Para enviar un formulario, el usuario debe hacer clic en el botón de envío, que se define en el formulario como un elemento <input> de tipo submit o <button> de tipo submit. Cuando se hace clic en este botón, se activa un evento de envío en el formulario y se realiza una solicitud POST al servidor web con los datos ingresados por el usuario.

Los datos enviados al servidor se codifican en formato de URL o en formato de objeto JSON. Luego, el servidor puede procesar los datos recibidos y enviar una respuesta al usuario.

Para recibir y procesar los datos enviados por el formulario, el servidor web debe estar configurado para manejar solicitudes POST y tener un script que procese los datos enviados. Por ejemplo, si el formulario se envía a una página PHP, se puede usar el lenguaje PHP para procesar los datos y almacenarlos en una base de datos o enviar una respuesta al usuario.

En resumen, enviar un formulario implica enviar los datos ingresados por el usuario al servidor para su procesamiento adicional, lo que requiere que el servidor web esté configurado para manejar solicitudes POST y tenga un script para procesar los datos enviados.

Controles

Como mencionamos antes, el elemento <form> es simplemente un contenedor para muchos otros elementos, que en su mayoría representan una amplia gama de controles. Estos controles se listan a continuación:

<button>: un botón que, cuando es presionado, puede llevar a cabo diferentes acciones dependiendo de su atributo type.

Sus variantes son:
submit: envía el formulario al agente procesador.
reset: restaura todos los controles en el formulario a sus valores iniciales.
menu: muestra un menú.

<fieldset>: agrupa temáticamente a un conjunto de controles.

<keygen:>: un control usado para generar un par de llaves pública/privada.

<label>: un elemento utilizado para proveer una etiqueta a los controles del formulario.

<object>: un objeto que representa una imagen, que puede ser usado como un mapa de imagen del lado cliente.

<output>: un elemento usado para mostrar el resultado de un cálculo llevado a cabo por la página, o el resultado de la acción de un usuario, basada en los controles del formulario.

<select>: un control usado para seleccionar una o más opciones de una lista.

<textarea>: un control usado para ingresar un trozo de texto que consta de una o más líneas.

<img>: una imagen que puede ser usada como un mapa de imagen del lado cliente.

<input>: uno de muchos controles de acuerdo al valor del atributo type.

Éstos son: type = valor
text: un control usado para la entrada de una sola línea de texto.
hidden: un control oculto utilizado para enviar información al servidor, típicamente manejado por programas.
search: igaul a text pero con fines de búsqueda.
tel: un control usado para proveer un número de teléfono.
url: una caja de texto usada para el ingreso de un único URL absoluto.
email: un control diseñado para editar una o más direcciones de e-mail.
password: una caja de texto para la edición de contraseñas, donde los caracteres son representados por puntos.
datetime: un control para ingresar una fecha y hora global específica.
date: un control para ingresar una fecha específica.
month: un control para ingresar un mes específico.
week: un control para ingresar una semana específica.
time un control para ingresar una hora específica.
number: un control para ingresar un número.
range: un control para ingresar uno o dos números dentro de un rango.
color: un control para ingresar un color.
checkbox: un control para ingresar un valor booleano (verdadero/falso).
radio: un control para elegir una única opción entre varias.
file: un control usado para subir archivos al servidor.
submit: un botón usado para enviar el formulario.
image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la apariencia predeterminada de los botone
reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
button: un botón sin una acción predeterminada asociada.

Cuando se utilizan apropiadamente, en especial desde que HTML5 comenzó a ser adoptado, los formularios son una herramienta poderosa que permiten a los autores no solamente recolectar información muy valiosa de los usuarios, sino también desarrollar complejas aplicaciones, capaces de recolectar y procesar información muy específica en muchas formas diferentes.

Para finalizar este articulo también le mencionare, el Atributos target del elemento <form>

Target: nos permite especificarle al navegador dónde mostrará el resultado del proceso / la respuesta que se recibe después de enviar el formulario. Tenemos varias opciones, las principales son:

_blank: Abrirá otra pestaña del navegador con el resultado del envío.
_self: mostrará el resultado del envío del formulario en la actual pestaña del navegador. Por tanto, el resultado será el mismo que con _blank pero en la pestaña actual (No abrirá otra).
_parent: muestrá el resultado en el FRAMESET padre, actualmente ya no se recomienda trabajar con FRAMESET por lo que están OBSOLETOS.
_top: Es el valor que usaremos al cargar una página externa. Utiliza todo el espacio de la ventana del navegador destruyendo toda la estructura de FRAMESETS (OBSOLETO ya que como con _parent, los FRAMESET están obsoletos).

Conclusión: Conclusión Muchas gracias a todos por leer el artículo. En el siguiente link van a obtener el conocimientos para el envío de datos del formulario. Te animo fuertemente a leer más artículos relacionados. Espero que este artículo te haya ayudado. Gracias. ¡Feliz Programación.

Visit developer.mozilla.org