Posted inHTML Co to jest `legend` w HTML? Posted by By Dariusz Nazar Brak komentarzyPosted inHTML Element HTML to podpis/nagłówek dla grupy pól formularza utworzonej za pomocą ; umieszcza się go wewnątrz , zwykle na górze, aby krótko opisać, czego dotyczą zgrupowane kontrolki formularza. Kluczowe informacje: Przeznaczenie – nadanie zrozumiałej etykiety całej grupie pól w , co poprawia semantykę i dostępność formularzy. Wygląd i pozycja – przeglądarki wyświetlają jako tytuł w obramowanym ; można go stylować CSS (np. krój, kolor, wyrównanie). Relacja z – grupuje powiązane elementy formularza i rysuje ramkę; stanowi jego nagłówek/opis. Co „można tam załatwić?” W sensie technicznym w „załatwiasz” czyli określasz tylko opis/caption dla całej grupy pól; nie służy on do przesyłania danych ani interakcji, a jedynie do opisu i dostępności. Do realnych „spraw” (np. kontakt, wysyłka formularza) służą same pola i przyciski w oraz logika formularza, a nie . Inne formy kontaktu na stronie (poza opisem w ): Formularz kontaktowy z polami typu , , przycisk „Wyślij”, zgrupowany w<br /> <fieldset> z opisem </p> <legend>. </li> <li><strong>Adres e‑mail</strong> podany jako tekst, np.: kontakt@example.com </li> <li></strong>Numer telefonu</strong> jako tekst, np.: +48 123 456 789 </li> <li><strong>Strona WWW</strong> jako tekst, np.: www.firma-example.pl </li> </ul> <p>Przykład użycia:</p> <ul> <li> <fieldset> z </p> <legend> „Dane kontaktowe” i polami: Imię, Email, Wiadomość; </p> <legend> opisuje cel grupy, a wysyłkę realizuje przycisk w formularzu.</li> </ul> </div> <section class="author-box"> <div class="author-box-avatar"> <img alt='' src='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-75x75.png' srcset='https://creativecoding.pl/wp-content/uploads/dariusz-nazar_avatar-150x150.png 2x' class='avatar avatar-75 photo' height='75' width='75' decoding='async'/> </div> <div class="author-box-meta"> <div class="h4 author-box-title"> <a href="https://creativecoding.pl/author/cc/" class="url fn n" rel="author"> Dariusz Nazar </a> </div> <div class="author-box-content"> Programista i twórca serwisu Creative Coding, absolwent Politechniki Warszawskiej (WEiTI). Od 10+ lat łączy front‑end, grafikę generatywną i narzędzia dla twórców; opublikował 120+ projektów i artykułów, prowadził warsztaty dla 2 000+ uczestników. Pracuje z JavaScriptem, Three.js, P5.js i GLSL, bada wydajność i dokumentuje procesy, tworząc praktyczne przewodniki dla osób łączących kod z obrazem, dźwiękiem i interakcją. </div> <div class="more-posts-button"> <a href="https://creativecoding.pl/author/cc/" class="bloglo-btn btn-text-1" role="button"><span>View All Posts</span></i></a> </div> </div><!-- END .author-box-meta --> </section> <section class="post-nav" role="navigation"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-previous"><h6 class="nav-title">Poprzedni</h6><a href="https://creativecoding.pl/co-to-jest-fieldset-w-html/" rel="prev"><div class="nav-content"> <span>Co to jest `fieldset` w HTML?</span></div></a></div><div class="nav-next"><h6 class="nav-title">Następny</h6><a href="https://creativecoding.pl/jakie-sa-nowe-znaczniki-w-html5/" rel="next"><div class="nav-content"><span>Jakie są nowe znaczniki w HTML5?</span> </div></a></div> </section> </article><!-- #post-471 --> <a href="#" id="bloglo-comments-toggle" class="bloglo-btn btn-large btn-fw btn-left-icon"> <svg class="bloglo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M512 160h-96V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64v160c0 35.3 28.7 64 64 64h32v52c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L224 288h128c35.3 0 64-28.7 64-64v-32h96c17.6 0 32 14.4 32 32v160c0 17.6-14.4 32-32 32h-64v49.6l-80.2-45.4-7.3-4.2H256c-17.6 0-32-14.4-32-32v-96l-32 18.1V384c0 35.3 28.7 64 64 64h96l108.9 61.6c2.2 1.6 4.7 2.4 7.1 2.4 6.2 0 12-4.9 12-12v-52h32c35.3 0 64-28.7 64-64V224c0-35.3-28.7-64-64-64zm-128 64c0 17.6-14.4 32-32 32H215.6l-7.3 4.2-80.3 45.4V256H64c-17.6 0-32-14.4-32-32V64c0-17.6 14.4-32 32-32h288c17.6 0 32 14.4 32 32v160z" /></svg> <span>Zostaw komentarz</span> </a> <section id="comments" class="comments-area"> <div class="comments-title-wrapper center-text"> <h3 class="comments-title"> Komentarze </h3><!-- END .comments-title --> <p class="no-comments">Brak komentarzy. Dlaczego nie rozpoczniesz dyskusji?</p> </div> <ol class="comment-list"> </ol> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Dodaj komentarz <small><a rel="nofollow" id="cancel-comment-reply-link" href="/co-to-jest-legend-w-html/#respond" style="display:none;">Anuluj pisanie odpowiedzi</a></small></h3><form action="https://creativecoding.pl/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Twój adres e-mail nie zostanie opublikowany.</span> <span class="required-field-message">Wymagane pola są oznaczone <span class="required">*</span></span></p><p class="comment-textarea"><textarea name="comment" id="comment" cols="44" rows="8" class="textarea-comment" placeholder="Napsiz komentarz…" required="required">Nazwa * Adres e-mail * Witryna internetowa Zapamiętaj moje dane w tej przeglądarce podczas pisania kolejnych komentarzy.
