¿Qué son y cómo Crear FORMULARIOS en HTML?

El elemento <form>

El elemento HTML <form> define un formulario que se utiliza para recopilar información por parte del del usuario

See the Pen HTML | 2.1 - Formularios - input text by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El elemento <input>

El elemento <input> es el elemento más importante de los formularios.

El <input> se puede mostrar de varias maneras, según el atributo type.

Text input

El input de tipo text define un campo de texto de una sóla línea.

See the Pen HTML | 2.1 - Formularios - input text by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Radio button input

El type radio define un radio button. Que permite a los usuarios seleccionar UNA entre un número de opciones.

See the Pen HTML | 2.1 - Formularios - radio button by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El botón de submit

El type submit define un botón para el envío de los datos del formulario al form-handler (el que se encarga de procesar los datos).

See the Pen HTML | 2.1 - Formularios - submit button by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo action

El atributo action define la acción a realizar cuando se envía el formulario.

Normalmente, los datos del formulario se envían a una página web en el servidor cuando el usuario hace clic en el botón Enviar.

<form action="/form-handler.php">

El atributo target

El atributo target especifica si cuando se envíe el formulario el resultado se verá en una nueva pestaña del navegador, o se quedará en la actual. Por defecto el valor es “_self”.

<form action="/form-handler.php" target="_blank">

El atributo method

El atributo method especifica el método HTTP (GET o POST) que se va a usar cuando se envíen los datos

<form action="/form-handler.php" method="get">

<form action="/form-handler.php" method="post">

¿Cuándo usar GET?

Este es el método por defecto. Cuando se usa este método los datos serán visibles en la URL de la página de envío.

/form-handler.php?firstname=Kiko&lastname=Palomares

  • Agrega los datos del formulario a la URL en forma de nombre / valor
  • La longitud de una URL es limitada (2048 caracteres)
  • No se tiene que usar GET para datos confidenciales
  • GET es mejor para datos no seguros, como para buscadores

¿Cuándo usar POST?

Siempre que haya datos confidenciales hay que usar POST. Este método no muestra la información en la URL y no tiene limitación de tamaño.

El atributo name

Cada input debe tener un atributo name para que los datos se manden. Si no tiene los datos de ese input no se mandarán.

See the Pen HTML | 2.1 - Formularios - input text by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Agrupar datos con fieldset

El elemento <fieldset> se usa para agrupar datos relacionados en un formulario.

El elemento <legend> define el título del <fieldset>

See the Pen HTML | 2.1 - Formularios - fieldset by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Lista de atributos del <form>

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.