Formularios

Para que la gente escriba, elija y envíe datos.

<form>: El formulario.

<label>: La etiqueta de un campo.

<input>: Un campo de una línea.

<button>: Un botón.

  • Para que la gente escriba, elija y envíe datos. Cada campo necesita su <label>: sin ella, un lector de pantalla no sabe qué se pide. Los type de <input> están en el grupo siguiente.
  • Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
  • Esencial. El formulario: agrupa los campos y los envía a action con el método method (get o post).
  • Valores: action, method, novalidate, autocomplete
  • Esencial. La etiqueta de un campo. Se une a él con for igual al id del campo (o envolviéndolo). Al pulsar la etiqueta, el cursor va al campo.

Introducción

Para que la gente escriba, elija y envíe datos. Cada campo necesita su <label>: sin ella, un lector de pantalla no sabe qué se pide. Los type de <input> están en el grupo siguiente.

Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.

<form>

Esencial. El formulario: agrupa los campos y los envía a action con el método method (get o post).

Valores: action, method, novalidate, autocomplete

<label>

Esencial. La etiqueta de un campo. Se une a él con for igual al id del campo (o envolviéndolo). Al pulsar la etiqueta, el cursor va al campo.

<input>

Esencial. Un campo de una línea. Lo que hace depende de type: texto, correo, número, fecha, casilla… Es un elemento vacío. name es el nombre con el que se envía.

Valores: type, name, value, placeholder, required, min, max, pattern, autocomplete, disabled

<button>

Esencial. Un botón. Dentro de un formulario envía (type="submit", el valor por defecto); con type="button" no hace nada hasta que le pones JavaScript. Para ir a otra página, usa un enlace.

Valores: type (submit, button, reset), disabled

<textarea>

Esencial. Un campo de texto de varias líneas: comentarios, mensajes.

Valores: rows, cols, maxlength, placeholder

<select>

Esencial. Una lista desplegable de opciones. Con multiple se pueden elegir varias.

<option>

Esencial. Una opción de <select> o de <datalist>. value es lo que se envía; selected, la elegida al empezar.

<optgroup>

Agrupa opciones de un <select> bajo un título (label).

<datalist>

Sugerencias para un <input> (se une con list): se puede elegir una o escribir otra cosa.

<fieldset>

Esencial. Agrupa campos relacionados con un título (<legend>). Imprescindible para un grupo de botones de opción.

<legend>

Esencial. El título de un <fieldset>. Va el primero dentro de él.

<output>

El resultado de un cálculo o de una acción.

<progress>

El avance de una tarea (una subida, un cuestionario). Sin value, indica que algo está en marcha.

<meter>

Una medida dentro de un rango conocido: espacio usado, nivel de batería, nota. No es un progreso.

Valores: value, min, max, low, high, optimum

Referencia de HTML
07

Formularios

Para que la gente escriba, elija y envíe datos.

Código del tema: <form action="#" method="post">

📘 Teoría

Introducción

Para que la gente escriba, elija y envíe datos. Cada campo necesita su <label>: sin ella, un lector de pantalla no sabe qué se pide. Los type de <input> están en el grupo siguiente.

Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.

<form>

1

Esencial. El formulario: agrupa los campos y los envía a action con el método method (get o post).

2

Valores: action, method, novalidate, autocomplete

<label>

Esencial. La etiqueta de un campo. Se une a él con for igual al id del campo (o envolviéndolo). Al pulsar la etiqueta, el cursor va al campo.

<input>

Esencial. Un campo de una línea. Lo que hace depende de type: texto, correo, número, fecha, casilla… Es un elemento vacío. name es el nombre con el que se envía.

Valores: type, name, value, placeholder, required, min, max, pattern, autocomplete, disabled

<button>

Esencial. Un botón. Dentro de un formulario envía (type="submit", el valor por defecto); con type="button" no hace nada hasta que le pones JavaScript. Para ir a otra página, usa un enlace.

Valores: type (submit, button, reset), disabled

<textarea>

1

Esencial. Un campo de texto de varias líneas: comentarios, mensajes.

2

Valores: rows, cols, maxlength, placeholder

<select>

Esencial. Una lista desplegable de opciones. Con multiple se pueden elegir varias.

<option>

Esencial. Una opción de <select> o de <datalist>. value es lo que se envía; selected, la elegida al empezar.

<optgroup>

Agrupa opciones de un <select> bajo un título (label).

<datalist>

Sugerencias para un <input> (se une con list): se puede elegir una o escribir otra cosa.

<fieldset>

Esencial. Agrupa campos relacionados con un título (<legend>). Imprescindible para un grupo de botones de opción.

<legend>

Esencial. El título de un <fieldset>. Va el primero dentro de él.

<output>

El resultado de un cálculo o de una acción.

<progress>

El avance de una tarea (una subida, un cuestionario). Sin value, indica que algo está en marcha.

<meter>

1

Una medida dentro de un rango conocido: espacio usado, nivel de batería, nota. No es un progreso.

2

Valores: value, min, max, low, high, optimum

🕹️ Practica

Referencia interactiva Ejemplos editables: Formularios Abrir en pantalla completa

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com