Comment afficher le code HTML <FORM> en tant qu'élément en ligne?

Question

Il s'agit probablement d'une question de base html/css ...

J'ai un simple formulaire à un bouton que je voudrais afficher en ligne dans le texte du paragraphe.

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

Même si la forme a l'attribut style = display: inline, j'obtiens un retour à la ligne avant le formulaire. y a-t-il un moyen de s'en débarrasser?

Des éléments de formulaire peuvent-ils apparaître à l'intérieur de <p>?

Answer 1

Déplacez votre balise de formulaire juste en dehors du paragraphe et définir les marges/padding à zéro:

<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> ne peut pas entrer <p>, no. Le navigateur va fermer brusquement votre élément <p> quand il frappe la balise d'ouverture <form> comme il essaie de gérer ce qu'il pense est un élément de paragraphe non fermé:

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

Answer 3

Selon HTML spec deux <form> et <p> sont des éléments de bloc et vous ne pouvez pas imbriquer. Peut-être remplacer le <p> avec <span> fonctionnerait pour vous?

EDIT: Désolé. Je devais rapidement dans ma formulation. L'élément <p> n'autorise aucun contenu de bloc à l'intérieur - comme spécifié par HTML spec for paragraphs.

Answer 4

Vous pouvez essayer ce 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> 

La chose importante à noter est la propriété de style CSS dans la balise <form>.

display:inline!important;

Answer 5

Vous pouvez accomplir ce que vous voulez, je pense, tout simplement en incluant le bouton soumettre dans le paragraphe:

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

Answer 6

Il suffit d'utiliser le style float: left ainsi:

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