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