Fatal编程技术网
  • php/
  • Php 电子邮件更改输入'；s CSS样式

Php 电子邮件更改输入'；s CSS样式

php javascript css forms

Php 电子邮件更改输入'；s CSS样式,php,javascript,css,forms,Php,Javascript,Css,Forms,我已经创建了一个联系人表单，使用标签作为一种占位符，将它们放在具有透明背景的输入框后面，然后在：focus上使背景为白色，并在输入值>0时将背景设置为白色 我最近在表单中加入了必要的PHP，这破坏了我的样式。我稍微恢复了一下，但不明白为什么输入太长了几个像素。当我将PHP置于doctype声明之上时，它会立即更改样式 我不知道如何通过页面刷新来显示页面标签。[看一看][1]看看你是怎么想的。我怎样才能使它顺利工作 [这是一个显示我的联系人表单样式的JSFiddle][2] 这是我的php <

我已经创建了一个联系人表单，使用标签作为一种占位符，将它们放在具有透明背景的输入框后面，然后在
：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>


Matthew Smith |联系人
#联系电话{
边框底部：5px实心#0af！重要；
}

联系

>
电子邮件

主题
消息
©；马特·史密斯

$（“#徽标”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“.quote”）.offset（）.top
}, 1000);                  
});
$（'input，textarea'）。在（'keyup'，function（）上{
var$this=$（this）；
如果（$（this.val（）.length>0）{
$this.css（{backgroundColor:'#fff'}）；
}否则{
$this.css（{backgroundColor:'transparent'}）；
}
});
{[1]：
{[2]：

联系人表单的问题不在于PHP，而在于您为字段编码标签的方式。我看到表单提交，然后您用PHP进行验证，如果出现问题，它会返回表单，并使用
value
属性设置当前值。这很好，但您需要一种方法来验证移除标签或仅使用
占位符
属性

这里使用占位符属性。

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

例如：

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

电子邮件
不支持此属性的浏览器将忽略此属性。您可以使用JavaScript（例如）为旧浏览器模拟此效果.

除非您发布php，否则这里没有人可以看到您的php。浏览器不会显示php，因为php是在浏览器看到页面之前处理的，因为它是一种服务器端语言。我的印象是表单中需要标签，这是一种合并标签的方法，看起来就像占位符一样。不需要标签吗？它们对acc有好处可访问性，但据我所知，它们不是必需的。你也可以将它们隐藏起来，这意味着它们是为屏幕阅读器而存在的，但不是所有人。我对占位符的唯一问题似乎是，你必须开始键入来隐藏它们。我已经用占位符更新了页面，但如何要求我的样式问题？我添加了一个jsfid对于我的回答，你能纠正输入的大小，使它不是几像素长吗？这是我目前的主要问题。没有php，这个问题是不存在的