Wojno: Rendering Forms in a Paragraph

Rendering Forms in a Paragraph

Christopher Wojno — Mon, 14 Jul 2008 12:16:00 -0700

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.

"Rendering Forms in a Paragraph" by quadir

Tue, 15 Jul 2008 07:01:42 -0700

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

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>
</form>
<p>!</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.

"Rendering Forms in a Paragraph" by Hodinky

Tue, 15 Jul 2008 04:02:49 -0700

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