Форма div против ul как выбрать?

Question

В чем разница между использованием ul и использованием div для форм? Я попробовал их обоих, и я не вижу разницы, так что же?

Вот фрагмент кода, который я взял (и я изменяю его также с ul на div):

    <ul class="flex-outer">
          <li>
            <label for="first-name">First Name</label>
            <input type="text" id="first-name" placeholder="Enter your first name here">
          </li>
    </ul>

Answer 1

<li> будет работать как внутри <div>, так и <ul>, как вы заметили.Однако единственным приемлемым дочерним элементом для <ul> является <li>, тогда как практически все может быть дочерним для <div>.

В остальном различия в основном семантические.Если у вас есть CSS, который влияет только на списки, или просто для того, чтобы ваши списки различались в DOM, используйте <ul> (или <ol>).Используйте <div>, когда вам требуется более гибкий универсальный контейнер.

Answer 2

Вы можете создать сайт только с <div>.это гибкий элемент, но мы используем различные элементы, такие как <h2> <span> & ..., чтобы сделать наш синтаксис читаемым, используя <li>, с плохими привычками заполнения, которые вы должны нейтрализовать, а также стиль списка <ul>.Я не могу вспомнить больше различий между ними

Answer 3

Я бы порекомендовал эти два ресурса:

• Как структурировать форму HTML
• Требуются ли формы HTML для отображения элементов управления вводом формы?

со второй ссылки:

Тем не менее, кажется, что использование тега FORM имеет некоторые преимущества в зависимости от вашей конкретной ситуации:

• Вам это нужно, если вы хотите выполнить традиционную (т.е. не-AJAX) форму публикации.
• Вам это нужно, вы хотите программно перехватить событие "submit".
• Это необходимо для того, чтобы мобильный Safari отображал кнопку «Перейти» на клавиатуре.
• Вам это нужно, если вы хотите программно «сбросить» форму (т. Е. Call reset ()).
• Упрощает сериализацию общих форм (поскольку группирует поля ввода).
• Вам это нужно, если вы хотите размещать файлы без современного файлового API. Вам это нужно, если вам нужно разделить поля с одинаковыми именами.

Конечно, вы всегда можете использовать div s и ul s с li s в форме, но это полностью зависит от вас, мудрый дизайн. Вы, вероятно, захотите использовать элементы списка, если ваша форма будет выглядеть как список - это поможет в его оформлении. Если нет, вы можете сгруппировать ваши labels и inputs с divs. Но по функциональности нет никакой разницы.