Est-il correct d'utiliser DIV dans FORM?

86

Je me demande simplement ce que vous pensez de DIV-tag à l'intérieur de FORM-tag?

J'ai besoin de quelque chose comme ça:

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

Est-ce une pratique générale d'utiliser à l' DIVintérieur FORMou j'ai besoin de quelque chose de différent?

html semantic-markup demas
la source

Réponses:

133

C'est très bien.

Le formsoumettra seulement ses contrôles de type d'entrée (* aussi Textarea, Selectetc ...).

Vous n'avez rien à craindre à l' divintérieur d'un form.

Royi Namir
la source
2
Que diriez-vous d'utiliser un formulaire à l'intérieur d'un div?
Kick Buttowski
1
@KickButtowski Un formulaire à l'intérieur d'un div ne pose aucun problème. Vous pouvez l'essayer vous-même auprès d'un validateur HTML. De plus, c'est presque inévitable de nos jours, puisque les pages modernes sont construites sur des div. Si ce n'était pas autorisé, un simple wrapper ou le placement du formulaire dans un conteneur rendrait déjà la page invalide.
Nrzonline
La validation du formulaire a cessé de fonctionner pour moi depuis que j'ai ajouté des div dans le formulaire
Suhas
28

Il est tout à fait acceptable d'utiliser un DIV à l'intérieur d'une <form>balise.

Si vous regardez la feuille de style CSS 2.1 par défaut , divet que vous pêtes tous les deux dans la display: blockcatégorie. Ensuite, en regardant la spécification HTML 4.01 pour l'élément de formulaire, ils incluent non seulement des <p>balises, mais des <table>balises, donc bien sûr <div>, répondraient aux mêmes critères. Il y a aussi une <legend>balise à l'intérieur du formulaire dans la documentation.

Par exemple, ce qui suit passe la validation HTML4 en mode strict:

<!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
la source
11

Vous pouvez utiliser un <div>dans une forme - il n'y a pas de problème .... MAIS si vous allez utiliser le <div>comme l'étiquette de la inputDo not ... labelest une option beaucoup mieux:

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" />
Presbytère
la source
3

Il est faux d'avoir <input> comme enfant direct d'un <form>

Et au fait, <input / > peut échouer sur certains doctype

Vérifiez-le avec http://validator.w3.org/check

le type de document n'autorise pas l'élément "INPUT" ici; il manque l'un des balises de début "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS"

<input type = "text" />

L'élément mentionné n'est pas autorisé à apparaître dans le contexte dans lequel vous l'avez placé; les autres éléments mentionnés sont les seuls qui y sont tous deux autorisés et peuvent contenir l'élément mentionné. Cela peut signifier que vous avez besoin d'un élément conteneur, ou peut-être que vous avez oublié de fermer un élément précédent.

Une des causes possibles de ce message est que vous avez tenté de placer un élément de niveau bloc (tel que "<p>" ou "<table>") dans un élément en ligne (tel que "<a>", "<span> "ou" <font> ").

Stefan Bachert
la source
3

Votre question ne traite pas de ce que vous voulez mettre dans les balises DIV, ce qui explique probablement pourquoi vous avez reçu des réponses incomplètes / erronées. La vérité est que vous pouvez, comme l'a dit Royi, mettre des balises DIV à l'intérieur de vos formulaires. Vous ne voulez pas faire cela pour les étiquettes, par exemple, mais si vous avez un formulaire avec un tas de cases à cocher que vous souhaitez mettre en page en trois colonnes, alors utilisez certainement les balises DIV (ou SPAN, HEADER, etc. .) pour obtenir l'apparence et la sensation que vous essayez d'obtenir.

Clinton
la source
3

Définition et utilisation

La balise définit une division ou une section dans un document HTML.

La balise est utilisée pour regrouper des éléments de bloc pour les mettre en forme avec des styles. http://www.w3schools.com/tags/tag_div.asp

Aussi DIV - MDN

L'élément HTML (ou HTML Document Division Element) est le conteneur générique du contenu de flux, qui ne représente rien en soi. Il peut être utilisé pour regrouper des éléments à des fins de style (en utilisant les attributs class ou id), ou parce qu'ils partagent des valeurs d'attribut, telles que lang. Il ne doit être utilisé que si aucun autre élément sémantique (tel que ou) n'est approprié.

Vous pouvez utiliser div à l'intérieur du formulaire, si vous parlez d'utiliser div au lieu de table, puis google sur la conception Web sans table

Habib
la source
3
vraiment? référence w3schools?
Adonis K.Kakoulidis
2
@AdonisK., Je sais tout sur pourquoi on ne devrait pas inclure de référence à w3schools, mais je pense que cela ne mérite pas un vote défavorable, je vous demanderais de voir cette discussion sur Meta: meta.stackexchange.com/questions/120025 / ... J'ai également mis à jour la référence de DIV de MDN
Habib
1

Comme les autres l'ont dit, tout va bien, vous pouvez le faire très bien. Pour moi personnellement, j'essaye de garder une forme de structure hiérarchique avec mes éléments avec un divêtre l'élément parent le plus extérieur. J'essaie d'utiliser uniquement table p ulet à l' spanintérieur des formulaires. Cela me permet simplement de suivre plus facilement les relations parents / enfants dans mes pages Web.

JT Smith
la source
0

J'ai remarqué que chaque fois que je commençais la balise form à l'intérieur d'un div, les frères div suivants ne feraient pas partie du formulaire lorsque j'inspecte (chrome inspect) désormais mon formulaire ne serait jamais soumis. 

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

J'ai pensé que si je mettais la balise de formulaire en dehors des DIV, cela fonctionnait. La balise form doit être placée au début de la DIV parent. Comme illustré ci-dessous. 

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

Absolument pas! Il rendra, mais il ne validera pas. Utilisez une étiquette.

Ce n'est pas correct. Ce n'est pas accessible. Vous le voyez sur certains sites Web parce que certains développeurs sont simplement paresseux. Lorsque j'embauche des développeurs, c'est l'une des premières choses que je vérifie dans le travail des candidats. Les formulaires sont méchants, mais prenez le temps et apprenez à les faire correctement

user2774731
la source
-8

Non ce n'est pas

<div>les balises sont toujours utilisées de manière abusive pour créer une mise en page Web. Son but symbolique est de diviser une section / partie dans la page afin qu'un style distinct puisse y être ajouté ou appliqué. [Document w3schools] [W3C]

Cela dépend fortement de ce que vous someetanother .

HTML5, a des balises de signification plus logiques, au lieu d'avoir des balises de mise en page simples. Le section, header, nav, asidetout ont leur propre signification sémantique pour lui. Et sont utilisés contre<div>

Starx
la source
1
J'ai tendance à être d'accord. Il y a beaucoup de choses que vous pouvez faire dans html. Mais à cause de ces lignes directrices vagues, c'est pourquoi nous nous retrouvons à sortir du désordre des mises en page Web déposées avec du code plein de hacks. La seule façon dont le Web peut se développer est de continuer à suivre les nouvelles directives telles qu'elles nous sont présentées.
JT Smith
Eh bien, j'ai besoin d'une certaine zone sur la page Web. Les utilisateurs cliquent sur ces zones et définissent des valeurs sur les entrées de formulaire. Quel élément HTML convient à ce cas?
demas
1
@demas, Pour l'utilisation de votre définition <select>correspond parfaitement si les choix sont donnés, sinon <a>ou <buttons>sont bons.
Starx
27
-1 vous vous trompez totalement. CHAQUE GRAND SITE utilise div dans un formulaire. vous avez donné en html 5 exemples qui n'ont rien à voir avec la question. montrez-moi un grand site qui n'a pas de div sous forme. les gens ici dans ce site à travers des réponses sans vérifier et induire en erreur les autres utilisateurs
Royi Namir
4
le moyen de ne pas construire quelque chose est de regarder comment le code d'entreprise l'a fait, en règle générale. si vous utilisez uniquement ces div pour contenir du texte, si le texte s'applique aux contrôles de formulaire, utilisez une étiquette. sinon, utilisez un p. la sémantique compte. l'accessibilité compte.
albert