Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
74 views

Javascript - Forms

The document discusses different HTML form elements including text fields, checkboxes, dropdown boxes, and submit buttons. It provides examples of the code needed to create each type of form element and explains what each one is used for.

Uploaded by

papu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
74 views

Javascript - Forms

The document discusses different HTML form elements including text fields, checkboxes, dropdown boxes, and submit buttons. It provides examples of the code needed to create each type of form element and explains what each one is used for.

Uploaded by

papu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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

You might also like