Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Em HTML é semântico usar a tag <button> sem a tag <form> ?
Nota: não é por que o HTML está válido pelo "w3-valitador" que significa que o código seja realmente semântico.
Meu html ficaria tipo isto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page</title>
</head>
<body>
<div>
<button class="callWindow">teste</button>
</div>
</body>
</html>@silverfox,
Semânticamente, pq existiria um button sem um formulário ?
Qual o comportamento dele ?
@Willian Bruno
Olhando no w3c.org, não vi que necessariamente seja obrigatório o uso da tag button dentro de um formulário.
http://www.w3.org/wiki/HTML/Elements/button#Example_B
Participei também de um desafio do maujor em que criamos um banner do google engage e nele(ultimo slide) usamos a tag button(recomendado pelo maujor).
http://www.maujor.com/blog/2013/01/14/teste-seu-conhecimento-17/
http://maujor.com/blog/pg_apoio/desafio17/marcos-xavier.html
@Marcos Xavier,
No caso desse button do adcast. Não seria a mesma coisa, ou até mais semântico utilizar uma tag <A> ?
Afinal vc clica e vai para uma URL. Esse é o comportamento da tag <A>, mas fazer isso com uma tag BUTTON, vc deve implementar um javascript.Por isso perguntei, pq existiria um button fora de um form, e qual seria o comportamento dele.
@Willian Bruno
Não prestei atenção na segunda pergunta (fail).
Contudo a sua resposta vai sanar dúvidas de muitos.
:yes:
>
@silverfox,
Semânticamente, pq existiria um button sem um formulário ?
Qual o comportamento dele ?
Primeiramente, olá @WilliamBruno faz muito tempo que não trocávamos algumas ideias, parabéns pelo cargo de moderador global.
Eu não acho realmente falar o motivo influencie na questão de "Web Semântica", mas irei responder a sua pergunta.
Sim se trata de javascript, eu sempre usei ancoras para criar botões e eventos javascript. A questão é que eu sempre quero melhorar, procurar caminhos por "N" motivos. Por exemplo, em textos eu sempre uso "<div><p>texto</p></div>", mas vejo muitos usarem apenas "<div>texto</div>" (o que ao meu ver não é semântico), você sabe que sempre fui muito ligado a "web semântica", né?
Quando eu crio um evento javascript que pode ser chamado pela ação "humana" eu faço isto:
<a id="test" href="javascript:void(0);">Eventer</a>
<script>document.getElementById("test").onclick = myEvent;</script>Ótimo isto funciona perfeito e com certeza em questão de HTML é "Web Semântico".Ao meu ver, *<input>*, *<label>*, *<textarea>, <select>*, etc. Sempre devem ir dentro de um formulário, mesmo que a execução seja javascript, seria algo assim:
<form id="test" method="get" action="javascript:void(0);">
<p>
<select name="date">
<option value="">Selecione...</option>
<option value="2013">Artigos 2013</option>
<option value="2014">Artigos 2014</option>
</select>
</p>
</form>
<script>
var form = $("#test");
form.submit(function(){
$.ajax({
...
"data":$("select", form).val()
...
});
return false;
});
$("select", form).change(function(){
form.submit();
});
</script>
Mas ao ler sobre a TAG "<button>" no W3, percebi que eles não falam nada sobre o "<form>" ser obrigado ( [http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.5](http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.5) ) e também li este artigo a 4 dias atrás: [http://www.bennadel.com/blog/2435-Are-HTML-FORM-Tags-Required-To-Display-Form-Input-Controls-.htm](http://www.bennadel.com/blog/2435-Are-HTML-FORM-Tags-Required-To-Display-Form-Input-Controls-.htm) , mas eles não falam realmente de "web semântica".A minha questão não necessariamente se refere ao javascript ou outro tipo de API, mas sim do "HTML". Eu poderia falar horas aqui sobre o que eu considero "web semântico" ou não, mas no momento é apenas o uso de button que me intriga.
Fico grato por ler.
A especificação do HTML 4.01 descreve o elemento [inline]<button>[/inline] como um aprimoramento da tag [inline]<input>[/inline] no que diz respeito aos botões (atributo type sendo submit, reset, button e image) tem funcionalidade similar, mas oferecem renderização mais rica, pois aceita conteúdo.
Esse conteúdo aceito pode ser qualquer HTML, mas normalmente é usado para criação de botões com imagens. Tem uma técnica que permite, inclusive, criar botões fluidos, que se ajustam ao conteúdo de forma bem fácil.
Já o [rascunho da especificação do HTML 5](http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-button-element) não restringe explicitamente a... localização? da tag [inline]<button>[/inline], apenas define que caso o botão pertença a um formulário E o atributo *type* seja **submit** ou **reset**, o botão deve, respectivamente, submeter e resetar o dito formulário.
Tanto é que no exemplos da especificação, sempre que há alguma ação de submissão de informações o elemento [inline]<button>[/inline] está dentro de um [inline]<form>[/inline], mas quando não, como [na subseção](http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-menu-element) do elemento [inline]<menu>[/inline] não, estando o elemento [inline]<button>[/inline] sendo usado como elemento v´sivel da *toolbar*.
IMHO, você só tem a ganhar usando [inline]<button>[/inline] ao invés dos [inline]<input>[/inline].Se você quiser saber quando usá-lo é simples, basta se perguntar que "conceito" você vê para o determinado recurso. Se lhe ocorrer clicar, segurar e soltar, independente de o elemento ter ou não o aspecto visual de afundar e inflar, ele é um botão.
Em HTML5 eu posso fazer isto:
<form action="page.html" method="get" id="myForm"></form>
<button type="submit" form="myForm" value="Submit">Send signal</button>O que é ótimo, pois existe uma referencia entre ambos. Infelizmente eu tenho preferência pelo html4.01(eu prefiro por causa do modo stritic) e em uma página "noscript-friendly" com navegadores mobile mais antigos, isto não é suportável.
A tag BUTTON define um elemento botão versátil para formas XHTML. Com os atributos: Global attributes, event attributes e disabled, name, type, value.
Tag de fechamento:
</button> Requerido
BUTTON conteúdo:
CDATA. Envolve as tags HTML que compõem o botão de entrada, geralmente uma imagem. As seguintes tags são válidas dentro da tag BUTTON:
a, abbr, acronym, address, applet, b, bdo, big, blockquote, center, cite, code, dfn, dir, div, dl, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input, isindex, kbd, label, mao, menu, noframes, noscript, object, ol, p, pre, q, s, samp, script, select, small, span, strike, strong, sub, sup, table, textarea, tt, u, ul, var
Contexto válido:
A tag BUTTON é válida nas seguintes tags:
a, abbr, acronym, address, applet, b, bdo, big, blockquote, body, caption, center, cite, code, del, dd, dfn, div, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, iframe, ins, kbd, label, legend, li, noframes, noscript, object, p, pre, q, s, samp, small, span, strike, strong, sub, sup, td, th, tt, u, var
Ao ler isto http://www.w3.org/TR/2013/CR-html5-20130806/forms.html#attr-button-type-button-state me deparei com o seguinte texto:
Submit ButtonIf the element has a form owner, the element must submit the form owner from the button element. Reset Button If the element has a form owner, the element must reset the form owner. Button Do nothing.
Neste trecho "If the element has a form owner".
Traduzindo: Se o elemento possuir um formulário proprietário.
Este "If" e o "Do nothing" no texto deixa mais claro que não é necessário possuir um formulário em:
<button type="button">Test-case</button>
Que foi basicamente a conclusão a que eu cheguei no terceiro parágrafo do post #8
Que foi basicamente a conclusão a que eu cheguei no terceiro parágrafo do post #8
Eu havia lido, só não havia me causado a certeza. +1 em ambos posts!
Faz um favor para mim, eu usei o termo "web-semantica", mas na verdade o termo está errado. O correto seria apenas semantica (de marcação), web-semantica é outro assunto, poderia editar o titulo e o POST #1?
Grato!
Testa ae http://validator.w3.org/#validate_by_input
O código abaixo é considerado como semântico
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">