8/13/2019 01 HTML Form
1/33
SP312
Introduction to HTMLAnd FormWeek#1
8/13/2019 01 HTML Form
2/33
#
!"#$%&"'()*'(Course Outline)
!"#$%&'()#(*+,-'(Evaluation)
- +%'$,-./0#(Knowledge and Skills) - 123/&'45'+(Midterm Examination) 62( 20- 123!&'(5'+(Final Examination) 62( 50
!"#./",01234!##5!"#*67,!"#82,(Assignments/Teaching-Learning Activities)- /'"7-338/9:(Exercises) 62( 25
!"#*9":,*67,(Attendance) ;27'((percentage) 5
8/13/2019 01 HTML Form
3/33
#
;
8/13/2019 01 HTML Form
4/33
#
;3>%? 3""('(
8/13/2019 01 HTML Form
5/33
#
HTML HTML = Hyper Text Mark up Language HTML @AWeb Browser ;B2-1:4C&;D?IE,
Fire Fox, Safari, Chrome, Opera;+E24F2G@A@?/'"HI?'J!"-/"$Notepad,
EditPlus =K2J!"-/"$D%(;D?Dreamweaver ;L?J!"-/"$!"#;5>WYSIWYG (What you see is what you get)
8/13/2019 01 HTML Form
6/33
#
J+"416'4M24HTML
J+"416'4N?O'?M24;2/1'"HTML
...
8/13/2019 01 HTML Form
7/33
#
PQ1$RS5'0'HTMLHTML
Case Insensitive !"#$%&
'#() *%+#,Tag -./01'/*
0234567Tag
Attribute 893:4(!83$;%+"#2
8/13/2019 01 HTML Form
8/33
#
Tag
->/;T:(Heading Tag) ->/T: U2+%'$=K2V4G2W"#=X'4Tag Y#;!Z(?[!\'$
PQ1$RSM24Tag ]24Y:^X'Tag -_->/`PQ1$RS2#["? ;D? U2+%'$G2W\"4aY#;L?b%=?'-M?':
@=c U2+%'$G2W\"4aY#;L?b%;d(4 e2$'
Y'/emphasize @Af=g3h\i!"#14j-1:4U2+%'$G
;k?@l;m?
8/13/2019 01 HTML Form
9/33
#
,n/o3Attribute
;L?b%p=?:PQ1$RS_'4q@lo3Tag-_*r:
`J+"416'4!"'/s2W@?Tag
8/13/2019 01 HTML Form
10/33
#
Tag )#(*FGH"/I
. ;L?/'"p=?:9%;E24@l-_web page J:(Y#-1:4C&2W3?Title Bar M24Web Browser
8/13/2019 01 HTML Form
11/33
N
8/13/2019 01 HTML Form
12/33
#
!"#L0,%MN,background
O)&BB ...PA2Q"/
1h1z{#
8/13/2019 01 HTML Form
13/33
#
!"#L0,%MPAR!S#O)&BB92VA"5PA2Q"/
!"#hS|%?b%
8/13/2019 01 HTML Form
14/33
#
W"#"/(Table)
Tag Description @A16'4\'"'4U2}& f=g3U2+%'$ ;L?9%+2~$Y#;L?b%=?'
f=g3-%M24\'"'4
f=g3U2}&@?-_cell 23'(\'"'41'$'"p=?:[;(41 caption -1:42W-=4'?3?\"4/&'4M24\'"'4
Tag X2/W"#"/
8/13/2019 01 HTML Form
15/33
#
W"#"/ TableYZ85DEW"#"/
align="left" | "center" | "right" n:-=4M24\'"'4
border="number" p=?:+%'$=?'M24;?M23\'"'4width="number" p=?:+%'$/x'4@l\'"'4bgcolor="y" p=?:ybackgroundcellspacing="number" p=?:"#(#'4"#=X'4cell
cellpadding="number" p=?:D24X'45'(@?cell "#=X'4;?border o3U2}&G2W@?cellYZ85DEX2/&[A &'(cell align="left" | "center" | "right"
valign= "top" | "middle" | "bottom" | "baseline"/'"n:-=4M24U2+%'$1'$'"p=?:[4G"#3-%
-"#3cell J:(@?"#3cell Y#`priority 4G:
b%2e'4Code[[[w1-1.html
8/13/2019 01 HTML Form
16/33
#
&BB\2]5(Form)
&BB\2]58"5"#[^5")#(_!`ab/"W"5*cBde`H"/I*f,&BB82B["5, aBg/h2X2/, !"#'/G(*i7,*j,85"k!, 8l%*m75(Guestbook), &8%/VA"5n%*o,(Comment) *j,p,
8/13/2019 01 HTML Form
17/33
#
qV#/8;"/Element r0sB8;"/&BB\2]5O)&BB
name="2M24Form"method="get | post" ;L?v!-33M24)@?/'"|4U2}&`2 v!-33get ;L?b%g3- |4U2}&M?':^o:Y'/Server[;?256 b%/0"
post ;L?b%g3- |4U2}&[^o:Y'/Serveraction="URL" 2-=4=K2URL M24Script G%'4[xGServertarget="_blank | _self | _parent" =k'_'4GY#@lC&M24Script -1:4C&
....
8/13/2019 01 HTML Form
18/33
#
qV#/8;"/Element r0sB8;"/&BB\2]5PA2Q"/(d\tw1-3.html)
b%2e'4Form
8/13/2019 01 HTML Form
19/33
#
Text Fields/24g3U2+%'$;L?/'"g3U2}&G[g3+%'$r($
$'/G: /24g3U2+%'$1'$'";2/p=?:[X'Y#g33"".:;z(%=K2=&'(3"".:=K2g3U2}&"91'?O)&BB
size="number" +%'$/x'4M24D24/"2/U2}&maxlengt="number" ^?%?b%/0"4:G/"2/[disabled lock[@lD24/"2/U2}&@A4'?[readonly @lD24/"2/U2}&'?[2e'4;z(%/"2/U2}&[[
8/13/2019 01 HTML Form
20/33
#
Text FieldsPA2Q"/(d\tw1-4.html)
b%2e'4Form
8/13/2019 01 HTML Form
21/33
#
Checkbox
$;2/-33$;=Z($G1'$'";2/[$'//X'1 b%;2/;D?b%;2/;(%o34'?2;"/G*23M24-_+?1'$'";2/[$'//X'1 "'(/'";L?]? O)&BB
checked = aucheckbox v,w!*x2!(tick / >checkbox)
8/13/2019 01 HTML Form
22/33
#
CheckboxPA2Q"/(d\tw1-5.html)
b%2e'4 Form
b%;2/G1 b%;2/G2 b%;2/G3
8/13/2019 01 HTML Form
23/33
#
Radio
$b%;2/G`~/0Q#;L?%4/&$@A@?/"GU2}&;L?>'4;2/G1'$'";2/[?;(41 "'(/'";'? O)&BB
checked = @loption ?/;2/
8/13/2019 01 HTML Form
24/33
#
RadioPA2Q"/(d\tw1-6.html) b%2e'4 Form
*'(
=4
8/13/2019 01 HTML Form
25/33
#
Password
O)&BB
/Q'"#Password
PA2Q"/
8/13/2019 01 HTML Form
26/33
#
PasswordPA2Q"/(d\tw1-7.html) >> .y;25IzBButton
8/13/2019 01 HTML Form
27/33
#
Button
O)&BB
8/13/2019 01 HTML Form
28/33
8/13/2019 01 HTML Form
29/33
#
Select;L?/24b%;2/-1:4"'(/'"?$'!"'/@l
@A;2/
O)&BB option1option 2 option 3 option 4 option 5
- size = {,A,PA*x2!>au52/*o,- multiple = au|ab/",*x2!0'"7PA*x2!d}q%7!%~5Ctrl
8/13/2019 01 HTML Form
30/33
#
SelectPA2Q"/(d\tw1-9.html)
b%2e'4 Form
8/13/2019 01 HTML Form
31/33
#
Fieldset
/'"n:/$&2?U2}&@?Form G`+%'$$H?o?Y#7@lForm `+%'$;L?"#;(31%(4'$-@A4'?1'$'";U'@Y-?U2}&[1#:%/$'/?O)&BB
2/$U2}&
element form _'4q
i ld
8/13/2019 01 HTML Form
32/33
#
FieldsetPA2Q"/2/$U2}&element form _'4q
8/13/2019 01 HTML Form
33/33
#
&BB!@%
4/*7,q)#&!#5*28;"/Form a,!"#sB92'*7AzB)#($EVV'q%7p2/!"#O)&BB-'y/