You are on page 1of 3

JSFormsandFormProcessing

Forms
DeliveryDetails

Name*

Address*

Address2

Town/City

County*

Postcode*

Isthisaddressalsoyourinvoiceaddress?*

Yes
No

TheHTMLforaboveforms:
<fieldset>
<legend>DeliveryDetails</legend>
<ol>
<li>
<labelfor="name">Name<em>*</em></label>
<inputid="name"/>
</li>
<li>
<labelfor="address1">Address<em>*</em></label>
<inputid="address1"/>
</li>
<li>
<labelfor="address2">Address2</label>
<inputid="address2"/>
</li>
<li>
<labelfor="towncity">Town/City</label>
<inputid="towncity"/>
</li>
<li>
<labelfor="county">County<em>*</em></label>
<inputid="county"/>
</li>
<li>
<labelfor="postcode">Postcode<em>*</em></label>
<inputid="postcode"/>
</li>
<li>
<fieldset>
<legend>Isthisaddressalsoyourinvoice
address?<em>*</em></legend>
<label><inputtype="radio"
name="invoiceaddress"/>Yes</label>
<label><inputtype="radio"
name="invoiceaddress"/>No</label>
</fieldset>
</li>
</ol>
</fieldset>

TheCSSstylesheetfortheaboveform:
form.cmxformfieldset{
marginbottom:10px
}
form.cmxformlegend{
padding:05px
fontweight:bold
}
form.cmxformlabel{
display:inlineblock
lineheight:1.8
verticalalign:top
width:120px
}
form.cmxformfieldsetli{
liststyle:none
padding:2px5px
}
form.cmxformfieldsetfieldset{
border:none
margin:3px00
}
form.cmxformfieldsetfieldsetlegend{
padding:005px
fontweight:normal
}
form.cmxformfieldsetfieldsetlabel{
display:block
width:auto
}
form.cmxformem{
fontweight:bold
fontstyle:normal
color:#f00
}
form.cmxformfieldsetfieldsetlabel{
marginleft:123px
}

Thefieldsetelementdrawsaboxarounditscontainingelements.

Checkboxes
Ihaveabike:
Ihaveacar:
Ihaveanairplane:

Checkboxesareusedwhenyouwanttheusertoselectoneormoreoptionsofalimitednumberof
choices.
<form>
Ihaveabike:<inputtype="checkbox"name="vehicle"value="Bike"/>
<br/>
Ihaveacar:<inputtype="checkbox"name="vehicle"value="Car"/>
<br/>
Ihaveanairplane:<inputtype="checkbox"name="vehicle"
value="Airplane"/>
</form>

Dropdownbox
Theselectelementcreatesadropdownlist.

Volvo

HTMLfortheaboveform:
<formaction="">
<selectname="cars">
<optionvalue="volvo">Volvo</option>
<optionvalue="saab">Saab</option>
<optionvalue="fiat">Fiat</option>
<optionvalue="audi">Audi</option>
</select>
</form>

Formsactionattributeandthesubmitbutton

Whentheuserclicksonthe"Submit"button,thecontentoftheformissenttoanotherfile.Theform's
actionattributedefinesthenameofthefiletosendthecontentto.Thefiledefinedintheactionattribute
usuallydoessomethingwiththereceivedinput.
<formname="input"action="handler.php"method="get">
Username:<inputtype="text"name="user">
<inputtype="submit"value="Submit">
</form>

2007MehmudAbliz