Tag button e semântica

brcontainer · Fevereiro 3, 2014

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>

Marcos Xavier · Fevereiro 3, 2014

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">
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page</title>
</head>
<body>
  <form action="" >
  <fieldset>
  <legend>Legenda</legend>
  <label for="name">Name</label>
  <input type="text" name="name" id="name" size="40">
  <button class="callWindow">teste</button>
  </fieldset>
  </form>
</body>
</html>

William Bruno · Fevereiro 3, 2014

@silverfox,

Semânticamente, pq existiria um button sem um formulário ?

Qual o comportamento dele ?

Marcos Xavier · Fevereiro 3, 2014

@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

William Bruno · Fevereiro 3, 2014

@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.

Marcos Xavier · Fevereiro 3, 2014

@Willian Bruno

Não prestei atenção na segunda pergunta (fail).

Contudo a sua resposta vai sanar dúvidas de muitos.

:yes:

brcontainer · Fevereiro 4, 2014

@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 ) 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 , 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.

Bruno Augusto · Fevereiro 4, 2014

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 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 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.

brcontainer · Fevereiro 4, 2014

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.

xanburzum · Fevereiro 5, 2014

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

brcontainer · Fevereiro 5, 2014

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 Button
If 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>

Bruno Augusto · Fevereiro 5, 2014

Que foi basicamente a conclusão a que eu cheguei no terceiro parágrafo do post #8

brcontainer · Fevereiro 6, 2014

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!

Arquivado

Tag button e semântica

Recommended Posts

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Augusto 417

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante