Question

继续我的第一个真实网站的开发，我再次来到另一个路障。

我正在尝试在我的网站上找到一个联系表单，经过大量的研究后，我能够让表单接受输入，验证，显示空的“必填字段”的错误，然后回显输入的数据，意图后来删除回声并通过电子邮件发送数据。到目前为止一直很好，但我现在已经厌倦了这个，所以现在我试图让页面看起来像其他（导航栏，字体等）。

我的文件夹结构是这样的（简化）：

Project
 [bootstrap]
   -[css]
   -[fonts]
   -[js]
 [css]
   -HStyles.css
   -EStyles.css
   -CStyles.css
 [fa] (font awesome)
 [img]
   -1.jpg
  - 2.jpg
 [php]
   -get_post.php(contact page) 
 home.html
 events.html

如果我从我的get_post.php文件中删除php代码并将扩展名重命名为.html，尽管页面是静态的，但一切看起来都应该如此。这是我的PHP代码

<?php
     define( "TITLE", "POST"); 

if( isset( $_POST["submit"])) {
function validateFormData($_formData) {

$formData = trim (stripslashes (htmlspecialchars($formData)));
return $formData;
}

if (!$_POST["name"]) {
    $nameError = "Required Field";
}
else {
$name = validateFormData( $_POST["name"]);
}

    if (!$_POST["lname"]) {
    $nameError = "Required Field";
}
else {
$name = validateFormData( $_POST["lname"]);
}

if (!$_POST["email"]) {
    $emailError = "Required Field";
}
else {
    $email = validateFormData( $_POST["email"]);
    }
}

if (!$_POST["phone"]) {
    $nameError = "Required Field";
}
else {
$name = validateFormData( $_POST["phone"]);
}

if (!$_POST["message"]) {
    $nameError = "Required Field";
}
else {
$name = validateFormData( $_POST["message"]);
}

?>
<!DOCTYPE HTML>
<html lang="en">


    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="..//fa\css\font-awesome.css" rel="stylesheet" type="text/css" />

        <title>
            The Friendly Medium
        </title>

        <!-- Bootstrap -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/CStyles.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>

    <body>

        <div id="wrapper">

            <div id="content">

                <nav class="navbar navbar-fixed-top navbar-inverse">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>

                        </div>
                        <div class="collapse navbar-collapse" id="navbar-collapse">
                            <ul class="nav navbar-nav">



                                <li>
                                    <a href="../home.html">Home</a>
                                </li>
                                <li><a class="glass" href="../events.html">Events</a>
                                </li>

                                <li>
                                    <a class="glass" href="../private-readings.html">Private Readings</a>
                                </li>
                                <li>
                                    <a class="glass" href="../testimonials.html">Testimonials</a>
                                </li>
                                <li class="active">
                                    <a class="glass" href="get_post.php">Contact Us</a>
                                </li>
                            </ul>

                            <div class="navsocial">
                                <ul class="navbar-right social">
                                    <li><a class="fb" href="https://www.facebook.com/DawnCFriendly/?fref=ts"><i class="fa fa-lg fa-facebook"></i></a></li>
                                    <li><a class="twitter" href="https://twitter.com/dfriendlymedium"><i class="fa fa-lg fa-twitter"></i></a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </nav>


                <section class="contact">
                    <div class="container"></div>
                    <p>Please fill out the form below</p>
                    <h5 class="text-danger">* Reqired Field</h5>


                    <div class="container">

                        <form action="<?php echo htmlspecialchars( $_SERVER["PHP_SELF"] ); ?>" method="post">

                            <small class="text-danger">* <?php echo $nameError; ?></small>
                            <input type="text" name="name" class="form-control input-lg" placeholder="First Name*">

                            <input type="text" name="lname" class="form-control input-lg" placeholder="Last Name">
                            <small class="text-danger">* <?php echo $emailError; ?></small>
                            <input type="text" name="email" class="form-control input-lg" placeholder="Email*">

                            <input type="text" name="phone" class="form-control input-lg" placeholder="Phone">
                            <small class="text-danger">* <?php echo $nameError; ?></small>
                            <textarea class="form-control" name="message" rows="8" placeholder="Message*"></textarea>

                            <input type="submit" name="submit">


                        </form>
                    </div>
                </section>



                <?php

            if( isset($_POST["submit"])) {
                echo "your info <br>"; 
               echo $_POST["name"];
                 }
            ?><br>
                <?php

            if( isset($_POST["submit"])) {                
               echo $_POST["lname"];
                 }
            ?><br>
                <?php

            if( isset($_POST["submit"])) {                
               echo $_POST["email"];
                 }
            ?><br>

               <?php

            if( isset($_POST["submit"])) {                
               echo $_POST["phone"];
                 }
            ?><br>
                <?php

            if( isset($_POST["submit"])) {                
               echo $_POST["message"];
                 }
            ?>


            </div>



            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js "></script>
            <!-- Include all compiled plugins (below), or include individual files as needed -->
            <script src="bootstrap/js/bootstrap.min.js "></script>
        </div>
            </body>

    </html>

这是我的css

    html {
    position: relative;
    min-height: 100%;
    overflow-y: scroll;
}

body {
    height: 100%;
    overflow-x: hidden;
    margin-bottom: 100px;
}

#content {
    padding-bottom: 1px;
    /* Height of the footer element */
}

nav.navbar-inverse {
    margin-bottom: 1px;
    text-align: center;
    font-size: 20px;
    background: -webkit-linear-gradient(top, rgba(51, 51, 51, 0.9) 0%, rgba(34, 34, 34, 0.9) 100%);
    background: linear-gradient(to bottom, rgba(51, 51, 51, 0.9) 0%, rgba(34, 34, 34, 1) 100%);
}

.navbar-inverse .navbar-nav > li > a {
    border-radius: 4px;
    color: whitesmoke;
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    text-shadow: 1.3px 1px #222;
    background-color: #4da7ff;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    text-shadow: 1.3px 1px #222;
    background-color: #4da7ff;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    color: black;
}

.navbar .navbar-nav {
    float: none;
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    font-size: 20px;
    font-weight: 600;
}

.navbar-nav >li {
    display: inline;
    border-radius: 4px;
    color: whitesmoke;
}

.navbar-nav >li {
    background: none;
    border-color: white;
    box-shadow: inset 0 1 14px #222;
    box-shadow: 0 0 14px #222;
    margin-left: 5px;
    margin-right: 5px;
    background: rgba(65, 70, 70, 0.9);
}

.social {
    padding: 0px;
}

.navsocial ul {
    margin-top: -55px;
    padding: 1px;
}

.navsocial i {
    font-size: 30px;
    text-align: center;
    padding-top: 12px;
}

.navsocial ul li {
    margin: 4px;
    display: inline-block;
}

.facebook {
    color: #4060A5;
}

.twitter {
    color: #00ABE3;
}

.fa-facebook:hover {
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    color: white;
}

.fa-twitter {
    color: #00ABE3;
}

.fa-twitter:hover {
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
    color: white;
}

.navbar-brand>img {
    display: inline;
    margin-right: -50px;
}

.contact p {
    margin-top: 100px;
    text-align: center;
    font-family: sans-serif;
    font-size: 16px;
}

.contact h5 {
    text-align: center;
    margin-top: 150px;
    margin-bottom: -130px;
}

form {
    text-align: left;
    width: 300px;
    margin: 140px auto 100px;
}

.form-control {
    display: block;
    width: 300px;
    padding: 7px;
    border: solid 1px #888;
    margin: 0 0 14px;
    font-size: 14px;
    font-family: arial;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
}

.form-control message {
    font-size: 10px;
}

#footer {
    position: absolute;
    background: #222;
    color: white;
    text-align: center;
    padding: 5px;
    padding-bottom: 0px;
    bottom: 0;
    left: 0;
    width: 100%;
    font-family: calibri, Times, serif;
}

@media only screen and ( max-width: 568px) {
    .cover h1 {
        font-size: 40px;
    }
    section {
        padding: 20px;
    }
    .newsletter {
        padding-top: 64px;
    }
    .newsletter p {
        margin-bottom: 75px;
    }
}

@media only screen and ( min-width: 768px) {
    .about p {
        font-size: 15px;
        margin-right: 75px;
        margin-left: 15px;
    }
    .navsocial i {
        margin-top: 5px;
        padding-top: 11px;
        font-size: 20px;
    }
}

@media only screen and ( min-width: 991px) {
    .about p {
        font-size: 15px;
        margin-right: 100px;
        margin-left: 100px;
    }
}

@media only screen and ( min-width: 1025px) {
    .about p {
        font-size: 15px;
        margin-right: 150px;
        margin-left: 150px;
    }
}

@media only screen and ( min-width: 1150px) {
    .about p {
        font-size: 15px;
        margin-right: 200px;
        margin-left: 200px;
    }
}

@media only screen and ( min-width: 1400px) {
    .about p {
        font-size: 15px;
        margin-right: 300px;
        margin-left: 300px;
    }
}

@media only screen and ( max-width: 991px) {
    .navsocial i {
        font-size: 20px;
    }
    .navbar .navbar-collapse li {
        font-size: 20px;

    }
    .navbar-nav >li {
        border-radius: 4px;
        color: whitesmoke;
    }
    @media only screen and ( max-width: 900px) {
        nav.navbar-inverse {
            margin-left: -50px;
        }
    }

显然，我做错了什么，可能很多事情，但让我们开始让页面看起来像我的HTML页面。也许有人可以提供更好的方法来接近这个？

我还要提前感谢大家的帮助！这是一个非常棒的社区，我很高兴来到这里：）

Answer 1

您似乎没有修改引导链接以反映.php文件的路径，而不是.html文件。

即

<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">

而不是

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

（与进一步向下的bootstrap.min.js链接相同）

此外，您的“Font Awesome”链接似乎有点偏离：

<link href="..//fa\css\font-awesome.css" rel="stylesheet" type="text/css" />

应该是

<link href="../fa/css/font-awesome.css" rel="stylesheet" type="text/css" />

纠正此问题可能会解决您的问题。然而，在这之前，我会考虑是否有任何充分的理由将php文件保存在单独的文件夹中？如果你有充分的理由我猜这很好，但这似乎是一种不必要的并发症。

另外需要注意：假设您在使用互联网时可以使用互联网：可以通过快速，可靠的内容传送网络（例如https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css）获得bootstrap和Font Awesome文件，并使用这些文件可以使您的本地，相对链接不必要。：）

希望这有帮助！

php联系表单有效，但看起来不对

1 个答案: