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’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;}
所以我正在为我的网站构建一个相当简单的登录页面。
只有登录表单,打印出一个HTML表单 通过PHP 这里是相关的CSS: p>
点击此处查看其在浏览器中的显示效果 strong> p>
div> 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>
# 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>
<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.