Meta tags:
description= A tag legend define a legenda para controles de formulário agrupados pelo fieldset . Regras de posicionamento, acessibilidade e exemplos.;
Headings (most frequently used words):
legend, tag, html, exemplo, de, como, da, com, por, que, deve, ser, primeiro, filho, fieldset, acessibilidade, os, leitores, tela, usam, legenda, sintaxe, atributos, prática, resultado, css, múltiplos, fieldsets, legends, substituindo, atributo, align, obsoleto, estilizar, uma,
Text of the page (most frequently used words):
html (63), #legend (41), label (37), fieldset (31), name (30), legenda (22), para (20), svg (19), input (18), aprender (15), como (15), for (15), text (14), type (14), uma (13), tag (13), com (12), form (11), css (10), align (10), title (10), que (9), #exemplo (9), canvas (9), atributos (8), color (8), não (8), city (8), email (8), formulário (7), cada (7), body (7), head (7), tags (7), tela (6), por (6), primeiro (6), elemento (6), controle (6), texto (6), atributo (6), html5 (6), bill (6), ship (6), pob (6), dob (6), w3docs (5), deve (5), você (5), posicionamento (5), navegadores (5), borda (5), copiar (5), center (5), próprio (5), entrega (5), grupo (5), introdução (5), formatter (5), todos (4), code (4), generator (4), prática (4), acessibilidade (4), ser (4), campo (4), padrão (4), padding (4), forma (4), dentro (4), express (4), standard (4), seu (4), doctype (4), formulários (4), birth (4), date (4), ele (4), controles (4), json (3), encoder (3), editor (3), ferramentas (3), quizzes (3), exercícios (3), php (3), javascript (3), leitores (3), filho (3), usada (3), elementos (3), fornece (3), qual (3), pode (3), margin (3), width (3), move (3), navegador (3), ela (3), superior (3), caixa (3), mais (3), disso (3), speed (3), rádio (3), tem (3), address (3), the (3), document (3), cobrança (3), leitor (3), nome (3), endereço (3), data (3), style (3), qualquer (3), rótulo (3), templates (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), sobre (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), sintaxe (2), usam (2), this (2), page (2), agrupar (2), relacionados (2), table (2), função (2), principal (2), estilizar (2), propriedades (2), font (2), background (2), justify (2), entre (2), portanto (2), especial (2), layout (2), modo (2), obsoleto (2), evento (2), globais (2), right (2), value (2), radio (2), days (2), shipping (2), são (2), rotular (2), conjunto (2), botões (2), pergunta (2), full (2), grupos (2), seções (2), seção (2), prefixo (2), usuário (2), sempre (2), experimente (2), mesmo (2), place (2), mail (2), personal (2), block (2), display (2), acessível (2), correspondente (2), foco (2), pares (2), isso (2), esse (2), real (2), cidade (2), apenas (2), lugar (2), depende (2), quadro (2), renderizada (2), regras (2), acessíveis (2), define (2), accept (2), dir (2), referência (2), tutorial (2), imagens (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, contato, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, verificar, criar, entrada, usando, conforme, demonstrado, acima, weight, preciso, substituir, deslocamentos, usar, ajustar, definir, permite, alinhá, costumava, implicar, position, horizontalmente, resultados, variam, teste, nos, destino, espaço, reserva, fica, próxima, esquerda, reservam, posição, comporta, nível, bloco, normal, particularidades, conhecer, modern, replacement, old, deprecated, antigo, funciona, confiável, usado, equivalente, substituindo, suporta, definia, alinhamento, horizontal, relação, removido, use, vez, left, descrição, valor, choose, também, recomendada, onde, faz, botão, billing, reais, geralmente, divididos, vários, checkout, separadas, então, adiciona, correto, sabe, está, editando, múltiplos, fieldsets, legends, 777777, cccccc, bottom, inline, resultado, abaixo, modela, marcação, aponta, clicar, leem, junto, escrito, abertura, fechamento, quando, anuncia, daquele, rotulado, aproximadamente, informa, pertence, sem, precise, navegar, fora, simples, posicionado, livremente, lado, programático, contexto, associe, editar, combinação, clássico, compartilham, mesma, conter, vir, antes, precisar, segunda, precisará, segundo, mapeiam, posicionada, outro, tratada, conteúdo, comum, anunciada, árvore, posiciona, estiver, perde, incorretamente, renderização, especificação, exige, seja, convenção, estilo, esta, página, aborda, corretas, tecnologia, assistiva, utiliza, configurar, lidar, casos, mundo, dividido, várias, envolvidos, desenhado, sobrepondo, desse, torna, complexos, fáceis, percorrer, muito, agrupados, pelo, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, download, disabled, coords, controls, contenteditable, content, async, alt, attribute, reference, forms, vídeos, youtube, multimídia, media, class, obsoletos, attributes, gradiente, radial, lineargradient, sombras, projetadas, efeitos, desfoque, aos, filtros, stroking, path, polyline, polygon, linha, elipse, círculo, retângulo, gradientes, coordenadas, desenhando, xmp, wbr, video, var, track, time, thead, tfoot, textarea, template, tbody, sup, summary, sub, strong, strike, span, spacer, source, small, select, section, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, nav, meter, meta, menuitem, menu, marquee, mark, map, main, link, keygen, kbd, isindex, ins, img, iframe, hgroup, header, frameset, frame, footer, figure, figcaption, embed, div, dialog, dfn, details, del, datalist, colgroup, col, cite, caption, button, blockquote, blink, big, bdo, bdi, basefont, base, audio, aside, article, area, applet, acronym, abbr, obsoletas, xhtml, tabela, tipos, mime, mensagens, status, métodos, atalhos, teclado, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, suporte, áudio, vídeo, semânticos, computercode, caminhos, arquivo, estilos, scripts, blocos, tabelas, comentários, cores, listas, links, formatação, títulos, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,
Text of the page (random words):
tag html legend w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset tag html legend a tag legend define a legenda para controles de formulário agrupados pelo fieldset regras de posicionamento acessibilidade e exemplos a tag legend define a legenda para um grupo de controles de formulário envolvidos por um elemento fieldset no navegador o fieldset é desenhado como uma caixa com borda e a legenda é renderizada sobrepondo a borda superior desse quadro agrupar controles relacionados dentro de um form com fieldset e uma legenda legend torna formulários complexos mais fáceis de percorrer e muito mais acessíveis esta página aborda as regras corretas de posicionamento para legend como a tecnologia assistiva a utiliza como configurar pares acessíveis de label input e como lidar com casos do mundo real como um formulário dividido em várias seções por que legend deve ser o primeiro filho de fieldset a especificação html exige que o legend seja o primeiro filho do seu fieldset isso não é apenas uma convenção de estilo a renderização depende disso o navegador posiciona a legenda na borda superior do quadro do fieldset se a legenda não estiver em primeiro lugar ela perde esse posicionamento especial e a caixa é renderizada incorretamente a árvore de acessibilidade depende disso os navegadores mapeiam o primeiro legend para o nome acessível do fieldset uma legenda posicionada em qualquer outro lugar é tratada como conteúdo comum e não é anunciada como o rótulo do grupo um fieldset pode conter apenas um legend e ele deve vir antes de qualquer controle se você precisar de uma segunda legenda precisará de um segundo fieldset acessibilidade como os leitores de tela usam a legenda a combinação de fieldset e legend é a forma padrão de rotular um grupo de controles o exemplo clássico é um conjunto de botões de rádio que compartilham uma mesma pergunta quando um leitor de tela move o foco para qualquer controle dentro do fieldset ele anuncia o texto da legenda como um prefixo para o próprio rótulo daquele controle por exemplo com uma legenda endereço de entrega e um campo rotulado cidade o leitor de tela lê aproximadamente endereço de entrega cidade editar texto isso informa ao usuário a qual seção cada campo pertence sem que ele precise navegar para fora do grupo texto simples como nome posicionado livremente ao lado de um input não é um rótulo programático e portanto não fornece esse contexto sempre associe cada controle a um label real sintaxe a tag legend é usada em pares o texto da legenda é escrito entre as tags de abertura legend e de fechamento legend e deve ser o primeiro elemento dentro do fieldset exemplo da tag html legend o exemplo abaixo modela uma marcação acessível cada controle tem um id e cada label aponta para ele com um atributo for correspondente clicar em um label move o foco para o input correspondente e os leitores de tela leem a legenda junto com o label tag html legend doctype html html head title title of the document title head body form fieldset legend personal data legend label for name name label input type text id name name name br br label for email e mail label input type email id email name email br br label for dob date of birth label input type date id dob name dob br br label for pob place of birth label input type text id pob name pob fieldset form body html copiar experimente você mesmo resultado exemplo da tag html legend com css exemplo da tag legend com propriedades css doctype html html head title title of the document title style form width 55 fieldset padding 25 px label display inline block width 95 px text align right legend display block padding 15 px margin bottom 10 px background color cccccc color 777777 style head body form fieldset legend personal data legend label for name name label input type text id name name name br br label for email e mail label input type email id email name email br br label for dob date of birth label input type date id dob name dob br br label for pob place of birth label input type text id pob name pob fieldset form body html copiar experimente você mesmo exemplo com múltiplos fieldsets e legends formulários reais geralmente são divididos em vários grupos por exemplo um formulário de checkout com seções separadas de entrega e cobrança cada grupo tem seu próprio fieldset e seu próprio legend um leitor de tela então adiciona o nome correto da seção como prefixo de cada campo de modo que o usuário sempre sabe se está editando o endereço de entrega ou o de cobrança formulário com grupos de entrega e cobrança doctype html html head title title of the document title head body form fieldset legend shipping address legend label for ship name full name label input type text id ship name name ship name br br label for ship city city label input type text id ship city name ship city fieldset fieldset legend billing address legend label for bill name full name label input type text id bill name name bill name br br label for bill city city label input type text id bill city name bill city fieldset form body html copiar um fieldset e legend também são a forma recomendada de rotular um conjunto de botões de rádio onde a legenda faz a pergunta e cada botão de rádio tem seu próprio label form fieldset legend choose a shipping speed legend label for standard standard 5 7 days label input type radio id standard name speed value standard br label for express express 1 2 days label input type radio id express name speed value express fieldset form copiar atributos atributo valor descrição align left right center justify definia o alinhamento horizontal da legenda em relação ao fieldset obsoleto removido do html5 use css em vez disso a tag legend suporta os atributos globais e os atributos de evento substituindo o atributo align obsoleto o antigo atributo align center não funciona mais de forma confiável e não deve ser usado o equivalente em css é text align no próprio elemento legend old deprecated legend align center modern replacement legend text align center copiar particularidades de posicionamento a conhecer por padrão a legenda fica sobre a borda superior do fieldset próxima à borda esquerda os navegadores reservam para a legenda uma posição especial no layout de modo que ela não se comporta como uma caixa de nível de bloco normal text align move a legenda horizontalmente dentro do espaço que o navegador reserva para ela os resultados variam entre navegadores portanto teste nos navegadores de destino para um controle preciso você pode substituir o posicionamento padrão com position e deslocamentos ou usar padding margin para ajustar o texto definir width na legenda permite alinhá la da forma que align justify costumava implicar como estilizar uma tag html legend você pode estilizar o elemento legend usando propriedades css padrão como padding margin background color text align e font weight conforme demonstrado no exemplo css acima prática prática qual é a função principal da tag html legend qual é a função principal da tag html legend é usada para criar um campo de entrada em um formulário fornece uma legenda para o elemento fieldset fornece uma legenda para o elemento table é usada para agrupar elementos relacionados em um formulário verificar was this page helpful yes no previous label next li on this page por que legend deve ser o primeiro filho de fieldset acessibilidade como os leitores de tela usam a legenda sintaxe atributos prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores
|
