0

Following code for a 'form' wrapped in a 'div' works correct:

<div>
    Please logout with a Click:
    <form style="display: inline-block;">
        <input type="hidden" name="var1" value="val1">
        <button type="submit">Logout-Button</button>
    </form>
</div>

Note: The form is styled as inline-block. The code is placed in a <div>.

Wrapped in the <div> this works proper and on the page this show up correct in one line:

Please logout with a Click: [Logout-Button]

But changing the wrapper from 'div' to 'p' leads to an unexpected behaviour:

When the form is wrapped in a <p> instead of the <div> the button breaks to a new line:

The code ...

<p>
    Please logout with a Click:
    <form style="display: inline-block;"> ... </form>
</p>

Results in ...

Please logout with a Click:
[Logout-Button]

(Same behaviour when I use inline instead of inline-block to style the form.)

I wonder about:

  • As <div> and <p> are both Block-Elements: what is the basic reason for this unexpected different behaviour in <div> and <p>?
  • Does anyone know a simple CSS-Solution to make the 'inline-view' of the form/button working in a 'p-tag'?

Thanks for any hints and answers!

Brebber
  • 2,986
  • 2
  • 9
  • 19
  • why would you want a form in a p tag? a p tag is for paragraphs, a.k.a - text. Forms are not texts ... – treyBake Sep 28 '18 at 08:03
  • 1
    The form is not inside the p. Paragraphs have optional end tags, so the browser treats this as having an invisible `` just before the `
     – Mr Lister Sep 28 '18 at 08:06
  • What are you trying to achieve anyway? What would using a `p` do that cannot be done with a `div`? If you tell us that, we can come up with a solution. Assigning margins to the `div` for instance... – Mr Lister Sep 28 '18 at 08:13
  • 1
    It is invalid to put a form inside a p tag anyway - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p have a look at the permitted content – Pete Sep 28 '18 at 08:17
  • @ThisGuyHasTwoThumbs: Indeed is not about a 'must-have-solution' but it is technical curiosity for the basic reason. Concerning 'forms are not texts': full ACK. But in this special(!) case 'Click the button [logut-button]' the contextual meaning of the whole form IMHO changes to a simple text-element ... but this is a very personal(!) interpretation and should not be the discussion. – Brebber Sep 28 '18 at 08:22
  • 1
    @Brebber Then just put the `p` in the `form` and you can put the `button` in the `p`. Done. – Mr Lister Sep 28 '18 at 09:03

1 Answers1

0

The p tag is for paragraph. When using the form tag inside the p tag what it does is its just close the previous opening p and then open it again after the closing form tag. (At leat on Google Chrome) Maybe there are some official documentation for that online but cant find any.

i.e.

this

<p>
Please logout with a Click: 
<form style="display: inline-block; ">
    <input type="hidden" name="var1" value="val1">
    <button type="submit">Logout-Button</button>
</form>

when rendered will turn into 

    <body>
    <p>Please logout with a Click: </p>
<form style="display: inline-block; ">
            <input type="hidden" name="var1" value="val1">
            <button type="submit">Logout-Button</button>
        </form>
    <p></p>
    </body>

Hope it helps you understand. Check the html code on chrome.

schieben
  • 78
  • 1
  • 8