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