Rendering Forms in a Paragraph

2

Here’s an example:

<p>If you're looking for other confidential
search parameters, click
<form action="secret_search" method="post">
<input type="hidden" value="my secret search parameters"/>
<input type="submit" value="here"/>
</form>
!</p>

You can’t.

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

HTML4.0 Reference

That means you’re stuck with a line-break if you want to have buttons with form data in your paragraphs.

Comments

  1. Hodinky said about 16 hours later:

    And what about CSS? Isn’t it any CSS hack for this situation?

  2. quadir said about 19 hours later:

    I’m not seeing the correlation between your example and your conclusion.

    If you want your example to render on a single line, but have discovered that you can’t put a <form> inside a <p>, the proper solution is to move the <form> outside the <p>:

    
    <form action="secret_search" method="post">
    <p>If you're looking for other confidential
    search parameters, click
    <input type="hidden" value="my secret search parameters"/>
    <input type="submit" value="here"/>
    !</p>

    If however you wanted them to appear on seperate lines, then either you need to use deprecated linebreaks as you said, or a better solution would be to make each line it’s own paragraph. You could also use div blocks.

    
    <p>If you're looking for other confidential
    search parameters, click</p>
    <form action="secret_search" method="post">
    <p><input type="hidden" value="my secret search parameters"/>
    <input type="submit" value="here"/></p>

    !

    Finally you reference the HTML 4.0 specification (not HTML 4.01) and yet your example is clearly XHTML of some sort. In either case, I think the best solution would be to implement this formatting using CSS, where you can redefine the rules for p tags and don’t need to the specification at all but still retain some logical flow.

(leave url/email »)

   Comment Markup Help Preview comment