PHP-Scripts Blog » HTML http://www.php-scripts.com Writing about PHP scripting since 12/99. Learn something new every day. Thu, 09 Oct 2008 14:17:07 +0000 http://wordpress.org/?v=2.2.3 en Making multiple form output look better http://www.php-scripts.com/20051114/63/ http://www.php-scripts.com/20051114/63/#comments Mon, 14 Nov 2005 18:29:04 +0000 TDavid http://www.php-scripts.com/?p=63 You don’t have to know a ton of Cascading Style Sheet (CSS )to make forms look nicer on a web page. Let’s take a recent simple script I created. It’s a simple auction display script written in PHP. The version without any styling is shown below:

multiple forms in rows of data without any CSS

Notice the forms look pretty plain. We can add styling to each input form like this:

STYLING A SUBMIT BUTTON
<input type=“submit” value=“New bid”
style=“font-family: Arial; font-size: 8pt; color: #FFFFFF;
font-weight: bold; background-color: #000080″/>

STYLING A TEXT INPUT (dark green background, white text)
<input type=“text” name=“bid”
style=“font-family: Arial; font-size: 8pt; color: #FFFFFF;
font-weight: bold; background-color: #005F04″/>

STYLING A TEXT INPUT (dark blue background, white text)
<input type=“text” name=“email_bidder”
style=“font-family: Arial; font-size: 8pt; color: #FFFFFF;
font-weight: bold; background-color: #000080″/>

multiple forms in rows of data without any CSS

Getting better, but there is still spacing between the form in the Internet Explorer browser between the rows which needs to be removed. Also, it would be wasteful to include the style in each input box repeatedly on the page. So let’s create a small bit of CSS to handle these three conditions.

<head>
<title>A very simple auction script</title>
<style TYPE=“text/css”>
form { margin: 0; padding: 0 }
.bidback {
font-family: Arial; font-size: 8pt; color: #FFFFFF; font-weight: bold; background-color: #005F04
}
.bidreg {
font-family: Arial; font-size: 8pt; color: #FFFFFF; font-weight: bold; background-color: #005F04
}
</style>
</head>

The .bidreg class will be used for the submit input field and the email text input field. The form { margin: 0; padding: 0 } removes the spacing around the closing FORM tag. The new HTML input looks like this:

<input type=“text” name=“bid” size=“5″ class=“bidback”/> email: <input type=“text” name=“email_bidder” size=“15″ class=“bidreg”/> <input type=“submit” value=“New bid” class=“bidreg”/>

And looks like this:

multiple forms in rows of data without any CSS

Additionally, it might be nice to put the output in a table so it is more evenly aligned, but I’ll leave that to readers.

]]> http://www.php-scripts.com/20051114/63/feed/