HTML атрибут for | назначение, значения, примеры

Атрибут for — задает уникальный идентификатор, определяемый с помощью атрибута id элемента <input>, с которым следует установить связь.

Тип значения	IDREF — Имя идентификатора
Значение по умолчанию	Нет
Применим к:	<label>
Аналог в CSS	нет

Пример



			<input type="checkbox" id="flag"/><label for="flag"> флаг</label>

Твой код:

Результат:

<br /> <span id="bigDemoCode" title="Пример в большом окне">большой полигон</span> </div> </p></div> <p> <br /> </p> <h3>Заметки</h3> <p>Параметр for необходимо задавать в том случае, когда элемент формы и текст разделены. Если <input> размещается внутри контейнера <label>, то применять параметр for не требуется.</p> <p> </p> <div class="innerTags"> Теги: <a href="/cloud-atributy-HTML/" title="Поиск по тегу атрибуты HTML">атрибуты HTML</a> </div> <div class="innerPageNav"> <div class="innerPageNavNext"> <a href="/html/attributes/frame/">Атрибут frame</a> </div> <div class="innerPageNavPrev"> <a href="/html/attributes/face/">Атрибут face</a> </div> </p></div> </p></div> </div> </div> </div> </section>  </article> </main> <script> document.addEventListener('DOMContentLoaded', function() { const toggleBtn = document.querySelector('.btn-toggle-children'); if (toggleBtn) { toggleBtn.addEventListener('click', function() { const ul = this.previousElementSibling; const isExpanded = this.getAttribute('aria-expanded') === 'true'; ul.classList.toggle('expanded'); this.setAttribute('aria-expanded', !isExpanded); this.textContent = isExpanded ? 'Показать все разделы' : 'Скрыть'; }); } }); </script> <footer id="colophon" class="site-footer" itemscope itemtype="http://schema.org/WPFooter"> <div class="container"> <div class="footer-grid">  <div class="footer-col"> <div class="footer-title">О проекте MpBox</div> <p class="footer-desc"> Профессиональный справочник по HTML, CSS и JavaScript. Мы помогаем разработчикам создавать быстрые, семантически верные и адаптивные сайты. </p> <div class="social-links">  </div> </div>  <div class="footer-col"> <div class="footer-title">Разделы справочника</div> <ul class="footer-menu"> <li><a href="/learn/html/">HTML Справочник</a></li> <li><a href="/learn/css/">CSS Справочник</a></li> <li><a href="/learn/js/">JavaScript (JS)</a></li> <li><a href="/html-and-css-tricks/">Приемы верстки</a></li> </ul> </div>  <div class="footer-col"> <div class="footer-title">Инструменты</div> <ul class="footer-menu"> <li><a href="/services/">Онлайн сервисы</a></li> <li><a href="/terms/terms-A/">Словарь терминов</a></li> <li><a href="/training/">Уроки для новичков</a></li> <li><a href="/site-map/">Карта сайта</a></li> </ul> </div>  <div class="footer-col"> <div class="footer-title">Информация</div> <ul class="footer-menu"> <li><a href="/about/">О нас</a></li> <li><a href="/contacts/">Контакты</a></li> <li><a href="/privacy-policy/">Политика конфиденциальности</a></li> </ul> </div> </div> <div class="footer-bottom"> <div class="copyright"> © 2009-2026 <strong>MpBox.ru</strong>. Все права защищены. </div> <div class="footer-meta"> Разработано с любовью к чистому коду. </div> </div> </div> </footer> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/mpbox/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="mpbox-navigation-js" src="https://mpbox.ru/wp-content/themes/mpbox/js/navigation.js?ver=1.0.1"></script> <script> function toHex(form) { num = parseInt(form.num.value); form.hex.value = num.toString(16); if(form.num.value!=''&&form.num.value!='NaN'&&form.hex.value!='NaN') jQuery('#result').replaceWith('<div id="result">&#'+form.num.value+'</div>'); } document.addEventListener("DOMContentLoaded", function () { // Copy to clipboard logic function copyToClipboard(element) { var temp = document.createElement("textarea"); temp.value = element.parentNode.nextElementSibling.textContent; document.body.appendChild(temp); temp.select(); document.execCommand("copy"); document.body.removeChild(temp); var added = document.createElement("i"); added.classList.add("added"); added.textContent = "Copied..."; element.appendChild(added); setTimeout(function () { var added = document.querySelector(".added"); if(added) added.parentNode.removeChild(added); }, 2000); } var boxElements = document.querySelectorAll(".selectCode"); for (var i = 0; i < boxElements.length; i++) { boxElements[i].addEventListener("click", function(e) { e.preventDefault(); copyToClipboard(this); }); } // Mobile menu toggle const menuToggle = document.querySelector('.menu-toggle'); const nav = document.querySelector('.main-navigation'); if(menuToggle) { menuToggle.addEventListener('click', function() { nav.classList.toggle('toggled'); const expanded = this.getAttribute('aria-expanded') === 'true' || false; this.setAttribute('aria-expanded', !expanded); }); } const toggleBtn = document.querySelector('.btn-toggle-children'); if (toggleBtn) { toggleBtn.addEventListener('click', function() { const ul = this.previousElementSibling; const isExpanded = this.getAttribute('aria-expanded') === 'true'; ul.classList.toggle('expanded'); this.setAttribute('aria-expanded', !isExpanded); this.textContent = isExpanded ? 'Показать все разделы' : 'Скрыть'; }); } }); </script> </body> </html>