CODEWITHSUNDEEP
htmlcss
user4513789
user4513789

Reputation:

Is it possible to use form and div tag inside p tag in html?

I have been created simple web page using html, css and some scripts.

Here is my jsfiddle i tried: http://jsfiddle.net/67x8cyp9/

<p>
 <img class="text-wrap" align="right" src="img/9780143332497.jpg">
 <div class="caption">
    <form method="get" action="9780143332497.png">
       <button type="submit">Download!</button>
    </form>
 </div>
</p>

Is it correct to use <form> tag and <div> tag inside <p> tag?

And also, how to set download button under the image?

Can anyone help me to fix this?

Thanks in advance.

Upvotes: 2

Views: 2867

Answers (2)

meskobalazs
meskobalazs

Reputation: 16041

Not it is not, p is a block element, but cannot contain other block elements, only inline ones. (at least in HTML4, but I don't think HTML5 changes this behaviour).

Hmm, according to MDN, you can put a form in a p, but actually what happens is that the end of the p is at the beginning of the form, so not very useful.

Update:

To help you in your current actual problem, you can wrap the content in a div instead of a p:

<div class="right-figure">
    <img class="text-wrap" src="img/9780143332497.jpg">
    <div class="caption">
        <form method="get" action="9780143332497.png">
             <button type="submit">Download!</button>
        </form>
    </div>
</div>

And in the CSS file:

.right-figure {
     float: right;
}

This will do, what you need.

Another approach:

By the way, you could also just use a link instead of a form:

<a href="9780143332497.png" target="_blank">Download!</a>

and format the anchor with CSS to look like a button, just like e.g. Twitter Bootstrap does.

Upvotes: 3

nalinc
nalinc

Reputation: 7425

Its NOT recommended.

According to W3 specifications, <p> is only allowed to contain text or 'inline' (not 'block') tags. However a <form> counts as 'block' content not as 'inline' content(see this for Minimal Content Model in <p> tag). Alternately, you may use a <div> to enclose your <form>

You may validate your html code on w3 validator for better clarity.

Cheers!

Upvotes: 2

Related Questions