–– workshop home ––

Workshops

Presenter Notes

Overview

Concepts

  1. A unique tag in that it does an action. All other HTML tags are structural.
  2. Extremely limited. Takes fields and sends them to something else, non-HTML.
  3. By itself, the form tag can do nothing.
  4. Content is handled by other tags. form only sends.
    1. input, textarea, option, button, are all examples of tags that actually gather input
    2. Analogous: the table tag does nothing but relies on other tags for the content
  5. Form design is its own subject, which we'll address

We will look next time at the programming side. For now, your exercise file calls a php file that we're just going to ignore. That's the file that does all the processing.

I'm not going to cover ASP. There is a file for emailing a form using ASP in the Webcenter Library. If you have an immediate need, use that. Otherwise, wait for the new environment (could be a year) and do all your forms using PHP.

We intend to design an environment where you don't need to know any PHP, you only need to know how to set some parameters and call the file, rather like what we're doing here in today's workshop.

Simplest Forms

<form method="post" action="something">

	<input type="text">
</form>

This will put a single input box on the screen, with no prompts and no button for submitting the form.

The method should always be post. The differences between post and get are significant, but are of concern only to the advanced form designer.

The action can be a wide variety of things, but underneath they're all the same: it's where the form results get sent. This can be another web page, a program, or a web service.

The Starter File

Download form1.html and take a look at the source code. You will see there's a bunch of other stuff in there. What's that about?

The Man Behind The Curtain

Two, actually. One is the php file, referenced in the form tag. The other is our email relay server, which has certain requirements.

It requires a to and a from. Obviously, right? Just as with a physical mail, there must always be a sender and a recipient. It doesn't actually require a subject, but it really ought to be there.

So, since the relay server requires these three elements, we require them in our PHP processing script. That way, if the information is missing, the error happens at the level of the PHP code, rather than causing an error on the relay server. We don't have much in the way of error handling in place yet, but once we have a production version (months away yet), then we'll be able to handle error conditions gracefully.

Hidden Fields

The way to send data to a form handler without displaying on the screen is to use hidden fields. That's what you're seeing on the screen. You must always have these fields. They can be gathered from the user (in some situations), but one way or another they are required.

For this workshop, fill in the to with your email. The subject I've filled in for you, though you could use any string you wish. This is what you'll see in your email program for a Subject.

The fromemail is a special value. The relay server requires this, but we aren't actually using it, so the standard protocol is to use no-reply.

We could have designed a form that asked the user to supply an email. If we had an automated reply process ("thank you for your comments, here's some more information" sort of thing), then we would make this a visible field. The key is that the name must remain unchanged; just remove the value="no-reply@boisestate.edu" part.

Types of Fields

Text

Produces a one-line input field. You can control the width.

input type="text"

Radio

Allows selection of one and only one option.

Requires use of name-value pairs

<input type="radio" name="setname" value="selection" />
<input type="radio" name="setname" value="selection" />
<input type="radio" name="setname" value="selection" />
<input type="radio" name="setname" value="selection" />

By making setname the same for all four selections, these four are grouped together. If there were a second sent of radio buttons on the same form, use a different setname for them.

The value is what gets returned when the user makes that selection. If the set name were, for example "favorite" and the selection chosen was "dog", then what would get sent is favorite=dog.

Checkbox

The logic for checkboxes is the same as for radio buttons, except checkboxes allow for multiple selections.

<input type="checkbox" name="setname" value="selection" />
<input type="checkbox" name="setname" value="selection" />
<input type="checkbox" name="setname" value="selection" />
<input type="checkbox" name="setname" value="selection" />

Option Box

<select name="setname" />
	<option>dog</option>
	<option>cat</option>
	<option>mouse</option>
	<option>Tyrannosaurus Rex</option>
	<option>bird</option>
	<option>fish</option>
</select>

Textarea

Produces a multi-line input field. You can control both width and height.

textarea cols="number" rows="number"

submit and reset

The easiest tags in a form. This is a special value of the input tag. The submit button submits the contents of the form fields to the destination specified in the action element. reset clears all fields. There is no way in HTML to clear only selected fields.

Note: do not use Javascript to perform these functions because if the browser doesn't have Javascript there will be no way to submit the form.

Common Elements

Name

Always give a unique name to each of your fields. This is good programming practice, but it also will make your output more readable to humans.

Options

Text

size

size="number" sets the width of the field in number of characters. You can't set it in ems or pixels, alas.

If you add value="string", the string will appear in the textbox and will have to be deleted by the user to enter information. This is one way to prompt, and is also a way to have something returned even if the user neglects to fill in the field (useful for databases that don't like null strings).

maxlength

size sets the visible size of the field. maxlength sets the maximum number of characters that can be entered into the field, regardless of its size. This is a primitive way to control data input.

Textarea

Set columns and rows. Not really an option; you will nearly always want to do this.

Radio

Grouping Radio Buttons with Name

If you have multiple sets of radio buttons on the same form, you must use the name element to segregate them; otherwise, the user will be able to check one and only one radio button out of all the radio buttons on the form.

checked

Normally, none of the buttons are selected. Set checked="on" for the option you want to be pre-selected. This ensures you will not have a null value returned.

Example
<input type="radio" name="gender" value="M" /> Male
<input type="radio" name="gender" value="F" /> Female
<input type="radio" name="gender" value="N" checked="on" /> I do not wish to answer

Checkbox

Same options as for radio buttons.

Option Box

multiple

Use this (takes no parameters) to allow user to select (using the ctrl key) multiple options.

optgroup

Use this to group options under a heading within the dropdown list. Example:

<p>Which Web browser do you use most often?
  <select name=browser>
    <optgroup label="Firefox">
      <option label="2.0 or higher">
        Firefox 2.0 or higher
      </option>
      <option label="1.5.x">Firefox 1.5.x</option>
      <option label="1.0.x">Firefox 1.0.x</option>
    </optgroup>
    <optgroup label="Microsoft Internet Explorer">
      <option label="7.0 or higher">
        Microsoft Internet Explorer 7.0 or higher
      </option>
      <option label="6.x">Microsoft Internet Explorer 6.x</option>
      <option label="5.x">Microsoft Internet Explorer 5.x</option>
      <option label="4.x">Microsoft Internet Explorer 4.x</option>
    </optgroup>
    <optgroup label="Opera">
      <option label="9.0 or higher">Opera 9.0 or higher</option>
      <option label="8.x">Opera 8.x</option>
      <option label="7.x">Opera 7.x</option>
    </optgroup>
    <option>Safari</option>
    <option>Other</option>
  </select>
</p>
Name and Value

Without these, the form merely sends the data, with no identification as to which field it belongs.

<form method="post" action="something">
	<input type="text" name>
</form>

Structural Tags

fieldset

This tag lets you create sections within a form. Think of it in part as serving a function similar to a div in that you can style each fieldset. More importantly, it improves usability by letting you assign a legend to each.

legend

Always used in conjunction with fieldset. Provides a caption for a set of controls (fields).

label

This is an important tag for accessibility. Always use it in conjunction with an id, even though there are situations where it's allowed to dispense with the id.

Example
<label for="year">Year</label>
<select name="Year" id="year">
	<option>Freshman</option>
	<option>Sophomore</option>
	<option>Junior</option>
	<option>Senior</option>
</select>

Note: the value of for and the value of id must match exactly, including case. The value of name can be different; it must match the column heading in your database.

Styling Forms

In general there are two reasons to style your forms: look and layout. The goal is always clarity and usability, of course. Style the look of the form to make it more attractive and interesting, but also to help clarify the intent of the form. You can change the look not only of the text, you can style the form elements (fields, buttons, etc.).

Layout is nearly always an issue, even with very simple forms. City, state and zip code, for example, should be separate fields and normally will be on the same line; you would not, however, want to put street address on the same line as these other three. Arrangement of radio buttons and checkboxes also have standard layout issues, while the presence of a textarea box or a select box can present real challenges.

Here as with other layout challenges, the older approach was to use tables to force layout. That's okay, if the information being presented is tabular in nature. Otherwise, use divs.

Styling Form Look

Style any text the way you would any other text.

You can set the borders and colors on any of the form controls.

Make good use of fieldset to indicate logical grouping, and style accordingly.

Styling Form Layout

In general, you will use lots of divs and spans to accomplish your goals here. It's trickier than columns because you are placing not only text but form controls (fields). It gets even trickier for the design perfectionist because the form controls don't usually occupy the same vertical space as the text of the prompts.

Form design consists of using a small toolkit of techniques and then spending endless hours twiddling.

Here more than ever, be sure to check your work in multiple browsers and at varying viewport widths.

Data Validation

Basic Concepts

You want your forms to go to a database. Seriously. Email just doesn't cut it.

And databases are finicky. A numeric data field won't accept character data. Some fields won't accept null data.

Humans should be even finickier. Phone number, SSN, Employee ID, zip code, these each have their own specific format. Dates should be in valid ranges. And so on.

Use data validation to ensure that the data that is sent is in a format that is both valid and useful … without unduly annoying the user. It's a challenge.

Finally, it's increasingly important to "cleanse" the data before sending it because all our forms are getting hit by spambots and hack attempts. This is true both for emailed results and for results that go to a database.

Numeric Data

The main point here is that you want to make sure only numbers enter in. But there are numbers and then there are numbers.

Use numeric ranges wherever appropiate.

Alphabetic Data

Much more complex.

Handling Date and Time

The most difficult, but there are many scripts out there to help you with it.

Separate day, month and year into separate form controls. Then use your script to convert to a true date.

Connecting to Databases

Basic Concepts

The process forms a connection with a database and then passes the information to the database. It's up to you, the programmer, to make sure the fields are in the right order, are being sent to the right table, etc.

The connection is formed by using a call that varies from one language to the next in its format. Key elements are the database name, user name, password.

Multipart Forms

Basic Concepts

Mostly we think of forms in terms of paper: what fits on a sheet of paper. The design and flow of the form is dictated by the size of the paper.

On the web, you should think instead in terms of flow: Step 1, Step 2, Step 3. And, very often, Step 3 may vary depending on choices made in Step 2. We cannot make paper forms that display different information in different circumstances. On the web, we can.

This is a fundamental difference and nearly always means you need not only to re-think the form, you need to re-analyze the business process it represents. More on that later.

One consequence of the change is that we often will want to design forms that change their content based on choices. This can be handled by changing the display on the existing page, or by branching to different pages depending on choices made on previous pages.

Form Security

Basic Concepts

Because a form takes an action, because it can be sent to a program such as sendmail, and because many forms have the power to write to the file system or to a database, very form is a potential security hole.

Forms and Privacy

Basic Issues

In paper forms, the physical reality the controlling factor. A paper form might be sent in a Confidential envelope. There might be business rules that cause it to be shredded or kept in a secure location.

Web forms live in public space. Picture always leaving your forms in a box on a street corner.

We have to be very careful and think long and hard about what information we collect, how we collect it, and what happens to it once it's collected.

Forms and Business Processes