Ist es richtig, DIV in FORM zu verwenden?

86

Ich frage mich nur, was denkst du über DIV-Tag in FORM-Tag?

Ich brauche so etwas:

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

Ist es allgemein üblich, DIVdrinnen zu arbeiten, FORModer brauche ich etwas anderes?

html semantic-markup Demas
quelle

Antworten:

132

Es ist völlig in Ordnung.

Das formwird übermittelt nur seinen Eingangstyp - Kontrollen (* auch Textarea, Selectetc ...).

Sie haben nichts über eine kümmern divinnerhalb ein form.

Royi Namir
quelle
2
Wie wäre es mit einem Formular in einem Div?
Kick Buttowski
1
@KickButtowski Ein Formular innerhalb eines Div ist überhaupt kein Problem. Sie können es selbst bei einem HTML-Validator versuchen. Außerdem ist es heutzutage fast unvermeidlich, da die modernen Seiten auf Divs aufbauen. Wenn dies nicht zulässig wäre, würde ein einfacher Wrapper oder das Platzieren des Formulars in einem Container die Seite bereits ungültig machen.
Nrzonline
Die Formularvalidierung funktioniert für mich nicht mehr, seit ich divs in das Formular eingefügt habe
Suhas
28

Es ist völlig akzeptabel, einen DIV in einem <form>Tag zu verwenden.

Wenn Sie sich den Standard aussehen CSS 2.1 Stylesheet , divund psind beide in der display: blockKategorie. Wenn Sie sich dann die HTML 4.01-Spezifikation für das Formularelement ansehen, enthalten sie nicht nur <p>Tags, sondern auch <table>Tags, sodass natürlich <div>dieselben Kriterien erfüllt werden. <legend>Das Formular enthält auch ein Tag in der Dokumentation.

Das Folgende besteht beispielsweise die HTML4-Validierung im strengen Modus:

<!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.
quelle
11

Sie können ein <div>innerhalb eines Formulars verwenden - es gibt dort kein Problem ... ABER wenn Sie das <div>als Etikett für das Nicht verwenden inputmöchten ... labelist eine weitaus bessere Option:

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

Es ist falsch, <input> als direktes Kind eines <form> zu haben

Übrigens kann <input / > bei einem Doctype fehlschlagen

Überprüfen Sie es mit http://validator.w3.org/check

Der Dokumenttyp erlaubt hier kein Element "INPUT". Es fehlt eines der Start-Tags "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADRESSE"

<input type = "text" />

Das erwähnte Element darf nicht in dem Kontext erscheinen, in dem Sie es platziert haben. Die anderen genannten Elemente sind die einzigen, die beide dort zulässig sind und das erwähnte Element enthalten können. Dies kann bedeuten, dass Sie ein enthaltendes Element benötigen oder möglicherweise vergessen haben, ein vorheriges Element zu schließen.

Eine mögliche Ursache für diese Meldung ist, dass Sie versucht haben, ein Element auf Blockebene (z. B. "<p>" oder "<table>") in ein Inline-Element (z. B. "<a>", "<span>" einzufügen "oder" <font> ").

stefan bachert
quelle
3

Ihre Frage bezieht sich nicht auf das, was Sie in die DIV-Tags einfügen möchten, weshalb Sie wahrscheinlich einige unvollständige / falsche Antworten erhalten haben. Die Wahrheit ist, dass Sie, wie Royi sagte, DIV-Tags in Ihre Formulare einfügen können. Sie möchten dies beispielsweise nicht für Beschriftungen tun, aber wenn Sie ein Formular mit einer Reihe von Kontrollkästchen haben, die Sie in drei Spalten unterteilen möchten, verwenden Sie auf jeden Fall DIV-Tags (oder SPAN, HEADER usw. .) um das Erscheinungsbild zu erreichen, das Sie erreichen möchten.

Clinton
quelle
3

Definition und Verwendung

Das Tag definiert eine Abteilung oder einen Abschnitt in einem HTML-Dokument.

Das Tag wird verwendet, um Blockelemente zu gruppieren, um sie mit Stilen zu formatieren. http://www.w3schools.com/tags/tag_div.asp

Auch DIV - MDN

Das HTML-Element (oder HTML Document Division Element) ist der generische Container für Flow-Inhalte, der von Natur aus nichts darstellt. Es kann verwendet werden, um Elemente für Stilzwecke (unter Verwendung der Klassen- oder ID-Attribute) zu gruppieren oder weil sie Attributwerte wie lang gemeinsam nutzen. Es sollte nur verwendet werden, wenn kein anderes semantisches Element (wie oder) geeignet ist.

Sie können div inside form verwenden. Wenn Sie über die Verwendung von div anstelle von table sprechen, googeln Sie über Tableless Web Design

Habib
quelle
3
Ja wirklich? w3schools Referenz?
Adonis K. Kakoulidis
2
@AdonisK., Ich weiß alles darüber, warum man keinen Verweis auf w3schools aufnehmen sollte, aber ich glaube, dass es keine Ablehnung verdient. Ich würde Sie bitten, diese Diskussion auf Meta zu sehen: meta.stackexchange.com/questions/120025/… Auch ich habe Referenz von DIV von MDN
Habib
1

Wie die anderen gesagt haben, ist alles gut, man kann es gut machen. Für mich persönlich versuche ich, mit meinen Elementen eine Form der hierarchischen Struktur beizubehalten, divwobei das äußerste übergeordnete Element ist. Ich versuche nur table p ulund spaninnerhalb von Formularen zu verwenden. Erleichtert mir nur die Verfolgung der Eltern-Kind-Beziehungen auf meinen Webseiten.

JT Smith
quelle
0

Ich bemerkte, dass die nachfolgenden Div-Geschwister immer dann, wenn ich das Formular-Tag in einem Div startete, nicht Teil des Formulars waren, wenn ich es inspizierte (Chrome Inspect). Von nun an würde mein Formular niemals mehr gesendet. 

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

Ich dachte mir, dass es funktioniert, wenn ich das Formular-Tag außerhalb der DIVs platziere. Das Formular-Tag sollte am Anfang des übergeordneten DIV platziert werden. Wie unten gezeigt. 

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

Absolut nicht! Es wird gerendert, aber nicht validiert. Verwenden Sie ein Etikett.

Es ist nicht richtig. Es ist nicht zugänglich. Sie sehen es auf einigen Websites, weil einige Entwickler nur faul sind. Wenn ich Entwickler anheuere, ist dies eines der ersten Dinge, auf die ich bei der Arbeit von Kandidaten prüfe. Formen sind böse, aber nehmen Sie sich Zeit und lernen Sie, sie richtig zu machen

user2774731
quelle
-8

Nein, ist es nicht

<div>Tags werden immer missbraucht, um ein Weblayout zu erstellen. Sein symbolischer Zweck besteht darin, einen Abschnitt / Teil der Seite so zu unterteilen, dass ein separater Stil hinzugefügt oder darauf angewendet werden kann. [w3schools Doc] [W3C]

Es hängt stark davon ab, was Sie someund anotherhaben.

HTML5 hat mehr Tags mit logischer Bedeutung als einfache Layout-Tags. Die section, header, nav, asidehat alles , was ihre eigene semantische Bedeutung zu. Und werden dagegen eingesetzt<div>

Starx
quelle
1
Ich neige dazu, zuzustimmen. Es gibt viele Dinge, die Sie in HTML tun können . Aber aufgrund dieser losen Richtlinien finden wir uns aus dem Durcheinander der vorgelegten Weblayouts mit Code voller Hacks heraus. Das Web kann nur wachsen, wenn wir weiterhin die neuen Richtlinien befolgen, wie sie uns präsentiert werden.
JT Smith
Nun, ich brauche einen Bereich auf der Webseite. Benutzer klicken auf diese Bereiche und legen Werte für Formulareingaben fest. Welches HTML-Element passt für diesen Fall?
Demas
1
@demas, Für die Verwendung Ihrer Definition <select>passt perfekt, wenn die Auswahl gegeben ist, wenn nicht <a>oder <buttons>gut sind.
Starx
27
-1 Sie liegen völlig falsch. JEDE GROSSE WEBSITE verwendet div in einem Formular. Sie haben in HTML 5 Beispiele gegeben, die nichts mit der Frage zu tun haben. Zeigen Sie mir eine große Site, die kein Div in Form hat. Leute hier auf dieser Seite werfen Antworten, ohne andere Benutzer zu überprüfen und irrezuführen
Royi Namir
4
Um etwas nicht zu erstellen, muss man sich in der Regel ansehen, wie Enterprise Code es gemacht hat. Wenn Sie diese Divs nur verwenden, um Text zu enthalten, verwenden Sie eine Beschriftung, wenn der Text für die Formularsteuerelemente gilt. Wenn nicht, verwenden Sie ein p. Semantik ist wichtig. Zugänglichkeit ist wichtig.
Albert