Web開發(fā)基礎(chǔ)

HTMLform&JavaScript趙剛Web開發(fā)基礎(chǔ)

HTMLform&JavaScript趙MoreaboutHTML-Formeverytimeyouwanttocollectinformationfromavisitortoyoursite,youneedtouseaformessentialofwebdevelopment2MoreaboutHTML-FormeverytimeCreatingaFormwiththe<form>ElementThe<form>elementcanalsocontainothermarkup,suchasparagraphs,headings…A<form>elementmustnot,however,containanother<form>elementyourpagemaycontainasmanyformsasyoulikebutuserswillbeabletosendthedatafromonlyoneformatatimetotheserveressentialofwebdevelopment3CreatingaFormwiththe<form<form>Betweentheopening<form>andclosing</form>tags thetextinputboxes drop-downboxes checkboxes submitbutton……essentialofwebdevelopment4<form>Betweentheopening<forEx.<formaction=”/search.aspx”method=”get”> <h3>Searchthesite</h3> <inputtype=”text”name=”txtSearchItem”/> <inputtype=”submit”value=”Search”/></form>essentialofwebdevelopment5Ex.<formaction=”http://www.exTheformAttributeTheactionAttributeTheactionattributeindicateswhathappenstothedatawhentheformissubmitted<formaction=”/membership/login.aspx”>ThemethodAttributeTheget

method,whichsendsdataaspartoftheURLThepost

method,whichhidesdataintheHTTPheadersessentialofwebdevelopment6TheformAttributeTheactionAOtherusefulAttributeTheidAttributeTheidattributeallowsyoutouniqueidentifythe<form>elementwithinapage,justasyoucanuseittouniquelyidentifyanyelementonapage.TheonsubmitAttributeonsubmit=”validateFormDetails();”TheonresetAttribute…

essentialofwebdevelopment7OtherusefulAttributeTheidAWhychecksformbeforesenttotheserver??Theuserdoesnothavetowaittheextratimeitwouldtakeforthepagetobesenttotheserverandthenreturnedifthereareanyerrors.?Theserverdoesnothavetodealwithasmucherrorcheckingessentialofwebdevelopment8WhychecksformbeforesenttoFormControls?Textinputcontrols?Buttons?Checkboxesandradiobuttons?Selectboxes(sometimesreferredtoasdrop-downmenus)andlistboxes…essentialofwebdevelopment9FormControls?TextinputcontTextInputsSingle-linetextinputcontrolsPasswordinputcontrols<formaction=”/login.aspx”method=”post”>Username:<inputtype=”text”name=”txtUsername”value=”“size=”20”maxlength=”20”/><br/>Password:<inputtype=”password”name=”pwdPassword”value=”“size=”20”maxlength=”20”/><inputtype=”submit”value=”Submit”/></form>essentialofwebdevelopment10TextInputsSingle-linetextinTextInputsMulti-linetextinputcontrols<formaction=”/feedback.asp”method=”post”>Pleasetelluswhatyouthinkofthesiteandthenclicksubmit:<br/><textareaname=”txtFeedback”rows=”20”cols=”50”>Enteryourfeedbackhere.</textarea><br/><inputtype=”submit”value=”Submit”/></form>essentialofwebdevelopment11TextInputsMulti-linetextinpCreatingButtonsUsingthe<input>Element<inputtype=”submit”name=”btnVoteRed”value=”Voteforreds”/><inputtype=”submit”name=”btnVoteBlue”value=”Voteforblues”/><br/><br/><inputtype=”reset”value=”Clearform”/><br/><br/><inputtype=”button”value=”calculate”onclick=”calculate()”/><inputtype=”image”src=”submit.jpg”alt=”Submit”name=”btnImageMap”/>essentialofwebdevelopment12CreatingButtonsUsingthe<inCheckboxes<formaction=”/cv.aspx”method=”get”name=”frmCV”>Whichofthefollowingskillsdoyoupossess?Selectallthatapply.<inputtype=”checkbox”name=”chkSkills”value=”html”/>HTML<br/><inputtype=”checkbox”name=”chkSkills”value=”xhtml”/>XHTML<br/><inputtype=”checkbox”name=”chkSkills”value=”CSS”/>CSS<br/><inputtype=”checkbox”name=”chkSkills”value=”JavaScript”/>JavaScript<br/><inputtype=”checkbox”name=”chkSkills”value=”aspnet”/>ASP.Net<br/><inputtype=”checkbox”name=”chkSkills”value=”php”/>PHP</form>essentialofwebdevelopment13Checkboxes<formaction=”http:/RadioButtons<formaction=”/flights.aspx”name=”frmFlightBooking”method=”get”>Pleaseselectwhichclassoftravelyouwishtofly:<br/><inputtype=”radio”name=”radClass”value=”First”/>Firstclass<br/><inputtype=”radio”name=”radClass”value=”Business”/>Businessclass<br/><inputtype=”radio”name=”radClass”value=”Economy”/>Economyclass<br/></form>essentialofwebdevelopment14RadioButtons<formaction=”httSelectBoxes<selectname=”selColor”><optionselected=”selected”value=”“>Selectcolor</option><optionvalue=”red”>Red</option><optionvalue=”green”>Green</option><optionvalue=”blue”>Blue</option></select>essentialofwebdevelopment15SelectBoxes<selectname=”selCCreatingScrollingSelectBoxes<formaction=”/days.aspx”name=”frmDays”method=”get”><selectsize=”4”name=”selDay”><optionvalue=”Mon”>Monday</option><optionvalue=”Tue”>Tuesday</option><optionvalue=”Wed”>Wednesday</option><optionvalue=”Thu”>Thursday</option><optionvalue=”Fri”>Friday</option><optionvalue=”Sat”>Saturday</option><optionvalue=”Sun”>Sunday</option></select><br/><br/><inputtype=”submit”value=”Submit”/></form>essentialofwebdevelopment16CreatingScrollingSelectBoxeSelectingMultipleOptionswiththemultipleAttribute<formaction=”/days.aspx”method=”get”name=”frmDays”>Pleaseselectmorethanonedayoftheweek:<br/><selectname=”selDays”multiple=”multiple”><optionvalue=”Mon”>Monday</option><optionvalue=”Tue”>Tuesday</option><optionvalue=”Wed”>Wednesday</option><optionvalue=”Thu”>Thursday</option><optionvalue=”Fri”>Friday</option><optionvalue=”Sat”>Saturday</option><optionvalue=”Sun”>Sunday</option></select><br/><br/><inputtype=”submit”value=”Submit”></form>essentialofwebdevelopment17SelectingMultipleOptionswitGroupingOptionswiththe<optgroup>Element<formaction=”/info.aspx”method=”get”name=”frmInfo”>Pleaseselecttheproductyouareinterestedin:<br/><selectname=”selInformation”><optgrouplabel=”Hardware”><optionvalue=”Desktop”>Desktopcomputers</option><optionvalue=”Laptop”>Laptopcomputers</option></optgroup><optgrouplabel=”Software”><optionvalue=”O(jiān)fficeSoftware”>Officesoftware</option><optionvalue=”Games”>Games</option></optgroup><optgrouplabel=”Peripherals”><optionvalue=”Monitors”>Monitors</option><optionvalue=”InputDevices”>InputDevices</option><optionvalue=”Storage”>Storage</option></optgroup></select><br/><br/><inputtype=”submit”value=”Submit”/></form>essentialofwebdevelopment18GroupingOptionswiththe<optStructuringYourForms<fieldset>elementcreatesaborderaroundthegroupofformcontrolstoshowthattheyarerelated.<legend>elementallowsyoutospecifyacaptionforthe<fieldset>element,whichactsasatitleforthegroupofformcontrols.Whenused,the<legend>elementshouldalwaysbethefirstchildofthe<fieldset>element.essentialofwebdevelopment19StructuringYourForms<fieldseEx.<formaction=”/competition.asp”method=”post”name=”frmComp”><fieldset><legend><em>ContactInformation</em></legend><label>Firstname:<inputtype=”text”name=”txtFName”size=”20”/></label><br/><label>Lastname:<inputtype=”text”name=”txtLName”size=”20”/></label><br/><label>E-mail:<inputtype=”text”name=”txtEmail”size=”20”/></label><br/></fieldset><fieldset><legend><em>CompetitionQuestion</em></legend>HowtallistheEiffelTowerinParis,France?<br/><label><inputtype=”radio”name=”radAnswer”value=”584”/>584ft</label><br/><label><inputtype=”radio”name=”radAnswer”value=”784”/>784ft</label><br/><label><inputtype=”radio”name=”radAnswer”value=”984”/>984ft</label><br/><label><inputtype=”radio”name=”radAnswer”value=”1184”/>1184ft</label><br/></fieldset><fieldset><legend><em>TiebreakerQuestion</em></legend><label>In25wordsorless,saywhyyouwouldliketowin$10,000:<textareaname=”txtTiebreaker”rows=”10”cols=”40”></textarea></label></fieldset><fieldset><legend><em>Entercompetition</em></legend><inputtype=”submit”value=”EnterCompetition”/></fieldset></form>essentialofwebdevelopment20Ex.<formaction=”http://www.exSendingFormDatatotheServerHTTPget/login.aspx?txtUsername=water&pwdPassword=LetMeInHTTPpostUser-agent:MSIE5.5Content-Type:application/x-www-form-urlencodedContent-length:35...otherheadersgohere...txtUserName=Bob&pwdPassword=LetMeInessentialofwebdevelopment21SendingFormDatatotheServenotusetheHTTPgetmethodwhen?updatingadatasourcesuchasadatabaseorspreadsheet?dealingwithsensitiveinformation?Youhavelargeamountsofdata(olderbrowsersURLstoexceedmorethan1024characters).?formcontainsafileuploadcontrol?usersmightenternon-ASCII.essentialofwebdevelopment22notusetheHTTPgetmethodwhJavaScriptJavaScriptgiveswebdevelopersaprogramminglanguageforuseinwebpagesandallowsthemtoperformfollowing:

?Readelementsfromdocumentsandwritenewelementsandtextintodocuments?Manipulateormovetext?Createpop-upwindows?Performmathematicalcalculationsondata?Reacttoevents,suchasauser’srollingoveranimageorclickingabutton?Retrievethecurrentdateandtimefromauser’scomputerorthelasttimeadocumentwasmodified?Determinetheuser’sscreensize,browserversion,orscreenresolution?Performactionsbaseduponconditionssuchasalertingusersiftheyenterthewronginformationintoaformoriftheypressacertainbuttonessentialofwebdevelopment23JavaScriptJavaScriptgiveswebHowtoAddaScripttoYourPages(1)addscriptstoyourpageinsidethe<script>element<html><body><p><scripttype="text/javascript">document.write("MyfirstJavaScript")</script></p></body></html>

Body-runasthepageloadsHead-loadbeforethepageisdisplayedessentialofwebdevelopment24HowtoAddaScripttoYourPaHowtoAddaScripttoYourPages(2)writeJavaScriptinexternaldocumentsthathavethefileextension.js<scripttype=”JavaScript”src=”scripts/validation.js”/>Ifthelinkisplacedinsidethe<head>element,thescriptistreatedthesameaswhenthescriptlivesinsidetheheadofthedocumentwaitingforaneventtotriggeritIfitisplacedinthe<body>elementitwillactlikeascriptinthebodysectionandexecuteasthepageloads.essentialofwebdevelopment25HowtoAddaScripttoYourPaCommentsinJavaScript<scripttype=”text/javascript”>document.write(“MyfirstJavaScript”)//commentgoeshere</script>/*Thiswholesectioniscommentedoutsoitisnottreatedasapartofthescript.*/essentialofwebdevelopment26CommentsinJavaScript<scriptDocumentObjectModelLevel0HTMLDocumentObjectModelTheDocumentObjectrepresentsthewholedocument,andtheneachofthechildobjectsrepresentsacollectionofsimilartagswithinthatdocumentessentialofwebdevelopment27DocumentObjectModelLevel0Hessentialofwebdevelopment28essentialofwebdevelopment28twowaystoaccessvaluesfromthisdocument<h1>UserRegistration</h1><formname=”frmLogin”action=”login.aspx”method=”post”>Username<inputtype=”text”name=”txtUsername”size=”12”/><br/>Password<inputtype=”password”name=”pwdPassword”size=”12”/><br/><inputtype=”submit”value=”LogIn”/></form><p>Ifyouareanewuser<ahref=”register.aspx”>Registerhere</a>|Ifyouhavelostyourpasswordyoucan<ahref=”lostPassword.aspx”>retrieveyourpasswordhere</a>.</p>document.links[0].hrefdocument.frmLogin.pwdPassword.valueessentialofwebdevelopment29twowaystoaccessvaluesfromObjects,Methods,andProperties?Apropertytellsyousomethingaboutanobjectdocument.titledocument.lastModified?Amethodperformsanactiondocument.write(‘Thisisadocument’);document.write(‘Pagelastmodifiedon‘+document.lastModified);essentialofwebdevelopment30Objects,Methods,andPropertiProgramwithJavaScriptAvariableisusedtostoresomeinformationOperatorsallowyoutodothingstovariablesorreferencestoArithmeticoperatorsComparisonoperatorsFunctionsarecodecontainingrulesthatyoucreatetoperformanoperationessentialofwebdevelopment31ProgramwithJavaScriptAvariaVariablesuserName=“water”varuserName=“water”*case-sensitive*LifetimeFunctionpageessentialofwebdevelopment32VariablesuserName=“water”essOperators?Arithmeticoperators?Assignmentoperators?Comparisonoperators?Logicaloperators?Stringoperatorsessentialofwebdevelopment33Operators?ArithmeticoperatorArithmeticoperatorsessentialofwebdevelopment34ArithmeticoperatorsessentialAssignmentoperatorsessentialofwebdevelopment35AssignmentoperatorsessentialComparisonoperatorsessentialofwebdevelopment36ComparisonoperatorsessentialLogicaloperatorsessentialofwebdevelopment37LogicaloperatorsessentialofStringOperatorfirstName=“Bob”lastName=“Stewart”name=firstName+lastNameessentialofwebdevelopment38StringOperatorfirstName=“BoFunctions?name?arguments?returnvaluefunctioncalculateArea(width,height){area=width*heightreturnarea}essentialofwebdevelopment39Functions?nameessentialofweCallaFunction<formname=”frmArea”action=””>Enterthewidthandheightofyourrectangletocalculatethesize:<br/>Width:<inputtype=”text”name=”txtWidth”size=”5”/><br/>Height:<inputtype=”text”name=”txtHeight”size=”5”/><br/><inputtype=”button”value=”Calculatearea”onclick=”alert(calculateArea(document.frmArea.txtWidth.value,document.frmArea.txtHeight.value))”/></form>essentialofwebdevelopment40CallaFunction<formname=”frmConditionalStatementsif(condition){codetobeexecutedifconditionistrue}if(condition){codetobeexecutedifconditionistrue}else{codetobeexecutedifconditionisfalse}switch(expression){caseoption1:codetobeexecutedifexpressioniswhatiswritteninoption1break;caseoption2:codetobeexecutedifexpressioniswhatiswritteninoption2break;caseoption3:codetobeexecutedifexpressioniswhatiswritteninoption3break;default:codetobeexecutedifexpressionisdifferentfromoption1,option2,andoption3}essentialofwebdevelopment41ConditionalStatementsif(condLoopingwhile(condition){codetobeexecuted}do{codetobeexecuted}while(condition)for(a;b;c){codetobeexecuted}for(i=0;i<11;i++){document.write(i+“x3=“+(i*3)+“<br/>”);}essentialofwebdevelopment42Loopingwhile(condition)for(aEventsWindoweventsOnloadOnunload….UsereventsOnclickOnmouseover…essentialofwebdevelopment43<ahref=””onmouseover=”document.images.link.src=’images/click_red.gif’;”onmouseout=”document.images.link.src=’images/click_green.gif’”><imgsrc=”images/click_green.gif”width=”100”height=”50”border=”0”name=”link”></a>EventsWindoweventsUsereventsBuilt-inObjectsStringalert(myString.length)MathnumberPI=Math.PIWindowwindow.status=“Didyouseemedownhere?”DateToday.getYear()Arrayfruit=newArray(“apple”,“banana”,“orange”,“mango”,“l(fā)emon”)document.write(fruit.length)essentialofwebdevelopment44Built-inObjectsStringDateesseEx.Checktextfieldvalue<p>Enterthenameofyourfavoritetypeofanimalthatstarsinacartoon:</p><formname=”frmAnimal”><inputtype=”text”name=”txtAnimal”/><br/><inputtype=”button”value=”Checkanimal”onclick=”checkAnimal()”/></form>functioncheckAnimal(){switch(document.frmAnimal.txtAnimal.value){case“rabbit”:alert(“Watchout,it’sElmerFudd!”)break;case“coyote”:alert(“Nomatchfortheroadrunner-meepmeep!”)break;case“mouse”:alert(“WatchoutJerry,herecomesTom!”)break;default:alert(“Areyousureyoupickedananimalfromacartoon?”);}}essentialofwebdevelopment45Ex.Checktextfieldvalue<p>Eessentialofwebdevelopment46essentialofwebdevelopment46Ex.FormValidationFormvalidationisoneofthemostcommontasksperformedusingJavaScriptWhentoValidateClientsideServersideessentialofwebdevelopment47Ex.FormValidationFormvalida?Thattheusernameisofaminimumlength?Thatthepasswordisofaminimumlength?Thatthetwopasswordsmatchessentialofwebdevelopment48?ThattheusernameisofamiThevalidate()functionyouareabouttolookatwilllivebetweenthefollowing<script>tagsintheheadofthedocument<scripttype=”text/JavaScript”></script>essentialofwebdevelopment49Thevalidate()functionyouar<formname=”frmRegister”method=”post”action=”register.aspx”onsubmit=”returnvalidate(this);”><divclass=”label”><labelfor=”txtUsername”>Username:</label></div><divclass=”formElement”><inputtype=”text”name=”txtUserName”id=”txtUserName”size=”12”/></div><divclass=”label”><labelfor=”txtPassword”>Password:</td></label></div><divclass=”formElement”><inputtype=”password”name=”txtPassword”id=”txtPassword”size=”12”/></div><divclass=”label”><labelfor=”txtPassword2”>Confirmyourpassword:</label></div><divclass=”formElement”><inputtype=”password”name=”txtPassword2”id=”txtPassword2”size=”12”/></div><divclass=”label”> </label></div><divclass=”formElement”><inputtype=”submit”value=”Login”/></div></form>functionvalidate(form){varreturnValue=true;varusername=frmRegister.txtUserName.value;varpassword1=frmRegister.txtPassword.value;varpassword2=frmRegister.txtPassword2.value;if(username.length<6){returnValue=false;alert(“Yourusernamemustbeatleast\n6characterslong.\nPleasetryagain.”);frmRegister.txtUserName.focus();}if(password1.length<6){returnValue=false;alert(“Yourpasswordmustbeatleast\n6characterslong.\nPleasetryagain.”);frmRegister.txtPassword.value=“”;frmRegister.txtPassword2.value=“”;frmRegister.txtPassword.focus();}if(password1.value!=password2.value){returnValue=false;alter(“Yourpasswordentriesdidnotmatch.\nPleasetryagain.”);frmRegister.txtPassword.value=“”;frmRegister.txtPassword2.value=“”;frmRegister.txtPassword.focus();}returnreturnValue;}essentialofwebdevelopment50<formname=”frmRegister”methoLab3formandJavaScriptPurposeThepurposeofthislabistopracticewebpagesusingFormandJavaScriptExercice1:on-linetestformCreateapagenamedonlinetest.htmlthatproviedaon-linetestforthebrowser.ThenameofthisexaminationAdescription/introductionofthistestAtleast3groupofquestions.Usingatleast3kindsofformcontrolessentialofwebdevelopment51Lab3formandJavaScriptPurpoExercise2:Modifytheformsothatitcansaysomethingsmorelikethis:Whatisthedate&timeonvisitor’scomputerGreetingwordslikethese:?“GoodMorning”tovisitorscomingtothepagebefore12p.m.(usinganifstatement).?“GoodAfternoon”tovisitorscomingtothepagebetween12and6p.m.(againusinganifstatement.(Hint:Youmightneedtousealogicaloperator.)?“GoodEvening”tovisitorscomingtothepageafter6p.m.upuntilmidnight(againusinganifstatement).essentialofwebdevelopment52Exercise2:ModifytheformsoExercise3:examinguser’sanswerwhenuserclickthesubmitbuttonCreateabuttononthebottomofthisformCteateascriptthatexamineuser’sanswerCountthescorefortheuserInformuserhisscorebythepopupwindowessentialofwebdevelopment53Exercise3:examinguser’sanswExercise4(advanced):AdvancedjavaScriptTechniquesInformuserthetotaltimehe/sheusedtofinishthistesthintyoumayusedata/timebuild-inobject…essentialofwebdevelopment54Exercise4(advanced):AdvanceWeb開發(fā)基礎(chǔ)

HTMLform&JavaScript趙剛Web開發(fā)基礎(chǔ)

HTMLform&JavaScript趙MoreaboutHTML-Formeverytimeyouwanttocollectinformationfromavisitortoyoursite,youneedtouseaformessentialofwebdevelopment56MoreaboutHTML-FormeverytimeCreatingaFormwiththe<form>ElementThe<form>elementcanalsocontainothermarkup,suchasparagraphs,headings…A<form>elementmustnot,however,containanother<form>elementyourpagemaycontainasmanyformsasyoulikebutuserswillbeabletosendthedatafromonlyoneformatatimetotheserveressentialofwebdevelopment57CreatingaFormwiththe<form<form>Betweentheopening<form>andclosing</form>tags thetextinputboxes drop-downboxes checkboxes submitbutton……essentialofwebdevelopment58<form>Betweentheopening<forEx.<formaction=”/search.aspx”method=”get”> <h3>Searchthesite</h3> <inputtype=”text”name=”txtSearchItem”/> <inputtype=”submit”value=”Search”/></form>essentialofwebdevelopment59Ex.<formaction=”http://www.exTheformAttributeTheactionAttributeTheactionattributeindicateswhathappenstothedatawhentheformissubmitted<formaction=”/membership/login.aspx”>ThemethodAttributeTheget

method,whichsendsdataaspartoftheURLThepost

method,whichhidesdataintheHTTPheadersessentialofwebdevelopment60TheformAttributeTheactionAOtherusefulAttributeTheidAttributeTheidattributeallowsyoutouniqueidentifythe<form>elementwithinapage,justasyoucanuseittouniquelyidentifyanyelementonapage.TheonsubmitAttributeonsubmit=”validateFormDetails();”TheonresetAttribute…

essentialofwebdevelopment61OtherusefulAttributeTheidAWhychecksformbeforesenttotheserver??Theuserdoesnothavetowaittheextratimeitwouldtakeforthepagetobesenttotheserverandthenreturnedifthereareanyerrors.?Theserverdoesnothavetodealwithasmucherrorcheckingessentialofwebdevelopment62WhychecksformbeforesenttoFormControls?Textinputcontrols?Buttons?Checkboxesandradiobuttons?Selectboxes(sometimesreferredtoasdrop-downmenus)andlistboxes…essentialofwebdevelopment63FormControls?TextinputcontTextInputsSingle-linetextinputcontrolsPasswordinputcontrols<formaction=”/login.aspx”method=”post”>Username:<inputtype=”text”name=”txtUsername”value=”“size=”20”maxlength=”20”/><br/>Password:<inputtype=”password”name=”pwdPassword”value=”“size=”20”maxlength=”20”/><inputtype=”submit”value=”Submit”/></form>essentialofwebdevelopment64TextInputsSingle-linetextinTextInputsMulti-linetextinputcontrols<formaction=”/feedback.asp”method=”post”>Pleasetelluswhatyouthinkofthesiteandthenclicksubmit:<br/><textareaname=”txtFeedback”rows=”20”cols=”50”>Enteryourfeedbackhere.</textarea><br/><inputtype=”submit”value=”Submit”/></form>essentialofwebdevelopment65TextInputsMulti-linetextinpCreatingButtonsUsingthe<input>Element<inputtype=”submit”name=”btnVoteRed”value=”Voteforreds”/><inputtype=”submit”name=”btnVoteBlue”value=”Voteforblues”/><br/><br/><inputtype=”reset”value=”Clearform”/><br/><br/><inputtype=”button”value=”calculate”onclick=”calculate()”/><inputtype=”image”src=”submit.jpg”alt=”Submit”name=”btnImageMap”/>essentialofwebdevelopment66CreatingButtonsUsingthe<inCheckboxes<formaction=”/cv.aspx”method=”get”name=”frmCV”>Whichofthefollowingskillsdoyoupossess?Selectallthatapply.<inputtype=”checkbox”name=”chkSkills”value=”html”/>HTML<br/><inputtype=”checkbox”name=”chkSkills”value=”xhtml”/>XHTML<br/><inputtype=”checkbox”name=”chkSkills”value=”CSS”/>CSS<br/><inputtype=”checkbox”name=”chkSkills”value=”JavaScript”/>JavaScript<br/><inputtype=”checkbox”name=”chkSkills”value=”aspnet”/>ASP.Net<br/><inputtype=”checkbox”name=”chkSkills”value=”php”/>PHP</form>essentialofwebdevelopment67Checkboxes<formaction=”http:/RadioButtons<formaction=”/flights.aspx”name=”frmFlightBooking”method=”get”>Pleaseselectwhichclassoftravelyouwishtofly:<br/><inputtype=”radio”name=”radClass”value=”First”/>Firstclass<br/><inputtype=”radio”name=”radClass”value=”Business”/>Businessclass<br/><inputtype=”radio”name=”radClass”value=”Economy”/>Economyclass<br/></form>essentialofwebdevelopment68RadioButtons<formaction=”httSelectBoxes<selectname=”selColor”><optionselected=”selected”value=”“>Selectcolor</option><optionvalue=”red”>Red</option><optionvalue=”green”>Green</option><optionvalue=”blue”>Blue</option></select>essentialofwebdevelopment69SelectBoxes<selectname=”selCCreatingScrollingSelectBoxes<formaction=”/days.aspx”name=”frmDays”method=”get”><selectsize=”4”name=”selDay”><optionvalue=”Mon”>Monday</option><optionvalue=”Tue”>Tuesday</option><optionvalue=”Wed”>Wednesday</option><optionvalue=”Thu”>Thursday</option><optionvalue=”Fri”>Friday</option><optionvalue=”Sat”>Saturday</option><optionvalue=”Sun”>Sunday</option></select><br/><br/><inputtype=”submit”value=”Submit”/></form>essentialofwebdevelopment70CreatingScrollingSelectBoxeSelectingMultipleOptionswiththemultipleAttribute<formaction=”/days.aspx”method=”get”name=”frmDays”>Pleaseselectmorethanonedayoftheweek:<br/><selectname=”selDays”multiple=”multiple”><optionvalue=”Mon”>Monday</option><optionvalue=”Tue”>Tuesday</option><optionvalue=”Wed”>Wednesday</option><optionvalue=”Thu”>Thursday</option><optionvalue=”Fri”>Friday</option><optionvalue=”Sat”>Saturday</option><optionvalue=”Sun”>Sunday</option></select><br/><br/><inputtype=”submit”value=”Submit”></form>essentialofwebdevelopment71SelectingMultipleOptionswitGroupingOptionswiththe<optgroup>Element<formaction=”/info.aspx”method=”get”name=”frmInfo”>Pleaseselecttheproductyouareinterestedin:<br/><selectname=”selInformation”><optgrouplabel=”Hardware”><optionvalue=”Desktop”>Desktopcomputers</option><optionvalue=”Laptop”>Laptopcomputers</option></optgroup><optgrouplabel=”Software”><optionvalue=”O(jiān)fficeSoftware”>Officesoftware</option><optionvalue=”Games”>Games</option></optgroup><optgrouplabel=”Peripherals”><optionvalue=”Monitors”>Monitors</option><optionvalue=”InputDevices”>InputDevices</option><optionvalue=”Storage”>Storage</option></optgroup></select><br/><br/><inputtype=”submit”value=”Submit”/></form>essentialofwebdevelopment72GroupingOptionswiththe<optStructuringYourForms<fieldset>elementcreatesaborderaroundthegroupofformcontrolstoshowthattheyarerelated.<legend>elementallowsyoutospecifyacaptionforthe<fieldset>element,whichactsasatitleforthegroupofformcontrols.Whenused,the<legend>elementshouldalwaysbethefirstchildofthe<fieldset>element.essentialofwebdevelo