How Do I set this PHP printed HTML form to stay within <p> tags?

Question

So I'm building a fairly simple login page for my website. Only the login form, an HTML form printed by PHP echo commands, doesn't want to stay in the HTML <p></p> tags. Here's the code:

<div ID="loginbox"><p> 
<?php
$db = mysqli_connect( $dbHost, $dbUser, $dbPass ) or die("Cannot connect to the server");?>

<?php      
if($_SESSION['authenticated']) { //// See if the user's logged in 
echo "You are logged in as $name "; //// If they are show message  
} else { //// if not logged show login form 
echo '<form action="login.php" method="post"><input type="hidden" name="ac" value="log"> '; 
echo 'Username: <input type="text" name="name" />';
echo '<br /> Password: <input type="password" name="password" />';
echo '<br /> <input type="submit" value="Login" />'; 
echo '</form><br />';
echo '<a href="registeruser.php">Don&#146;t have a login? click here to register</a>'; 
}
?>                
</p>
</div>

And here's the relevant CSS:

#loginbox {
border-radius: 15px;
color: black;
position:inherit;
width: 250px;
height: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 55px;
}
#loginbox  > p {
border-radius: 15px;
background-color:white;
box-shadow:0 0 20px rgba(0, 0, 0, 0.4);
height:387px;
Width:500px;
top:60px;
left:50px;
font-family: palatino;
padding:50px 50px 37.5px 37.5px;}

#loginbox > form {    position: inherit;
z-index: 3;
top: 150px;
padding-left: 36px;
margin: 0 auto;}


#loginbox a:visited
{color:#010101;}

#loginbox a:hover
{color:#010101;}

#loginbox a:active
{color:#000000;}

And click here to see how it looks in-browser

Answer 1

The basic problem:

The main error is that a <p> isn't allowed to contain non-inline content. You can either remove the <p> and [</p>][1] completely, or, move them inside the <form> .

As for 'why', it's because that's how it's defined in the schema which defines what is and what is not valid XHTML. If you look at this section of the XHTML definition you'll see that <p> is only allowed to contain text or 'inline' (not 'block') tags. However a <form> counts as 'block' content not as 'inline' content.

In other words, a form can contain paragraphs, but a paragraph cannot contain forms.

Answer 2

<form> elements are not allowed inside <p> elements. Your browser sees this invalid code and decides that the best way to rectify the issue is to pretend that the <p> has ended before the <form> starts.

If you replace the <p> with a <div> , your code will do what you want.

Answer 3

I see <p> tag opened and closed before <form> tag and another <p> tag opened and closed after </form> tag in browser.

<p> tags are for formatting only text content. Use <div> tags instead of <p> tags.