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

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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>

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats