Datasheet-style form

Datasheet-style form

This worked example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.

Scenario

You want to let users view, enter, or edit multiple records of the same type. You would like to use the least space possible, without compromising usability.

A conventional way of showing multiple similar rows is the datasheet. It takes the labels for fields and records to the extremes (column and row headers), allowing for a very compact format.

These snippets show examples of the datasheet format from MSAccess and Excel.

1. A basic table

We want to show several data records in a handy grid, let the user sort the list, and delete one or more selected records.

We'll start with a basic table.

2. Differentiate the column headers in HTML

It's always good practice to make column headers <th> tags inside the table's <thead> section.

3. Style the table

The table headers above have the browser's default <th> styling, so don't look very good. We'll fix that by applying a style class to the table.

In HTML, the table is now <table class="datasheet">

table.datasheet {
	width:100%;
}
.datasheet th {
	padding:3px;
	background-color:#ddd;
	border-top:1px solid #eef;
	border-left:1px solid #eef;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	color:#003;
	font-size:.9em;
	font-weight:bold;
}
.datasheet th {
	text-align:left;
}
.datasheet tr {
	vertical-align:top;
}
.datasheet td {
	padding:0px;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	background-color:#fff;
	font-size:.9em;
}
.datasheet td input {
	border:0px none;
	width:100%;
	height:100%;
	//width:90%;
	//height:90%;
}

The styled table:

The table headers now have the grey, bevelled effect we want. The table cells still look untidy, so we'll fix that now.

In a real datasheet, the entire grid cell is the input field, so we want the form inputs in the cells to fill the entire cell. That's achieved with the section:

.datasheet td input {
	border:0px none;
	width:100%;
	height:100%;
	//width:90%;
	//height:90%;
}

In English, this applies to "Any form input that is a child of a table cell within an object of class 'datasheet' ".

Also notice the //width:90%; and //height:90%;

This is a fix for IE versions, which can make the elements overlap outside their containing cells when set to 100% width/height.

Note: I've used both "border:0px" and "none". This is required to force the input controls' borders to be hidden in all browsers.

5. Make the datasheet fit into the background

Currently, the table doesn't stand out from the grey background quite enough. We'll use a bit of CSS to give it a groove effect.

To do this, I'll wrap the whole datasheet inside two divs:

.form_groove_outer {
	padding:0px;
	margin:0px;
	border-top:1px solid #669;
	border-bottom:1px solid #fff;
	border-right:1px solid #fff;
}
.form_groove_inner {
	padding:0px;
	margin:0px;
	border-left:1px solid #669;
}

You can simply wrap an element in a div with a solid border, with light right & bottom edges and darker top & left edges, but this technique works better at the corners in Mozilla/Netscape.

Example:

Here's our datasheet with the groove effect - nice!

6. Add row counters

With a large table, you might want to have row counters. These aren't part of the editable datasheet, so we want to style them the same as table headers.

This is easy to do in HTML/CSS. All we'll do is add <th> cells at the beginning of each line (which is legal).

.datasheet th {
	padding:3px;
	background-color:#ddd;
	border-top:1px solid #eef;
	border-left:1px solid #eef;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	color:#003;
	font-size:.9em;
	font-weight:bold;
	text-align:left;
}
.datasheet tbody th {
	text-align:right;
	padding:1px 3px 1px 1px;
	color:#222;
}

I've added an extra bit of formatting to make the row numbers right-align, and pad them out from the right side of the cells.

You could use this style for any piece of non-editable data, typically a record's unique identifier.

Result:

7. Final touch - showing changed fields

Often when I use this type of control, when you've edited data and hit submit, the same page reloads. This creates a usability issue: How do you know that your data has indeed been submitted?

There needs to be some visual indicator that a) You've changed a field, and b) That your changes have been submitted and reloaded successfully.

The CSS:

#changed {
	background-color:#ffa;
}

The HTML & JavaScript:

<input name="record_1_fieldname" value="" type="text"
  onchange="this.className='changed';" />

Notes on multiple-row forms:

Each record has a hidden field, e.g. <input type="hidden" value="" name="record_1_changed" />

When the user changes a field, JavaScript sets the record's 'changed' field to 'True'.

When submitted, the back-end code reads another hidden field ('record_ids') that gives a list of the records present. It then checks the form data to see if each record's 'changed' property is true. Only then does it update the related record in the database.