How to display HTML <FORM> as inline element?
Move your form tag just outside the paragraph and set margins / padding to zero:
<form style="margin: 0; padding: 0;">
<p>
Read this sentence
<input style="display: inline;" type="submit" value="or push this button" />
</p>
</form>
<form>
cannot go inside <p>
, no. The browser is going to abruptly close your <p>
element when it hits the opening <form>
tag as it tries to handle what it thinks is an unclosed paragraph element:
<p>Read this sentence
</p><form style='display:inline;'>
According to HTML spec both <form>
and <p>
are block elements and you cannot nest them. Maybe replacing the <p>
with <span>
would work for you?
EDIT:
Sorry. I was to quick in my wording. The <p>
element doesn't allow any block content within - as specified by HTML spec for paragraphs.
You can try this code:
<form action="#" method="get" id="login" style=" display:inline!important;">
<label for='User'>User:</label>
<input type='text' name='User' id='User'>
<label for='password'>Password:</label><input type='password' name='password' id='password'>
<input type="submit" name="log" id="log" class="botton" value="Login" />
</form>
The important thing to note is the css style property in the <form>
tag.
display:inline!important;