How to display HTML <FORM> as inline element?

Question

This is probably a basic html/css question...

I have a simple one-button form that I would like to display inline inside paragraph text.

<p>Read this sentence 
     <form style='display:inline;'>
     <input style='display:inline;' 
            type='submit' 
            value='or push this button'/>
     </form>.
</p>

Even though form has style=display:inline attribute, I get a linebreak before the form. Is there a way to get rid of it?

Can form elements appear inside <p>?

Answer 1

<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;'>

Answer 2

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>

Answer 3

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.