Атрибут form тега <meter>
Описание
Атрибут form связывает элемент <meter> с формой, даже если сам элемент находится за пределами формы. Это позволяет управлять элементом вместе с другими элементами формы и отправлять его значение при submit.
<form id="battery-form">
<input type="text" name="device" placeholder="Название устройства">
<button type="submit">Отправить</button>
</form>
<meter
form="battery-form"
name="battery-level"
min="0"
max="100"
value="75">
</meter>
<p>Уровень заряда: 75%</p>
Особенности работы:
| Ситуация | Результат |
|---|---|
| Элемент внутри формы | Автоматически ассоциирован с формой (атрибут не нужен) |
| Элемент вне формы с атрибутом form | Связывается с указанной формой |
| Элемент вне формы без атрибута form | Не связан ни с какой формой |
Рекомендации по использованию:
- Используйте когда нужно визуализировать данные, относящиеся к форме, но разместить элемент вне её структуры
- Убедитесь, что указанный ID формы существует
- Для сложных сценариев можно динамически менять атрибут form через JavaScript
- Сочетайте с атрибутом name для корректной отправки данных
Ограничения и совместимость:
- Поддерживается во всех современных браузерах
- В IE поддерживается с версии 10
- Значение элемента будет включено в FormData при отправке формы
- Не влияет на визуальное отображение элемента
Примечание: Атрибут form полезен при сложной верстке, когда нужно сохранить логическую связь элементов, но нельзя разместить их внутри тега формы. Особенно актуален для интерактивных панелей управления и дашбордов.