texto - formularios html css

¿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 de un 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 el atributo style = display: inline, obtengo un linebreak antes del formulario. ¿Hay alguna manera de librarse de ello?

¿Pueden aparecer elementos dentro de <p> ?

Answer 1

Mueva su etiqueta de formulario justo fuera del párrafo y establezca los márgenes / relleno en 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

Puede lograr lo que quiera, creo, simplemente incluyendo el botón de enviar dentro del párrafo:

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

Answer 3

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

Según las especificaciones de HTML, tanto <form> como <p> son elementos de bloque y no puede anidarlos. Tal vez reemplazar el <p> con <span> podría funcionar para usted?

EDITAR: Lo siento. Fui rápido en mi redacción. El elemento <p> no permite contenido de bloque dentro de la especificación de HTML para los párrafos .

Answer 5

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

Answer 6

<form> no puede entrar <p> , no. El navegador cerrará abruptamente su elemento <p> cuando llegue a la etiqueta de apertura <form> mientras trata de manejar lo que cree que es un elemento de párrafo no cerrado:

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