how to list input fields

Question

I want to make a login form as:

<form>
<label>Username:<input type="text" name="username"></label>
<label>Password:<input type="password" name="password"></label>
</form>

but some people write it as:

<form>
<ul>
<li><label>Username:<input type="text" name="username"></label></li>
<li><label>Password:<input type="password" name="password"></label></li>
</ul>
</form>

OR

<form>
<p><label>Username:<input type="text" name="username"></label></p>
<p><label>Password:<input type="password" name="password"></label></p>
</form>

first question: which way is recommended and why ? second: does any of this method will hinder reading by 'screen readers' for blind ?

Answer 1

I would recommend the 2nd method and here's why: 1st, you have a <form> element which shows you have list of elements within it. Thus, proper nesting of your unordered list items. You would have to just make certain in a stylesheet to remove the decoration, so the <li> tags don't appear as bulleted.

ul li { list-style-type: none; }

Next, the <label> tags are proper enough for the associated input names... no need to have to extra block element space produced by the <p> tag. The label conveys the input has an identity of sorts.

Lastly, regarding the effect on screen readers, as I suspected, a screen reader must be able to identify what things are on the page being parsed. It doesn't know what elements are by default. Hence, if you have a list of things, what better way use an element which embodies what you're conveying... <ul><li></li></ul>

Here's a link and resource which explains more of the latter for you: https://webaccessibility.withgoogle.com/unit?unit=1&lesson=5