HTML
fieldset, legend, output, progress y meter
Elementos HTML para agrupar controles, nombrar conjuntos y representar resultados, progreso y mediciones con significado nativo.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
HTML
Elementos HTML para agrupar controles, nombrar conjuntos y representar resultados, progreso y mediciones con significado nativo.
<fieldset>
<legend>Método de contacto</legend>
...
</fieldset>Agrupa controles que responden a una misma pregunta o comparten contexto.
Es especialmente útil para:
Debe ser el primer hijo de fieldset.
<fieldset>
<legend>Dirección de envío</legend>
...
</fieldset>Proporciona el nombre del grupo. No reemplaza los labels individuales.
<fieldset disabled>
<legend>Datos empresariales</legend>
...
</fieldset>Deshabilita controles descendientes, con reglas especiales para contenido dentro del primer legend.
Los valores disabled normalmente no se envían.
El estilo predeterminado no define su propósito. Si solo necesitas un borde visual sin relación de controles, utiliza un contenedor genérico y CSS.
<form oninput="total.value = Number(price.value) * Number(quantity.value)">
<label for="price">Precio</label>
<input id="price" name="price" type="number" value="0">
<label for="quantity">Cantidad</label>
<input id="quantity" name="quantity" type="number" value="1">
<output name="total" for="price quantity">0</output>
</form>Representa el resultado de un cálculo o acción del usuario.
for contiene IDs de controles que participan en el cálculo. No realiza el cálculo automáticamente.
<label for="total">Total</label>
<output id="total" name="total" for="price quantity">$0</output>Aunque output puede recibir relaciones, un texto visible ayuda a comprender qué representa.
output es form-associated, pero no se comporta como un control submittable ordinario en el form data set. Si el servidor necesita el valor, calcúlalo de nuevo o usa un control apropiado.
Nunca confíes en un total calculado por el cliente como precio final.
<label for="upload-progress">Carga del archivo</label>
<progress id="upload-progress" value="40" max="100">40%</progress>Representa progreso de una tarea.
value ausente: progreso indeterminado.value presente: progreso entre 0 y max.<progress max="100">Cargando...</progress>No representa una medida estática como uso de almacenamiento; para eso existe meter.
El texto interno ayuda en entornos sin soporte, pero no sustituye siempre un nombre visible.
Actualiza también texto cercano si el porcentaje es importante.
<label for="storage">Almacenamiento usado</label>
<meter
id="storage"
min="0"
max="100"
low="60"
high="85"
optimum="30"
value="72"
>
72%
</meter>Representa una medida escalar dentro de un rango conocido:
No representa progreso temporal de una tarea.
Permiten indicar zonas del rango y cuál es preferible.
El color visual depende del navegador/estilos. No comuniques estado únicamente por color:
<p>Uso de almacenamiento: alto, 87%.</p>No uses meter para valores sin máximo conocido o para cualquier estadística aislada.
<meter value="1200">1200 visitas</meter>Sin rango significativo, un texto normal es más correcto.
<fieldset>
<legend>Presupuesto</legend>
<label for="budget">Disponible</label>
<input id="budget" name="budget" type="number" min="0">
<label for="spent">Gastado</label>
<input id="spent" name="spent" type="number" min="0">
<p>
Restante:
<output id="remaining" for="budget spent">$0</output>
</p>
</fieldset>El servidor debe recalcular el resultado con datos confiables.
¿Cuál es la diferencia entre progress y meter?
Progress representa cuánto ha avanzado una tarea; meter representa una medida actual dentro de un rango conocido.
Validación nativa explica constraints, estados y mensajes del navegador.