Form div vs ul how to choose?

Question

What the different between using ul to using div for forms? I tried them both and I see no difference, so which?

Here is a snippet that I took (and this I change also from ul to 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>

Possible duplicate of [Online Messaging:
vs
vs
](https://stackoverflow.com/questions/15966272/online-messaging-ul-vs-ol-vs-div) — NuPagadi, May 14 '18 at 18:59
Possible duplicate of [Why should I use 'li' instead of 'div'?](https://stackoverflow.com/questions/549689/why-should-i-use-li-instead-of-div) — Adam, May 14 '18 at 19:05
Because it improve the readability of your HTML code, and it also applies meaning to content which would otherwise have none. [Here Read This](https://www.w3.org/QA/Tips/unordered-lists) — Adam, May 14 '18 at 19:08

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

I would recommend these two resources:

From the second link:

That said, it seems that using a FORM tag does have some benefits, depending on your particular situation:

You need it if you want to execute a traditional (ie. non-AJAX) form post.

You need it you want to capture the "submit" event programmatically.

You need it in order for mobile Safari to show the "Go" button on the keyboard.

You need it if you want to programmatically "reset" a form (ie. call reset()).

It makes generic form serialization easier (since it groups input fields).

You need it if you want to post files without the modern file API. You need it if you have to segregate fields with the same name.

Of course you can always use divs and uls with lis in a form, but that is completely up to you, design wise. You would probably want to use list items if your form is going to look like a list - this would help with styling it. If not, you can group together your labels and inputs with divs. But functionality wise, there is no difference.

score 0 · Accepted Answer · answered May 14 '18 at 19:02

0

<li> will work inside both <div> and <ul>, as you've noted. However the only acceptable child element of a <ul> is <li>, whereas practically anything can be a child of a <div>.

Otherwise, the differences are mainly semantic. If you have CSS that only affects lists, or simply to keep your lists distinct within the DOM, use <ul> (or <ol>). Use <div> when you require a more flexibile, generic container.

answered May 14 '18 at 19:02

TFrazee

792
6
20

Thank you very much for explaining that :) – Nadav Himmelfarb May 14 '18 at 21:20

score 0 · Answer 3 · answered May 14 '18 at 19:37

you can build a site with <div> only. its flexible element but we use different elements like <h2> <span> & ... to make our syntax readable using <li> have padding bad habits that you should neutralize them and also <ul> list style. I can't remember more difference between them

Form div vs ul how to choose?

3 Answers3