¿De qué trata esta lección?
En esta lección crearemos formularios HTML y conoceremos algunos elementos propios de los formularios. La lista de los elementos del formulario a continuación no estará completa, pero te ayudará a entender cómo funciona y aprender más de forma autónoma. Sin código, los formularios realmente no funcionan y por ahora solo creamos una superficie. Posteriormente, agregaremos algunos JavaScript y atributos necesarios al usar scripts.

Nuevas etiquetas HTML:
<form> </form> - esta etiqueta se utiliza para envolver los elementos que pertenecen a un formulario HTML. Los datos recopilados en un formulario pueden enviarse a evaluación de una vez.

<input> - esta etiqueta se utiliza para más elementos de formulario:

• type=”text” – el resultado es un cuadro de texto, se utiliza para obtener un texto más corto.
• type=”password” – el resultado es un cuadro de texto, que no muestra el texto escrito en él, perfecto para las contraseñas.
• type=”radio” – el resultado es un botón de radio, utilizado en grupo es perfecto para seleccionar una o más opciones. 
• type=”checkbox” – el resultado es una casilla de verificación, utilizada en un grupo puede ayudar a seleccionar más de una opción.
• type = " number": este elemento encierra su valor, en un intervalo.
• type = "submit": el resultado es un botón, se usa para enviar el contenido del formulario.
• type = "reset": el resultado es un botón, se usa para restablecer el estado inicial del formulario.

Hay tipos de entrada separados para correos electrónicos, elección de fecha y color, etc.
<label> </label>: esta etiqueta define una etiqueta para un elemento <input>. Por ejemplo, si lo usamos en las casillas radio / de verificación, cuando queremos marcar una opción, no necesitamos hacer clic en las casillas radio / de verificación en sí, podemos hacer clic en su etiqueta y se marcará.
<fieldset> </fieldset> - esta etiqueta se utiliza para agrupar visiblemente (con un cuadro) los elementos del formulario.
<legend> </legend> - esta etiqueta se usa para agregar un texto o una etiqueta al grupo creado para el <fieldset>.
<select> </select> - esta etiqueta se usa para agrupar las opciones de una lista desplegable.
<option> </option> - esta etiqueta marca una opción para agregar a una lista desplegable.

Nuevos atributos:

placeholder – este atributo se usa para agregar una breve descripción de texto a un cuadro de texto. Este texto desaparece, cuando completamos el cuadro de texto.
value – este atributo se utiliza para agregar un valor de código a un elemento. Por ejemplo, el valor de un cuadro de texto es el texto escrito en él, pero podemos agregar un valor como predeterminado con la propiedad value. Entonces, si enviamos el contenido del formulario, se envía un valor, incluso si presionamos el botón enviar.
required – este atributo se puede usar para forzar al usuario a completar un elemento de formulario.
pattern – Podemos definir con esta propiedad la forma deseada de los datos requeridos para el elemento de formulario.

Ex. [a-z]{1,10} significa un máximo de 10 letras por palabra usando letras minúsculas.

title – Con esta propiedad podemos agregar un comentario al elemento de formulario. Podemos usar esta propiedad para explicar el patrón que deben tener los datos.
maxlength – podemos agregar un límite superior al número de caracteres que se escribirá en un cuadro de texto.
name – Cada elemento de formulario puede tener un nombre, estos son principalmente importantes para ser referidos desde el código del programa. Excepto en el caso del botón de opción, donde los botones con el mismo nombre, pueden tener solo uno seleccionado.
checked - esta propiedad se utiliza para marcar el botón de opción o la casilla de verificación que se debe marcar al inicio.

Guía para etiquetas:
La etiqueta se refiere a la entrada por id.

<input id = "check1" type = "checkbox”> <label for = "check1”> Haga clic aquí </label>

Si intentas introducir código observarás que puedes marcar la casilla de verificación haciendo clic en el texto Haga clic aquí y no necesariamente haciendo clic en la propia casilla de verificación.

Guía – validación de datos:

Los formularios se utilizan para recopilar datos del usuario: una vez completado, el contenido de los formularios debe enviarse al servidor web, que alberga nuestra página web. Allí todas las respuestas se pueden almacenar juntas en una base de datos. Podemos reaccionar a los datos introducidos en el formulario localmente en el navegador, principalmente mediante la validación de datos. Es importante enviar datos correctos al servidor.

Ejemplo para validación:

• Podemos ver si el correo electrónico contiene los caracteres @ y .
• al cambiar las contraseñas, el usuario debe introducir la contraseña dos veces y podemos compararlas localmente, no es necesario enviarlas al servidor para informar de un error.

Etc.

Capas de validación:

• Para asegurar la exactitud de los datos, tenemos que elegir el mejor elemento de entrada para los datos, sin dejar lugar a errores. Ej. Hay un elemento de entrada para las fechas, que garantiza que la forma de la fecha sea correcta; no es necesario que lo verifiquemos más adelante.
• El siguiente nivel es buscar errores al usar JavaScript después de presionar el botón enviar. Con JavaScript podemos manejar los errores en el navegador y enviar mensajes de error al usuario antes de enviar los datos al servidor. Ahorramos tiempo y recursos de esta manera.
• El último nivel está en el servidor antes de guardar datos definitivamente. Si encontramos un error, debemos enviar un mensaje de error desde el servidor. Este curso no cubre este nivel.

Ejemplo usando elementos de formulario:



En el formulario de arriba puedes observar el uso de algunos elementos de formulario.
El borde gris se agrega automáticamente al <fieldset>.
Las referencias de formato de CSS de los elementos del formulario pueden diferir un poco, podemos usar clases, pero hay un ejemplo de formateo sin clase.
El primer grupo de configuraciones marcadas con el símbolo * se aplica a cada elemento, si no hay otra configuración aplicada más adelante.
El valor del botón de envío aparece en él como título.

Ejemplo de primera capa de validación - propiedades:


Al construir un formulario en HTML, podemos tomar medidas para garantizar que nuestros datos sean correctos:

• Required se agrega al primer cuadro de texto, por lo tanto, si no lo rellenamos antes de enviar los datos, el texto Please fill out this field aparecerá y los datos no serán enviados.
• El segundo cuadro de texto tiene una longitud máxima definida. No podemos escribir más de 15 caracteres en él, no aparecerá ningún mensaje de error.
• La propiedad pattern (patrón) define una forma de 1 a 15 dígitos. Con el atributo title (título) podemos definir el texto que debería aparecer para ayudar al usuario.
• Si agregamos el mismo nombre a más botones de radio, solo se puede seleccionar uno de ellos.

Ejemplo de primera capa de validación - seleccionando el elemento adecuado:

• 
  Para compilar los datos necesarios debemos usar los elementos de formulario correctos:
  Si queremos que se comprima un recuento de artículos en un intervalo, podemos usar <input type = ”number”> - ver el ejemplo.
  Si necesitamos datos de texto, pero tenemos los valores posibles, podemos proporcionarle una lista al usuario, para evitar posibles errores de escritura.
  Si queremos una fecha, podemos usar <input type = "date"> para asegurarnos de que la fecha tenga la forma adecuada.