Base de Creación de Formularios

El elemento HTML <form> es un elemento fundamental para crear formularios interactivos en una página web. Sirve de contenedor para todos los elementos del formulario. Veamos un ejemplo de formulario básico:

Nota

Todos los ejemplos tienen el siguiente atributo onsubmit="return false". Este atributo en los ejemplos evita que el formulario envíe una petición por defecto. Se utiliza aquí con fines de demostración para centrarse en la creación de formularios y atributos, pero este curso tiene otros enfoques.

Explicación de los atributos del formulario

• name proporciona un identificador distinto para el formulario en una página web. Tanto el servidor como el cliente utilizan este identificador para procesar los datos del formulario. El nombre del formulario puede incluir números, guiones bajos, guiones y caracteres del alfabeto inglés, pero no debe contener espacios;
• autocomplete determina si los navegadores web pueden rellenar los campos del formulario automáticamente. Puede activarse o desactivarse y aplicarse a elementos individuales del formulario;
• novalidate especifica que los navegadores no deben realizar la validación de los campos del formulario. Esto puede ser útil cuando se desea manejar la validación manualmente usando JavaScript;
• method especifica el método HTTP utilizado para enviar los datos del formulario al servidor. Los dos métodos más comunes son GET y POST. Este tema se tratará en profundidad en el curso de JavaScript.

El formulario incluye los siguientes elementos:

• El elemento <input> permite a los usuarios introducir diferentes tipos de datos, como texto, números, fechas, etc. En este ejemplo, usamos type="email" para el campo email y type="password" para el campo password;
• El elemento <label> ayuda a organizar y estructurar el formulario. También proporciona una etiqueta para cada campo de entrada, indicando de qué es responsable;
• El elemento <button> con type="submit" se utiliza para enviar los datos del formulario al servidor cuando se hace clic en él. Por defecto, cuando se pulsa el botón de envío, los datos de las entradas se envían al servidor y la página web se recarga. Sin embargo, este comportamiento puede anularse utilizando JavaScript.

Nota

Cuando un usuario pulsa <button type="submit">, todos los datos de las entradas se envían al servidor, y se recarga la página web. Es el comportamiento por defecto.