如何将此PHP打印的HTML表单设置为保留在

标记内?

如何将此PHP打印的HTML表单设置为保留在<p>标记内?

问题描述:

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

所以我正在为我的网站构建一个相当简单的登录页面。 只有登录表单,打印出一个HTML表单 通过PHP echo code>命令,不想留在HTML &lt; p&gt;&lt; / p&gt; code>标签中。 这是代码: p> &lt; div ID =“loginbox”&gt;&lt; p&gt; &lt;?php $ db = mysqli_connect($ dbHost,$ dbUser,$ dbPass)或死(“无法连接到服务器”);?&gt; &lt;?php if($ _ SESSION [' authenticated']){////查看用户是否已登录 echo“您以$ name身份登录”; ////如果他们是显示消息 }否则{////如果没有记录显示登录表单 echo'&lt; form action =“login.php”method =“post”&gt;&lt; input type =“ 隐藏的“name =”ac“value =”log“&gt; “; echo'用户名:&lt; input type =“text”name =“name”/&gt;'; echo'&lt; br /&gt; 密码:&lt; input type =“password”name =“password”/&gt;'; echo'&lt; br /&gt; &lt; input type =“submit”value =“Login”/&gt;'; echo'&lt; / form&gt;&lt; br /&gt;'; echo'&lt; a href =“registeruser.php”&gt; Don&amp;#146; t登录? 点击这里注册&lt; / a&gt;'; \ N} &GT?; &lt; / p&gt; &lt; / div&gt; code> pre>

这里是相关的CSS: p>

 #  loginbox {
border-radius:15px; 
color:black; 
position:inherit; 
width:250px; 
height:100px; 
margin-left:auto; 
margin-right:auto; 
margin-top:55px;  
} 
#loginbox&gt;  p {
border-radius:15px; 
background-color:white; 
box-shadow:0 0 20px rgba(0,0,0,0.4); 
高度:387px; 
宽度:500px; 
top:60px;  
left:50px; 
font-family:palatino; 
padding:50px 50px 37.5px 37.5px;} 
 
#loginbox&gt;  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;} 
  code>  pre> 
  
 

点击此处查看其在浏览器中的显示效果 strong> p> div>

<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.

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.

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.