Newcastle University

Building Better Web Forms

A Standard Style Sheet

A useful style sheet for laying out forms has been produced, and can be included in your pages by adding one of the following (or whatever CSS include syntax you prefer) to your page header.

If you are using the central look and feel (this one), you should use something like the following as your header:

<?PHP
$title="Better Web Forms";
$css_include="/includes/css/forms.css";
require("header.php");
?>

If not and you are using your own design, you should include the following in the header of your template:

<style type="text/css" media="screen">
@import "http://www.ncl.ac.uk/includes/css/forms.css";
</style>

This stylesheet provides a number of classes which can be used to create common form layouts, examples are provided below, followed by the HTML code used to create them, the important bit to note is the class names.

Standard, full width fields

Your Details

Website Title: URL: Description:

<fieldset class="wideFields">
<legend>Your Details</legend>
<label>Website Title:
<input name="name" id="title"/></label>
<label >URL:
<input name="url" id="url"/></label>
<label>Description:<textarea rows="10" cols="15" 
name="description" id="description">
</textarea>
</label>
</fieldset>

Standard, columns and blocks of fields

Column Layouts

Two Columns:

Title: First Name: Last Name: Something: Lalala: Cheese?:

---

Three Columns:

Title: First Name: Last Name: Something: Lalala: Cheese?:

---

Four Columns:

Title: First Name: Last Name: Something: Lalala: Cheese?: Lalala: Cheese?:

---

Five Columns:

Title: First Name: Last Name: Something: Lalala:

---

Inspired Useful OK Bland Boring

 

<fieldset><legend>Column Layouts</legend>

<p>Two Columns:</p>
<div class="twoCols">
<label>Title: <input name="tname" id="tname"/></label>
<!-- etc -->
</div>

<hr class="clear"/>

<p>Three Columns:</p>
<div class="threeCols">
<label>Title: <input name="tname" id="tname"/></label>
<!-- etc -->
</div>

<hr class="clear"/>

<p>Four Columns:</p>
<div class="fourCols">
<label>Title: <input name="tname" id="tname"/></label>
<!-- etc -->
</div>

<hr class="clear"/>

<p>Five Columns:</p>
<div class="fiveCols">
<label>Title: <input name="tname" id="tname"/></label>
<!-- etc -->
</div>

<hr class="clear"/>

<div class="fiveCols centered">
<label>Inspired <input name="pages[]" type="radio"/></label>
<!-- etc -->
</div>

<div class="clear"/>

</fieldset>