¿Cómo mostrar HTML <FORM> como elemento en línea?

Question

Esta es probablemente una pregunta básica sobre html/css ...

Tengo un formulario simple con un solo botón que me gustaría mostrar en línea dentro del texto del párrafo.

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

Aunque el formulario tiene style = display: atributo en línea, obtengo un salto de línea antes del formulario. ¿Hay alguna manera de librarse de ello?

¿Pueden aparecer elementos dentro de <p>?

Answer 1

Mueva su etiqueta de formulario a las afueras del párrafo y establece márgenes/el relleno a cero:

<form style="margin: 0; padding: 0;"> 
    <p> 
    Read this sentence 
    <input style="display: inline;" type="submit" value="or push this button" /> 
    </p> 
</form> 

Answer 2

<form> no se puede entrar <p>, no. El navegador va a cerrar bruscamente su elemento <p> cuando golpea el <form> etiqueta de apertura, ya que trata de manejar lo que piensa que es un elemento de párrafo sin cerrar:

<p>Read this sentence 
</p><form style='display:inline;'> 

Answer 3

Según HTML spec tanto <form> y <p> son elementos de bloque y no se puede anidar. Tal vez reemplazar el <p> con <span> funcionaría para usted?

EDITAR: Lo siento. Fui rápido en mi redacción. El elemento <p> no permite ningún contenido de bloque dentro de la especificada en HTML spec for paragraphs.

Answer 4

Puede probar este código:

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

Lo importante a tener en cuenta es la propiedad de estilo CSS en la etiqueta <form>.

display:inline!important;

Answer 5

Usted puede lograr lo que quiere, creo que, simplemente mediante la inclusión del botón de envío dentro del párrafo:

 <pre> 
    <p>Read this sentence <input type='submit' value='or push this button'/></p> 
    </pre> 

Answer 6

sólo tiene que utilizar el estilo float: left de esta manera:

<p style="float: left"> Lorem Ipsum </p> 
<form style="float: left"> 
    <input type='submit'/> 
</form> 
<p style="float: left"> Lorem Ipsum </p>