1-4 ?本表單

]Forms^O HTML @ӭnҡC@몺 HTML ҡAuOFΨӧe{TAHKϥΪ̦bȤsC椣uOe{T\A󭫭nOA]tFƺت椸]Form Elements^AiHϥΪ̶iƶgο\AñNϥΪ̩ҶgưeAݡAi楲nBzC]ڭ̥iHANOȤݩMAiTqĤ@ӪC

NϥΪ̿JưeAAAݥ۹諸{ӹƶiBz]ҦpeJƮwζiέpR^Cѩ󥻳ݩ HTML dåA]ڭ̦b`u|Ъb HTML lXAΨbҧe{~[AHKŪAѦpϥΪ椸ӳ]p򥻪ʺAC檺ԲӤСAiѦuv`C~AbAݳBzƪ{Aڭ̷|bѲĤGguΩAݪ JavaScriptv`i满C

ҿסuʻDp@vAڭ̥ݬݤ@Ӫ檺²dҡG

Example]form01.htm^G

WzdҪlɮצpUG

lɡ]form01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>򥻪d</h2>
<hr>

<form action="mailto:test@cs.nthu.edu.tw" encType=text/plain method=post>
	<p>WrG<input name="myname" size=10 maxlength=20 value="Ȱa">
	<p>KXG<input name="passwd" type=password size=8 maxlength=8 value=xyz>
	<p>ʧO]^G<input name="sex" type=radio value="k">k
		<input name="sex" type=radio value="k" checked>k
	<p>ݦn]ƿ^G
		<input name="f1" type=checkbox value="book">\Ū
		<input name="f2" type=checkbox value="sport" checked>B
		<input name="f3" type=checkbox value="music" checked>
		<input name="f4" type=checkbox value="sleep">ı
		<input name="f5" type=checkbox value="talk"><P>
	<p><input type="submit"> <input type="reset">
</form>

<hr>
</body>
</html>

ѤWzdҥiݥXAO form ҩҧΦAi]tƭӿﶵAaction Nǰeت}]]NOBzTA{^Amethod hNTǰekCbWҤAaction O]w@ӹqllbA]ϥγoUueXvɡAҦbJơA|Qe즹qllb test@cs.nthu.edu.twAҦqlDOuq Microsoft Internet Explorer GCvAqleOG

myname=Ȱa
passwd=xyz
sex=k
f2=sport
f3=music
]WҤlb test@cs.nthu.edu.tw OügA]pGANeXA̫i|DhC^ method ﶵAbӽ͡AŪ̥iѦҦ ASP CGI `C

b椺A٦\h椸]Form Elements^Aκ٪汱]Form Controls^AHKϥΪ̿JơCHWҦӨAoǪ椸ҳO inputAîھ type PAӦP\CoǪ椸ǦUUݩʡ]Attributes^HΨʽ]Properties^Aڭ̥iHϥ JavaScript ӧܳoǩʽANiHإ߸BΪʦC

ڭ̥Ӭݤ@ӳCrJdҡAbdҤAAunUue쪬ACvAJavaScript N|AJre쪬ACG

Example]formText2status01.htm^G

WzdҪlɦpUG

lɡ]formText2status01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>Nre쪬AC</h2>
<hr>

<form name=theForm>
	<input type=text name="theString" value="e쪬ACw]T">
	<input type=button value="e쪬AC" onClick="window.status=document.theForm.theString.value">
</form>

</body>
</html>

bWzdҤAڭ̫Uue쪬ACvsɡAs|hwq onClick rArO@ JavaScript ԭzA\iqӻG

  1. Xr줺rG䤤 document OAtheForm Oڭ̩wqW١AtheString ]Oڭ̩wqrW١A value hOr줺ت@өʽW١A] document.theForm.theString.value NOr줤rC
  2. Nre쪬ACG]w window.status YiC

Hint
bդWzdҮɡAAsACAigѡu˵/ACvӶ}ҩsACC

pGhӪAڭ̥iHOϥΡudocument.forms[n]vӪܡA䤤 n = 0, 1, 2 C@ӻA@Ӻq`u@ӪA]Ywq檺W١Aڭ̤]iHϥ document.forms[0] ӥNC

ƹWAbWzdҤAڭ̥iHϥΤrJ쪺t@ݩ onChangeAӧP_r줺rO_DקAYA~Nqre쪬ACAШUCdҡG

Example]formText2status02.htm^G

WzdҪlɦpUG

lɡ]formText2status02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>Nre쪬ACGϥ onChange ƥ</h2>
<hr>

<form>
	<input type=text value="e쪬ACw]T" onChange="window.status=this.value">
</form>

</body>
</html>

bWzdҤAunڭ̧ܤr줤w]rAPɱNJI]Focus^Xrɡ]unϥηƹI@U䥦a^Awq onChange JavaScript {XY|QIsӧssACCMe@ӽdҤAڭ̥iHo{dҧ²G

  1. rഫʧ@wqr쪺 onChange ݩʡAҥHiH٫osϥΡC]O onChange ƥubƹJIѤrɡA~|_@ΡC^
  2. ڭ̨ϥ this ӥNuثevA]wqrM檺W١A²C

Hint
bWzdҤApGƱbrJrɡAACߧYܡAiN onChange 令 onKeyUp YiCЦPǭ̸ոլݡI

ϥ this ӥNuثevAO@ӱ`QΨ쪺ޥCt~Aڭ̤]iHϥ this.form ӥNuثeҦbvA]iHٲFwq檺BJAҦpG

Example]formTextMasterSlave01.htm^G

WzdҪlɦpUG

lɡ]formTextMasterSlave01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ǰeӤr쪺TGϥ this.form</h2>
<hr>

<form>
	<input type=text name=text1 value="ek䪺w]T">
	<input type=button value="=====>" onClick="this.form.text2.value=this.form.text1.value">
	<input type=text name=text2>
</form>

</body>
</html>

bWzdҤAڭIu====>vsAN|N䪺rǨkA䤤 this.form NONsҦbC

Hint
@ӨAHua.bv覡ӫ@ӪAҦp form1.input1 AOѤj]^p]^覡Aߤ@ҥ~ANO this.formAoOѤp]^j]^覡C

ڭ̤]iHϥ覡ӶǰeְOơAҦpG

Example]formCheckboxMasterSlave01.htm^G

WzdҪlɦpUG

lɡ]formCheckboxMasterSlave01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ǰeӮְO쪺TGϥά۹| this.form</h2>
<hr>

<form>
	<input type=checkbox name=box1 checked>
	<input type=button value="=====>" onClick="this.form.box2.checked=this.form.box1.checked">
	<input type=checkbox name=box2>
</form>

</body>
</html>

bWzdҤACAקĤ@ӮְOòJIɡAڭ̴Nĵiܨʽ checked ȡAtrue NĿAfalse NĿCۧڭ̥iHUu====>vsAYiNĿTqǨkC

pGO this.form ӹFWzĪGA{XN|cApUҥܡG

lɡ]formCheckboxMasterSlave02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ǰeӮְO쪺TGϥε|</h2>
<hr>

<form name=myForm>
	<input type=checkbox name=box1 checked>
	<input type=button value="=====>" onClick="document.myForm.box2.checked=document.myForm.box1.checked">
	<input type=checkbox name=box2>
</form>

</body>
</html>

ѤWzdҥiHݥXAϥ this.form Nϥά۹|AɭԷ|ϥε|ӪKP²C

t@ؤ覡AhOϥ id ҩ椸AMϥ document.getElementById(id) ӨoAdҦpUG

Example]formCheckboxMasterSlave03.htm^G

WzdҪlɦpUG

lɡ]formCheckboxMasterSlave03.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>ǰeӮְO쪺TGϥ id</h2>
<hr>

<form name=myForm>
	<input type=checkbox id=box1 checked>
	<input type=button value="=====>" onClick="document.getElementById('box2').checked=document.getElementById('box1').checked">
	<input type=checkbox id=box2>
</form>

</body>
</html>

bdҤALצ󪺦mAڭ̳iHϥ document.getElementById(id) ӨoAD`KC

FsMְO~Aڭ̤]iHϥΤUԦ]Pull-down Menus^ϥΪ̶iﶵĿAҥΪҬO selectCYniAdҦpUG

Example]formSelectSingle01.htm^G

WzdҪlɦpUG

lɡ]formSelectSingle01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>UԿG</h2>
<hr>

п@ӧA̳wҵ{G
<form>
<select name=courseList size=4 onChange="alert('A諸ҵ{Ou'+this.options[this.selectedIndex].text+'v')">
	<option> 1. Linear Algebra
	<option> 2. C Programming Language
	<option> 3. Engineering Mathematics
	<option> 4. Numerical Methods
	<option> 5. Introduction to Artificial Intelligence
	<option selected> 6. Web Programming
	<option> 7. Artificial Neural Networks
	<option> 8. Fuzzy Sets Theory and Applications
	<option> 9. Audio Signal Processing and Recognition
	<option> 10. Special Topics on MATLAB
</select>
</form>

<hr>
</body>
</html>

YniƿAҥΪ٬O selectAuOݭn[J multiple ݩʡAdҦpUG

Example]formSelectMultiple01.htm^G

WzdҪlɦpUG

lɡ]formSelectMultiple01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>UԿGh</h2>
<hr>

<script>
function listSummary(form) {
	var result = "";
	for (var i=0; i<form.courseList.length; i++)
		if (form.courseList.options[i].selected)
			result = result + form.courseList.options[i].text + "\n"; 
	alert("A̳wXҬOG\n" + result);
}
</script>

пܧA̳wXҡ]i Ctrl  Shift Ӷih^G
<form>
<select name=courseList size=4 multiple onChange="listSummary(this.form)">
	<option> 1. Linear Algebra
	<option> 2. C Programming Language
	<option> 3. Engineering Mathematics
	<option selected> 4. Numerical Methods
	<option> 5. Introduction to Artificial Intelligence
	<option selected> 6. Web Programming
	<option> 7. Artificial Neural Networks
	<option> 8. Fuzzy Sets Theory and Applications
	<option> 9. Audio Signal Processing and Recognition
	<option> 10. Special Topics on MATLAB
</select>
</form>

<hr>
</body>
</html>

bWzdҤ listSummary() 禡Aڭ̦b result ܼƤe[WF varAoN result O@ӧܼơ]Local Variable^AyܻAoܼƥub listSummary() 禡sbA]uboӨ禡Aڭ̯soܼơA@b禡AܼƴNsbC@ӨApGSb禡ܼƥ[W var ŧiAoܼƴNw]ܼơ]Global Variable^AAiHb禡H~asܼơC

Hint
@ڭ̫ijb禡ܼƳɶq]wܼơAH֨禡IsiಣͪDwƧ@ΡC

YnJjqrơANϥ textarea ҡAdҦpUG

Example]formTextarea01.htm^G

WzdҪlɦpUG

lɡ]formTextarea01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>hCrGtextarea</h2>
<hr>

ЭקUCrAbIƹ椧~C
<form>
<textarea name=courseList cols=80 rows=10 onChange="alert('᪺rG\n'+this.value)">
This is the text within the textarea tag.
oO textarea ҤrC
</textarea>
</form>

<hr>
</body>
</html>

̫٦ӱ`ΪANO submit M resetA\pUG

oǬӸ`Aڭٷ|b򳹸`ԲӻC
JavaScript {]pPΡGΩΤ