Question

我创建了一个联系表单，使用标签作为一种占位符，将它们放在输入框后面，使用透明背景，然后在:focus上设置背景白色，并在输入值为＆gt;时将背景设置为白色。 0

我最近将必要的PHP合并到我的表单中，这已经破坏了我的样式。我稍微恢复了一下，但不明白为什么输入的像素太长了。一旦我将PHP放在doctype声明之上，它就会改变样式。

我不知道如何处理页面刷新时显示的页面标签。 [看看] [1]，看看你的想法。我怎样才能让它顺利运作？

[这是一个JSFiddle显示我的联系表单样式] [2]。

这是我的php

<?php
if (empty($_POST) === false){
    $errors = array();

    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    if (empty($name) === true || empty($email) === true || empty($message) === true) {
        $errors[] = 'Name, email and message are required!';
    } else {
        if (filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
            $errors[] = 'Invalid email address';
        }
        if (ctype_alpha($name) === false) {
            $errors[] = 'Name must contain letters only';
        }
    }

    if (empty($errors) === true) {
        mail('mailmattysmith@gmail.com', 'Contact form', $message, 'From: ' . $email);
        header('Location: index.php?sent');
        exit();
    }
}
?>
<!DOCTYPE HTML>
<html>
<head>
    <title>Matthew Smith | Contact</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        #contact_btn{
            border-bottom: 5px solid #0af !important; 
        }
    </style>
</head>
<body>
    <?php 
        include("header.php");
    ?>

    <div id="wrapper">
        <img class="click_contact" id="logo" src="img/logo1.png">
        <br><p id="contact_me" class="quote">Get In touch</p>
        <div id="contact_form">
            <?php
                if (isset($_GET['sent']) === true) {
                    echo '<p>Thanks for contacting me</p>';
                } else {

                    if (empty($errors) === false) {
                        echo '<ul>';
                        foreach ($errors as $error) {
                        echo '<li>', $error, '</li>';
                    }
                        echo '</ul>';
                }
            ?>

            <form action="" method="post" >
                <div class="input_wrap" id="first">
                    <input type="text" name="name" id="name" <?php if (isset($_POST['name']) === true) { echo 'value="', strip_tags($_POST['name']), '"'; } ?>>
                    <label for="name">Name</label>
                </div>
                <div class="input_wrap">
                    <input type="text" name="email" id="email" <?php if (isset($_POST['email']) === true) { echo 'value="', strip_tags($_POST['email']), '"'; } ?>>
                    <label for="email">Email</label><br>
                </div>
                <div class="input_wrap">
                    <input>
                    <label>Subject</label>
                </div>
                <div class="input_wrap" id="last">
                    <textarea name="message" id="message"><?php if (isset($_POST['message']) === true) { echo strip_tags($_POST['message']), ''; } ?></textarea>
                    <label for="message">Message</label>
                </div>
                <input type="submit" id="send" value="Send">
            </form>
            <?php 
            }
            ?>
        </div>
        <div id="footer"><p>&#169; Matt Smith <?php echo date('Y'); ?></p></div>
    </div>

    <script type="text/javascript">

    $('#logo').click(function(){

                    $('html, body').animate({
                        scrollTop: $(".quote").offset().top
                    }, 1000);                  


                 });


    $('input, textarea').on('keyup', function() {
    var $this = $(this);

    if($(this).val().length > 0) {
        $this.css({backgroundColor: '#fff'});
    } else {
        $this.css({backgroundColor: 'transparent'});
    }
    });

    </script>
</body>
</html>

{[1]：http://www.dominichook.co.uk/matthew/contact.php {[2]：http://jsfiddle.net/tUnc4/

Answer 1

您的联系表单的问题不是PHP，而是实际上您为字段编写标签的方式。我看到表单提交，然后您在PHP中进行验证，然后如果出现问题，它将返回包含使用value属性设置的当前值的表单。这很好，但您需要一种删除标签的方法或只需使用placeholder属性。

这里使用占位符属性jsfiddle。

Answer 2

您应该考虑使用placeholder属性而不是过于复杂的解决方案。

例如：

<label for="email">Email</label>
<input type="email" placeholder="you@example.com" name="email" id="email" />

不支持此属性的浏览器将忽略它。您可以使用JavaScript模拟旧浏览器的效果（例如，Simple-Placeholder）。

电子邮件更改输入的CSS样式

2 个答案: