How to make this HTML code not go to another line - html

Question

This is my code so far:
<form>
<p>Username: </p><input type="text" name="username" />
<p>Password: </p><input type="text" name="password" />
<br /><input type="submit" value="Submit" />
</form>
For some interesting reason it is going to another line for ever paragraph and textbox. What can I do to prevent that?

Answer 1

Put your paragraph tags around the input also. The P tag basically does a line break at the end of itself.
<form>
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="text" name="password" /></p>
<br /><input type="submit" value="Submit" />
</form>

Answer 2

Do this:
<form>
Username: <input type="text" name="username" />
<br/>
Password: <input type="text" name="password" />
<br /><input type="submit" value="Submit" />
</form>
or
<form>
Username:<br/> <input type="text" name="username" />
<br/>
Password:<br/> <input type="text" name="password" />
<br /><input type="submit" value="Submit" />
</form>

Answer 3

<form>
<div style="float: left;">Username: <input type="text" name="username" /></div>
<div style="float: left;">Password: <input type="text" name="password" /></div>
<div style="clear: both;"></div>
<input type="submit" value="Submit" />
</form>

Answer 4

They're dropping to a new line because of your markup. Paragraph (<p>) tags drop to a new line, as do breaks (<br>). I would suggest using <span> tags in place of the paragraph tags, and remove the line break.

Answer 5

p tag is by default "display: block" which means a <br /> before and after p is added by the browser, so is the reason it is going to the next line.
include both the label & textbox in "p"
<form>
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="text" name="password" /></p>
<p><input type="submit" value="Submit" /></p>
</form>