JS - Forms and Form Processing

Forms

Delivery Details

1. Name*
2. Address*
3. Address 2
4. Town/City
5. County*
6. Postcode*
7. Is this address also your invoice address?*

   Yes No

The HTML for above forms:

<fieldset>
    <legend>Delivery Details</legend>
    <ol>
      <li>
        <label for="name">Name<em>*</em></label>
        <input id="name" />
      </li>
      <li>
        <label for="address1">Address<em>*</em></label>
        <input id="address1" />
      </li>
      <li>
        <label for="address2">Address 2</label>
        <input id="address2" />
      </li>
      <li>
        <label for="town-city">Town/City</label>
        <input id="town-city" />
      </li>
      <li>
        <label for="county">County<em>*</em></label>
        <input id="county" />
      </li>
      <li>
        <label for="postcode">Postcode<em>*</em></label>
        <input id="postcode" />
      </li>
      <li>
        <fieldset>
          <legend>Is this address also your invoice » 
address?<em>*</em></legend>
          <label><input type="radio" »
name="invoice-address" /> Yes</label>
          <label><input type="radio" »
name="invoice-address" /> No</label>
        </fieldset>
      </li>
    </ol>
</fieldset>

The CSS stylesheet for the above form:

form.cmxform fieldset {
  margin-bottom: 10px;
}
form.cmxform legend {
  padding: 0 5px;
  font-weight: bold;
}
form.cmxform label {
  display: inline-block;
  line-height: 1.8;
  vertical-align: top;
  width: 120px;
}
form.cmxform fieldset li {
  list-style: none;
  padding: 2px 5px;
}
form.cmxform fieldset fieldset {
  border: none;
  margin: 3px 0 0;
}
form.cmxform fieldset fieldset legend {
  padding: 0 0 5px;
  font-weight: normal;
}
form.cmxform fieldset fieldset label {
  display: block;
  width: auto;
}
form.cmxform em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}
form.cmxform fieldset fieldset label {
  margin-left: 123px;
}

The fieldset element draws a box around its containing elements.

Checkboxes

I have a bike:
I have a car:
I have an airplane:

Checkboxes are used when you want the user to select one or more options of a limited number of choices.

<form>
I have a bike:  <input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:   <input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:   <input type="checkbox" name="vehicle" 
value="Airplane" />
</form>

Dropdown box

The select element creates a drop-down list.

Volvo Saab Fiat Audi

HTML for the above form:

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Forms action attribute and the submit button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

<form name="input" action="handler.php"  method="get">
Username:   <input type="text" name="user">
<input type="submit" value="Submit">
</form>

©2007 Mehmud Abliz