Атрибут name тега <img>
Описание
Атрибут name в теге <img> использовался для присвоения имени изображению, преимущественно для доступа через JavaScript и формы. Устарел в HTML5 - вместо него следует использовать атрибут id.
<img
src="button.png"
alt="Кнопка отправки"
name="submitBtn"
width="100">
Сравнение с современными аналогами:
| Атрибут | Пример | Применение |
|---|---|---|
name (устарел) |
name="image1" |
Доступ через document.images[] |
id |
id="product-image" |
Уникальный идентификатор элемента |
class |
class="thumbnail" |
Группировка элементов |
Современная реализация:
<img
src="product.jpg"
alt="Фото товара"
id="main-product-image"
class="gallery-thumbnail"
width="300">
<script>
// Доступ через id вместо name
const productImage = document.getElementById('main-product-image');
productImage.addEventListener('click', zoomImage);
</script>
Исторический контекст:
- В HTML4 использовался для доступа через коллекцию document.images
- Позволял обращаться к изображениям как window['imageName']
- Использовался в формах для создания "image buttons"
- Заменён более стандартизированными методами DOM
Миграция с name на id:
<!-- Устаревший подход -->
<img src="map.jpg" name="siteMap" alt="Карта сайта">
<script>
const img = document.images['siteMap'];
</script>
<!-- Современный подход -->
<img src="map.jpg" id="site-map" alt="Карта сайта">
<script>
const img = document.getElementById('site-map');
</script>
Ограничения и совместимость:
- Поддерживается в старых браузерах, но не валиден в HTML5
- Не работает с современными методами DOM
- Может конфликтовать с глобальными переменными
- Для форм используйте
<button type="submit">
Примечание: Хотя атрибут name может ещё работать в некоторых браузерах для обратной совместимости, его использование считается плохой практикой. Для нового кода всегда используйте стандартные DOM-методы с id и class.