É correto usar DIV dentro do FORM?

86

Só estou me perguntando o que você está pensando sobre a DIV-tag dentro da FORM-tag?

Eu preciso de algo assim:

<form>
  <input type="text"/>
  <div> some </div>
  <div> another </div>
  <input type="text" />
</form>

É uma prática geral usar DIVno interior FORMou preciso de algo diferente?

demas
fonte

Respostas:

133

Está tudo bem.

O formapresentará apenas seus controles do tipo de entrada (* também Textarea, Select, etc ...).

Você não precisa se preocupar com a divdentro de a form.

Royi Namir
fonte
2
Que tal usar um formulário dentro de um div?
Kick Buttowski
1
@KickButtowski Um formulário dentro de uma div não é nenhum problema. Você pode tentar você mesmo em um validador de HTML. Além disso, é quase inevitável hoje em dia, já que as páginas modernas são construídas em div's. Se não fosse permitido, um simples invólucro ou colocar o formulário em um container já tornaria a página inválida.
Nrzonline
A validação do formulário parou de funcionar para mim desde que adicionei divs dentro do formulário
Suhas
28

É totalmente aceitável usar um DIV dentro de uma <form>tag.

Se você olhar para o padrão CSS 2.1 folha de estilo , dive pestão ambos na display: blockcategoria. Então, olhando para a especificação HTML 4.01 para o elemento de formulário, eles incluem não apenas <p>tags, mas <table>tags, portanto, é claro <div>, atenderiam aos mesmos critérios. Também existe uma <legend>tag dentro do formulário na documentação.

Por exemplo, o seguinte passa na validação de HTML4 em modo estrito:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<form id="test" action="test.php">
<div>
  Test: <input name="blah" value="test" type="text">
</div>
</form>
</body>
</html>
Alex W
fonte
11

Você pode usar um <div>dentro de um formulário - não há problema nisso ... MAS se você vai usar o <div>como o rótulo para o inputnão ... labelé uma opção muito melhor:

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" />
Manse
fonte
3

É errado ter <input> como filho direto de um <form>

E a propósito <input / > pode falhar em algum doctype

Verifique com http://validator.w3.org/check


o tipo de documento não permite o elemento "INPUT" aqui; faltando um de "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" tag inicial

<input type = "text" />

O elemento mencionado não pode aparecer no contexto em que você o colocou; os outros elementos mencionados são os únicos permitidos e podem conter o elemento mencionado. Isso pode significar que você precisa de um elemento de contenção ou possivelmente que se esqueceu de fechar um elemento anterior.

Uma possível causa para essa mensagem é que você tentou colocar um elemento de nível de bloco (como "<p>" ou "<table>") dentro de um elemento embutido (como "<a>", "<span> "ou" <font> ").

stefan bachert
fonte
3

Sua pergunta não aborda o que você deseja colocar nas tags DIV, o que provavelmente é o motivo pelo qual você recebeu algumas respostas incompletas / erradas. A verdade é que você pode, como disse Royi, colocar tags DIV dentro de seus formulários. Você não quer fazer isso para rótulos, por exemplo, mas se você tem um formulário com um monte de caixas de seleção que deseja organizar em três colunas, então, por suposto, use tags DIV (ou SPAN, HEADER, etc. .) para atingir a aparência e sensação que você está tentando alcançar.

Clinton
fonte
3

Definição e Uso

A tag define uma divisão ou seção em um documento HTML.

A tag é usada para agrupar elementos de bloco para formatá-los com estilos. http://www.w3schools.com/tags/tag_div.asp

Também DIV - MDN

O elemento HTML (ou Elemento de Divisão de Documento HTML) é o contêiner genérico para o conteúdo do fluxo, que não representa nada inerentemente. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id) ou porque eles compartilham valores de atributos, como lang. Deve ser usado somente quando nenhum outro elemento semântico (como ou) for apropriado.

Você pode usar div dentro do formulário, se estiver falando sobre o uso de div em vez de tabela, então google sobre o design da web sem tablets

Habib
fonte
3
realmente? Referência de w3schools?
Adonis K. Kakoulidis
2
@AdonisK., Sei tudo sobre por que não se deve incluir referência a w3schools, mas acredito que não merece um downvote, gostaria de pedir que você veja esta discussão em Meta: meta.stackexchange.com/questions/120025/… Também atualizei a referência de DIV do MDN
Habib
1

Como os outros já disseram, está tudo bem, você pode fazer isso muito bem. Para mim, pessoalmente, tento manter uma forma de estrutura hierárquica com meus elementos divsendo o elemento pai mais externo. Eu tento usar somente table p ule spandentro de formas. Apenas torna mais fácil para mim controlar as relações entre pais e filhos em minhas páginas da web.

JT Smith
fonte
0

Percebi que sempre que eu iniciaria a tag do formulário dentro de uma div, os irmãos div subsequentes não fariam parte do formulário quando eu inspecionar (inspecionar cromo); doravante, meu formulário nunca seria enviado.

<div>
<form>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>

Achei que se colocasse a tag do formulário fora dos DIVs funcionaria. A tag do formulário deve ser colocada no início do DIV pai. Como mostrado abaixo.

<form>
<div>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>
Vincent Omondi
fonte
-5

Absolutamente não! Ele será renderizado, mas não validará. Use uma etiqueta.

Não está correto. Não está acessível. Você vê isso em alguns sites porque alguns desenvolvedores são apenas preguiçosos. Quando estou contratando desenvolvedores, essa é uma das primeiras coisas que verifico no trabalho dos candidatos. Formulários são desagradáveis, mas reserve um tempo e aprenda a fazê-los corretamente

user2774731
fonte
-8

Não, não é

<div>tags sempre são abusadas para criar um layout da web. Seu propósito simbólico é dividir uma seção / parte na página para que um estilo separado possa ser adicionado ou aplicado a ela. [w3schools Doc] [W3C]

Depende muito do que você somee anothertem.

HTML5 tem tags de significado mais lógico, em vez de tags de layout simples. A section, header, nav, asidetudo tem o seu próprio significado semântico a ele. E são usados ​​contra<div>

Starx
fonte
1
Eu tendo a concordar. Há muitas coisas que você pode fazer dentro do html. Mas, por causa dessas diretrizes vagas, é por isso que nos encontramos cavando para fora da bagunça de layouts da web com código cheio de hacks. A única maneira de a web crescer é se continuarmos a seguir as novas diretrizes conforme nos são apresentadas.
JT Smith
Bem, preciso de uma área na página da web. Os usuários clicam nessas áreas e definem os valores nas entradas do formulário. Qual elemento HTML se encaixa neste caso?
demas
1
@demas, Para o uso de sua definição <select>cabe perfeitamente se as escolhas são dadas, se não <a>ou <buttons>são boas.
Starx
27
-1 você está totalmente errado. CADA GRANDE SITE usa div dentro de um formulário. você deu em html 5 exemplos que não tem nada a ver com a questão. mostre-me um grande site que não tenha div no formulário. pessoas aqui neste site através de respostas sem checar e enganar outros usuários
Royi Namir
4
a maneira de não construir algo é observar como o código corporativo o fez, como regra. se você estiver usando apenas esses div's para conter texto, se o texto se aplicar aos controles do formulário, use um rótulo. se não, use um p. semântica importa. acessibilidade é importante.
Albert