Правильно ли использовать DIV внутри FORM?

86

Мне просто интересно, что вы думаете о DIV-теге внутри FORM-тега?

Мне нужно что-то вроде этого:

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

Это обычная практика - использовать DIVвнутрь FORMили мне нужно что-то другое?

демас
источник

Ответы:

133

Это совершенно нормально.

Он formбудет отправлять только элементы управления типом ввода (* также Textarea, Selectи т. Д.).

Вам не о чем беспокоиться divвнутри form.

Ройи Намир
источник
2
Как насчет использования формы внутри div?
Кик Бутовски
1
@KickButtowski Форма внутри div - это вообще не проблема. Вы можете попробовать это сами на валидаторе HTML. Кроме того, в наши дни это почти неизбежно, поскольку современные страницы построены на div. Если бы это было запрещено, простая оболочка или размещение формы в контейнере уже сделало бы страницу недействительной.
Nrzonline
Проверка формы перестала работать для меня, так как я добавил div внутри формы
Сухас
28

Вполне допустимо использовать DIV внутри <form>тега.

Если вы посмотрите на таблицу стилей CSS 2.1 по умолчанию , divи pоба они находятся в display: blockкатегории. Затем, глядя на спецификацию HTML 4.01 для элемента формы, они включают не только <p>теги, но и <table>теги, поэтому, конечно, <div>будут соответствовать тем же критериям. В документации также есть <legend>тег внутри формы.

Например, следующее проходит проверку HTML4 в строгом режиме:

<!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>
Алекс В
источник
11

Вы можете использовать <div>внутри формы - здесь нет проблем .... НО если вы собираетесь использовать в <div>качестве метки для inputdont ... labelэто гораздо лучший вариант:

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" />
Manse
источник
3

Неправильно иметь <input> в качестве прямого потомка <form>

И, кстати, <input / > может не работать на каком-то doctype

Проверьте это с помощью http://validator.w3.org/check


тип документа не позволяет использовать здесь элемент «INPUT»; отсутствует один из начальных тегов "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS"

<input type = "text" />

Упомянутый элемент не может появляться в контексте, в котором вы его разместили; остальные упомянутые элементы - единственные, которые разрешены там и могут содержать упомянутый элемент. Это может означать, что вам нужен содержащий элемент, или, возможно, вы забыли закрыть предыдущий элемент.

Одна из возможных причин этого сообщения заключается в том, что вы попытались поместить элемент уровня блока (например, «<p>» или «<table>») внутри встроенного элемента (например, «<a>», «<span> "или" <font> ").

Стефан Бахерт
источник
3

Ваш вопрос не касается того, что вы хотите поместить в теги DIV, вероятно, поэтому вы получили неполные / неправильные ответы. На самом деле, как сказал Рой, вы можете поместить теги DIV в свои формы. Вы не хотите делать это, например, для ярлыков, но если у вас есть форма с кучей флажков, которые вы хотите разместить в трех столбцах, тогда обязательно используйте теги DIV (или SPAN, HEADER и т. .), чтобы добиться того внешнего вида, которого вы пытаетесь достичь.

Клинтон
источник
3

Определение и использование

Тег определяет подразделение или раздел в документе HTML.

Тег используется для группировки блочных элементов для форматирования их стилями. http://www.w3schools.com/tags/tag_div.asp

Также DIV - MDN

Элемент HTML (или элемент разделения документа HTML) является общим контейнером для потокового содержимого, которое по своей сути ничего не представляет. Его можно использовать для группировки элементов в целях стилизации (с использованием атрибутов class или id) или потому, что они имеют общие значения атрибутов, такие как lang. Его следует использовать только тогда, когда никакой другой семантический элемент (например, или) не подходит.

Вы можете использовать div внутри формы, если вы говорите об использовании div вместо таблицы, тогда Google о веб-дизайне без таблиц

Хабиб
источник
3
действительно? Ссылка на w3schools?
Adonis K. Kakoulidis
2
@AdonisK., Я знаю все о том, почему не следует включать ссылку на w3schools, но я считаю, что это не заслуживает отрицательного голоса, прошу вас посмотреть это обсуждение на Meta: meta.stackexchange.com/questions/120025/… Также я обновил ссылку на DIV из MDN
Хабиб
1

Как уже говорили другие, все хорошо, у вас все отлично. Лично я стараюсь поддерживать форму иерархической структуры с моими элементами, при divэтом внешний элемент является самым родительским. Стараюсь использовать только table p ulи spanвнутренние формы. Просто мне легче отслеживать отношения между родителями и детьми на моих веб-страницах.

Дж. Т. Смит
источник
0

Я заметил, что всякий раз, когда я запускал тег формы внутри div, последующие братья и сестры div не были бы частью формы, когда я проверяю (chrome inspect) с этого момента моя форма никогда не будет отправляться.

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

Я подумал, что если поместить тег формы вне DIV, это сработает. Тег формы должен быть помещен в начало родительского DIV. Как показано ниже.

<form>
<div>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>
Винсент Омонди
источник
-5

Точно нет! Он будет отображаться, но не будет подтвержден. Используйте этикетку.

Это не так. Это не доступно. Вы видите это на некоторых сайтах, потому что некоторые разработчики просто ленивы. Когда я нанимаю разработчиков, это одна из первых вещей, которые я проверяю при работе с кандидатами. Формы отвратительны, но не торопитесь и научитесь делать их правильно

user2774731
источник
-8

Нет, это не так

<div>теги всегда используются для создания веб-макета. Его символическая цель - разделить раздел / часть на странице, чтобы к нему можно было добавить или применить отдельный стиль. [W3schools Doc] [W3C]

Это сильно зависит от того, что у вас someи anotherесть.

HTML5 имеет более логические значения тегов вместо простых тегов макета. section, header, nav, asideВсе имеют свое собственное смысловое значение для него. И используются против<div>

Starx
источник
1
Я склонен согласиться. Есть много вещей , которые вы можете сделать в HTML. Но именно из-за этих нечетких рекомендаций мы обнаруживаем, что выкапываем из беспорядка табличных веб-макетов с кодом, полным хаков. Единственный способ развития сети - это если мы продолжим следовать новым руководящим принципам в том виде, в каком они нам представлены.
JT Smith
Ну, мне нужно какое-то место на веб-странице. Пользователи щелкают по этим областям и устанавливают значения во входных данных формы. Какой HTML-элемент подходит для этого случая?
demas
1
@demas, для использования вашего определения <select>идеально подходит, если варианты даны, если нет <a>или <buttons>хороши.
Starx
27
-1 ты совсем не прав. КАЖДЫЙ БОЛЬШОЙ САЙТ использует div внутри формы. вы привели в html 5 примеров, которые не имеют ничего общего с вопросом. покажите мне один большой сайт, на котором нет div внутри формы. люди здесь, на этом сайте, отбрасывают ответы без проверки и вводят в заблуждение других пользователей
Рой Намир
4
способ не строить что-либо - это, как правило, смотреть на то, как это делал корпоративный код. если вы используете эти div только для содержания текста, если текст применяется к элементам управления формы, используйте метку. если нет, используйте стр. семантика имеет значение. доступность имеет значение.
Альберт