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

【问题标题】：Email changes input's CSS styling电子邮件更改输入的 CSS 样式
【发布时间】：2026-02-06 18:25:01
【问题描述】：

我创建了一个使用标签作为占位符类型的联系表单，将它们放在具有透明背景的输入框后面，然后在:focus 上将背景设为白色，并在输入值大于 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/

【问题讨论】：

除非您发布，否则这里没有人可以看到您的 php。浏览器不显示 PHP，因为 PHP 是在浏览器看到页面之前处理的，因为它是一种服务器端语言。

标签： php javascript css forms

【解决方案1】：

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

这是一个使用占位符属性的jsfiddle。

【讨论】：

我的印象是表单中需要标签，这是一种结合标签的方式，看起来很好用作占位符。不需要标签吗？
它们有利于可访问性，但据我所知，它们不是必需的。您还可以将它们隐藏起来，这意味着它们可供屏幕阅读器使用，但并非所有人都可以使用
占位符似乎唯一的问题是您必须开始输入才能隐藏它们。我已经用占位符更新了页面，但我将如何重新定义我的样式问题？
我在答案中添加了一个 jsfiddle
你能更正输入大小，使它不是几个像素长吗？这是我目前的主要问题。没有 php，这个问题就不存在了

【解决方案2】：

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

例如：

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

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

【讨论】：