Posted on: Wednesday, August 22nd, 2007

We have already learnt how to create a simple form with PHP, now we are going to style it

Below is the form we created in the previous tutorial:


<?php
if(isset($_POST['Submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];
$sendto = "example@email.com"; //enter your email address here
$subject = "A new comment has arrived via your site";

$body = 'A new comment has arrived via your website from: '.$name.' ('.$email.')n
Name: '.$name.'n
Email: '.$email.'n
Commentn---------------------------------------n'.
$comment;
include("emailvalidator.php");
if (check_email_address($email)) {
mail($sendto, $subject, $body, "From:".$email);
echo "Mail sent successfully!";
} else {
echo "The email address you supplied in invalid please try again";
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<h1>Contact Us </h1>
<form action="<?php $SERVER['PHP_SELF']; ?>" method="post" name="contact_us" id="contact_us">
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="comment">Comment</label>
<textarea name="comment" id="comment"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>

From this form we can see that we have various items that can be styled, they are ‘form’, ‘p’, ‘label’, ‘input’ and ‘textarea’.

To style these first create a stylesheet called style.css, then add the following code to the ‘head’ section of your webpage.


<link href="style.css" rel="stylesheet" type="text/css" media="screen">

Now we can open style.css and start adding our code. The first thing you may want to do is limit the size of your form, we can do this easily by adding a ‘width’ property to the form selector as follows:


form {
height: auto;
width: 400px;
}

Now how to make all of our input boxes line up. To do this we style the ‘label’ selector as follows:


label {
float: left;
width: 100px;
text-align: right;
padding-right: 25px;
}

But what does this do? The float property, combined with the width makes our labels a block level element, meaning that they are all uniform in size so the input that is next to them all line up correctly. The text-align right and padding right are to aid usability.

Now we have a basic styled form but we can go a little further. The input boxes as standard are of the 3D variety, we can change this by adding a simple border around them, remembering to add this to the textarea too.


input, textarea {
border: 1px solid #CCCCCC;
}

We can now decrease the spaces in between the rows of the form:


form p {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}

So there we have it, a styled form using CSS. The full CSS code is listed below for your convenience.

Please feel free to leave any comments below.

Full CSS Listing


form {
height: auto;
width: 400px;
}
label {
float: left;
width: 100px;
text-align: right;
padding-right: 25px;
}
input, textarea {
border: 1px solid #CCCCCC;
}
form p {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}

Popularity: 80% [?]

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]