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/