What Makes a Web Form Usable or Unusable

A Basic Label for a Text Input Field

First Name

<label>First Name <input type="text" name="firstname"></label>

Return to What Makes a Web Form Usable or Unusable Article

Label with the "for" Attribute

Last Name

<label for="lastname">Last Name</label> <input type="text" name="lastname" id="lastname">

Return to What Makes a Web Form Usable or Unusable Article

Add Some Styles to The Label

Address

label { cursor: hand; }

Return to What Makes a Web Form Usable or Unusable Article

A Form with a Fieldset

<fieldset>
<label for="home">Home Phone</label>
<input type="text" name="home" id="home">
<br>
<label for="work">Work Phone</label>
<input type="text" name="work" id="work">
<br>
<label for="cell">Cell Phone</label>
<input type="text" name="cell" id="cell">
</fieldset>

Return to What Makes a Web Form Usable or Unusable Article

A Fieldset with a Legend

<fieldset>
<legend>Phone Numbers</legend>
<label for="home">Home Phone</label>
<input type="text" name="home" id="home">
<br>
<label for="work">Work Phone</label>
<input type="text" name="work" id="work">
<br>
<label for="cell">Cell Phone</label>
<input type="text" name="cell" id="cell">
</fieldset>

Return to What Makes a Web Form Usable or Unusable Article

Styling the Fieldset and Legend

fieldset {
  border: 0.2em solid #fd3400;
  width: 30em;
  background-color: #f2efe8;
  clear:both;
}
legend {
  border: 0;
  background-color: #999999;
  color: #ffffff;
  padding: 0.2em 0.5em;
}
input {
  color: #000;
  background-color: #fe9a80;
  border: 0.1em solid #999999;
}

Return to What Makes a Web Form Usable or Unusable Article

A Basic Optgroup

<label>Name your favorite pet <select name="list">
<option></option>
<optgroup label="mammals">
<option>dog</option>
<option>cat</option>
<option>rabbit</option>
<option>horse</option>
</optgroup>
<optgroup label="reptiles">
<option>iguana</option>
<option>snake</option>
</optgroup>
</select>
</label>

Return to What Makes a Web Form Usable or Unusable Article

A Styled Optgroup

select {
  background-color:#fe9a80;
}
optgroup {
  background-color:#fff;
  color:#fd3400;
  font-weight: bold;
}
optgroup option {
  background-color:#fe9a80;
  color:#000;
}

Return to What Makes a Web Form Usable or Unusable Article

A Basic Login Form (no Styles)

Username: Password:

Username: Password:

Layout a form With Labels, CSS, and No Tables

Name
Address
Phone

label, input {
  display: block;
   width: 15em;
   float: left;
   margin-bottom: 0.5em;
}
label {
   text-align: right;
   width: 5em;
   padding-right: 1em;
}
br {
   clear: left;
}

Return to What Makes a Web Form Usable or Unusable Article

Lots of Submit Buttons

The simplest submit button:

<input type="submit">

Add a value so it doesn't say "Submit Query":

<input type="submit" value="Submit">

What about some color?

<input type="submit" value="Submit" style="background-color:#c00; color:#fff;">

But the border is still ugly:

<input type="submit" value="Submit" style="background-color:#c00; color:#fff; border:solid 2px #c00;">

But that looks too flat:

<input type="submit" value="Submit" style="background-color:#c00; color:#fff; border:outset 2px #c00;">

Return to What Makes a Web Form Usable or Unusable Article

Put the Submit Field in the Form

Name
Address
Phone

<input type="submit" value="Submit" style="background-color:#c00; color:#fff; border:outset 2px #c00; margin-left: 7.2em;">

Return to What Makes a Web Form Usable or Unusable Article

Select the Helper Text on Click

<input type="text" name="search" id="search" value="Type in your search" onfocus="this.select()">

Return to What Makes a Web Form Usable or Unusable Article