เริ่มต้นกับการสร้าง Web Page!!!

Download Report

Transcript เริ่มต้นกับการสร้าง Web Page!!! 

HTML
(Hypertext Markup Language)
1
รูปแบบของ HTML
1. Text หมายถึงข้ อความทั่วไป
2. Tag , Element หรือ คาสั่ ง หมายถึงคาสั่ งที่ใช้ ใน
การกาหนดรูปแบบของ Text
3. Attribute หมายถึงตัวเลือกทีค่ าสั่ งของ HTML
สามารถใช้ ได้
2
กฏในการใช้ งาน HTML
• แต่ ละคาสั่ ง จะต้ องอยู่ในเครื่องหมาย < และ > เท่ านั้น
• สามารถใช้ ตัวอักษรพิมพ์เล็ก หรือ ใหญ่ ก็ได้ เพราะได้
ความหมายเหมือนกัน
• สามารถพิมพ์เอกสาร HTML จัพมิ พ์ติดต่ อกัน หรือ
พิมพ์แยกบันทัดกันก็ได้
3
การใส่ คาอธิบาย(Comment)
การใส่ คาอธิบายบางส่ วนของ HTML ที่เราเขียนมา
เพือ่ จะได้ สะดวกในการติดตามในภายหลัง
Comment จะไม่ แสดงผลบน Browser รูปแบบของ
คาสั่ งจะแตกต่ างจาก HTML ทั่วไป คือเริ่มต้ นด้ วย
คาสั่ ง <!- และ ปิ ดด้ วยคาสั่ ง ->
4
เริ่มต้ นกับการสร้ าง Web Page!!!
ในเอกสาร HTML นั้นจะต้องขึ้นต้นด้วยคาสัง่ (Tags.)
<HTML> และปิ ดท้ายด้วย </HTML> ดังนี้
<HTML>
………..
</HTML>
5
ทุกเอกสาร HTML จะต้ องมี HEAD tag ซึ่ง
บอกว่ าส่ วนนีเ้ ป็ น Head ของเอกสารนี้
<HTML>
<HEAD>
…………………...
</HEAD>
</HTML>
6
ใน HEAD tags เราจะบอกหน้ าปัจจุบันของ
Home Page ของเราด้ วย TITLE tag
<HTML>
<HEAD>
<TITLE>……………….</TITLE>
</HEAD>
</HTML>
7
ส่ วนรายละเอียดของหน้ าเอกสารจะอยู่ในส่ วนของ
BODY tags. ซึ่งจะเป็ นส่ วนทีอ่ ยู่ถัดไปจาก HEAD tags.
<HTML>
<HEAD>
<TITLE> ……… </TITLE>
</HEAD>
<BODY>
…………….
</BODY>
</HTML>
8
Attribute ของคาสั่ ง <BODY>
Attribute
LINK
BGCOLOR
TEXT
หน้ าที่
กาหนดสี ของ Like
ั ให้กบ
ั พื้นหลัง
กาหนดสี ให้กบ
ั ตัวอักษร
กาหนดสี ให้กบ
BACKGROUND
กาหนดชื่ อไฟล์รูปภาพสาหรับพื้นหลัง
9
เริ่มเขียน Page แรกกัน
<HTML>
<HEAD>
<TITLE>My First Page.</TITLE>
</HEAD>
<BODY>
Hello.........World.
</BODY>
</HTML>
10
พิมพ์ข้อความ ทดสอบการแสดงผล
<BODY>
ทดสอบการแสดงผล
</BODY>
11
เปลีย่ นสี พนื้ หลังของหน้ าต่ างได้ โดยใช้ คาสั่ ง
<BODY BGCOLOR="#FF0000">
ทดสอบการแสดงผล
</BODY>
12
ใช้ รูปภาพมาเป็ น Background ได้ ด้วย
<BODY BACKGROUND=”bgg.gif">
ทดสอบการแสดงผล
</BODY>
13
กลับสู่ หน้ าจอสี ขาวตามเดิม
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
</BODY>
14
การกาหนดหัวข้ อด้ วย Tag <Hn>
รูปแบบ <Hn> ………………… </Hn>
n = ค่ าของขนาดเป็ นตัวเลข เช่ น <h1>…….</h1>
โดยค่ าของ n จะมีค่าตั้งแต่ 1- 6 เรียงจากมากไปน้ อย
15
<h1> ข้ อความ </h1>
<h2> ข้ อความ </h2>
<h3> ข้ อความ </h3>
<h4> ข้ อความ </h4>
<h5> ข้ อความ </h5>
<h6> ข้ อความ </h6>
16
การจัดรูปแบบของตัวอักษร
Bold/Italic
กาหนดข้อความให้เป็ นตัวเข้ม ใช้คาสัง่ <B>….</B>
และตัวเอนใช้คาสัง่ <I>…..</I>
Underline
ใช้ในการขีดเส้นใต้ ใช้คาสัง่ <U>……</U>
Superscript /
Subscript
กาหนดให้เป็ นตัวอักษรยกขึ้นใช้คาสัง่ <SUP>….</SUP>
กาหนดให้เป็ นตัวอักษรห้อยลงใช้คาสัง่ <SUB>…</SUB>
17
การทาตัวอักษรหนา (Bold)
<BODY BGCOLOR="#FFFFFF">
ตัวปกติ <B>ตัวหนา</B>
</BODY>
18
การทาตัวอักษรเอียง (Italics)
<BODY BGCOLOR="#FFFFFF">
ตัวปกติ <I>ตัวเอียง</I>
</BODY>
19
การทาตัวอักษรขีดเส้ นใต้ (Underlining)
<BODY BGCOLOR="#FFFFFF">
ตัวปกติ <U>ตัวขีดเส้ นใต้ </U>
</BODY>
20
เราสามารถใช้ Tags หลายอย่ างปนกันได้ ตามต้ องการ
<BODY BGCOLOR="#FFFFFF">
ตัวปกติ <I><B>ตัวเอียงและหนา</B></I>
</BODY>
21
ในการใช้ Tags หลายอันปนกันจะต้ องจัด
เรียงลาดับโดยตัวทีใ่ ช้ ก่อนจะต้ องถูกปิ ดทีหลังและ
ตัวอยู่ทหี ลังจะต้ องปิ ดก่ อน
<ก่ อน><หลัง></ก่ อน></หลัง> ผิดหลักการ
<ก่ อน><หลัง></หลัง></ก่ อน> ถูกหลักการ
22
เปลีย่ นขนาดของอักษร(Font) ได้ ด้วยวิธีการง่ ายๆ
อันดับแรกต้ องเพิม่ <FONT> tags...
<BODY BGCOLOR="#FFFFFF">
ทดสอบขนาดตัวอักษร <FONT>ขนาด</FONT>
</BODY>
จากนั้นจึงกาหนดค่ าของขนาดด้ วย SIZE
<BODY BGCOLOR="#FFFFFF">
ทดสอบขนาดตัวอักษร <FONT SIZE=6>ขนาด</FONT>
</BODY>
23
ขนาดของอักษรทั้งหมด 7 ขนาด
1-teeny tiny
2-small
3-regular
4-extra medium
5-large
6-real big
7-yelling!
24
การกาหนดชื่อ Font ที่ใช้ แสดงผล
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล <FONT
FACE="ARIAL">ARIAL</FONT>
</BODY>
25
เราสามารถที่จะใส่ ชื่อ Font มากกว่ า 1 ชื่อได้ ลงไป
ใน Tags ของ <FONT> ได้ เพือ่ ที่เราจะใช้ Font ตัว
ที่สองหรือสามแทนเมื่อ
ใน Browser ไม่ มี Font ตัวแรกๆ ถ้ ารายชื่อ Font ที่
เราใส่ ไว้ ไม่ มีเลย Browser จะใช้ Default Font แทน
<FONT FACE="ARIAL, HELVETICA,
LUCIDA SANS">ชื่อ Font
</FONT>
26
เปลีย่ นสี อกั ษรเป็ นสี ที่เราชอบ
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล <FONT
COLOR="#FFOOOO">สี แดง</FONT>
</BODY>
27
เราสามารถใช้ หลายๆ ATTRIBUTE ใน <TAG>...
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<FONT COLOR="#FF0000"
FACE="ARIAL" SIZE="7">Font</FONT>
</BODY>
28
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล <U><I><B><FONT
COLOR="#FF0000" FACE="ARIAL"
SIZE="7">Font</FONT></B></I></U>
</BODY>
29
การทางานของ Browser
<BODY BGCOLOR="#FFFFFF">
สวัสดี
ลองดูซิ
ว่ ามีการจัดเรียงบรรทัด
เป็ นอย่ างไร ?
</BODY>
30
จะขึน้ บรรทัดใหม่ จะต้ องเพิม่ Tags <BR> ลงไป
เพือ่ เป็ นการบอกให้ ขนึ้ บรรทัดใหม่
<BODY BGCOLOR="#FFFFFF">
สวัสดี <BR>
ลองดูซิ <BR>
ว่ ามีการจัดเรียงบรรทัด <BR>
เป็ นอย่ างไร ?
</BODY>
31
<BODY BGCOLOR="#FFFFFF">
ทดสอบ การแสดงผล ของ Browser.
</BODY>
32
จะต้ องใส่ รหัสช่ องว่ าง(Space) ใช้ &nbsp;
<BODY BGCOLOR="#FFFFFF">
ทดสอบ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; การ
แสดงผล&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;
ของ Browser.
</BODY>
33
Special Character ที่มี ; ปิ ดท้ าย
&nbsp; ( non-breaking space)
&lt; (< less-than symbol)
&gt; (> greater-than symbol)
&amp; (& ampersand)
&quot; (" quotation mark)
34
การสั่ งให้ เว้ นบรรทัดที่ละหลายๆบรรทัดกัน
<BODY BGCOLOR="#FFFFFF">
ทดสอบ <BR>
&nbsp;<BR>
&nbsp;<BR>
&nbsp;<BR>
การแสดงผล
</BODY>
35
เรื่องของเส้ นกั้น หรือ "Horizontal Rule."
<BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>
36
การกาหนดความกว้ าง WIDTH
- กาหนดเป็ น % ของ Windows
- กาหนดเป็ น Pixel ของจอภาพ
37
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>
38
การกาหนดตาแหน่ งของเส้ น
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>
39
สามารถที่จะกาหนด Thickness... ได้
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>
40
41
สามารถกาหนดให้ เป็ น Solid Line. ได้ ด้วย
<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>
42
43
การจัดเอกสาร ด้ วย tag <p> และ <pre>
รูปแบบ <p>………..</p> ใช้ ในการจัดย่ อหน้ าของ
ข้ อความ
รูปแบบ <pre>……………</pre> ใช้ ในการรูปแบบ
ของข้ อความให้ อยู่ในรูปแบบทีพ่ มิ พ์
44
ตัวอย่ างการจัดย่ อหน้ า
ด้ วย <p>
<HTML>
<HEAD>
<TITLE>Testing Tag</TITLE>
</HEAD>
<BODY>
<p>
การเขียนโฮมเพจ<br>
ด้วยภาษา html
</p>
<p>
เรื่ อง <br>
การทดสอบการใช้<br>
คาสัง่ จัดย่อหน้า
</p>
</BODY>
</HTML>
45
46
ตัวอย่ างการใช้ คาสั่ ง จัดย่ อ
หน้ าและวางตาแหน่ ง
<HTML>
<HEAD>
<TITLE>Testing Tag</TITLE>
</HEAD>
<BODY>
<p align=center>
การเขียนโฮมเพจ<br>
ด้วยภาษา html
</p>
<p align=right>
เรื่ อง <br>
การทดสอบการใช้<br>
คาสัง่ จัดย่อหน้า
</p>
</BODY>
</HTML>
47
48
ตัวอย่ างการจัดรู ปแบบ
ข้ อความด้ วย<pre>
<HTML>
<HEAD>
<TITLE>Testing Tag</TITLE>
</HEAD>
<BODY>
<p >
การเขียนโฮมเพจ
ด้วยภาษา html
</p>
<pre >
เรื่ อง
การทดสอบการใช้ คาสัง่ จัดย่อหน้า
</pre>
</BODY>
</HTML>
49
50
การเรียกใช้ งาน File รูปภาพนั้นเราจะใช้ คาสั่ งนี้
<IMG> (image) tag.
<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>
51
การกาหนดขนาดของรูปภาพ
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=82
HEIGHT=68>
</BODY>
52
การกาหนดเส้ นกรอบของรูปภาพ ด้ วย BORDER
<img src=“duck.gif” border=2 >
การกาหนดข้ อความแทนรูปภาพด้ วย Alternative
<img src=“duck.gif” border=2 alt=“เป็ ด” >
53
การจัดวางรูปภาพ ด้ วย Align
Align=left คือการ วางรูปภาพให้ ชิดของเอกสาร
ด้ านซ้ าย
Align=right คือการ วางรูปภาพให้ ชิดของเอกสาร
ด้ านขวา
54
การจัดวางรูปภาพ ร่ วมกับข้ อความ ด้ วย Align
Align=Top คือการ วางรูปภาพให้ ชิดข้ อความบันทัด
บนสุ ด
Align=Middle คือการ วางรูปภาพให้ ตาแหน่ งกลาง
ของข้ อความ
Align=botton คือการ วางรูปภาพให้ ชิดข้ อความ
บันทัดบนสุ ด
55
การกาหนดระยะการแสดงรูปภาพด้ วย Vspace,Hspace
Vspace = เป็ นระยะห่ างตามแนวตั้งนับจากของเอกสาร
ด้ านบน
Hspace = เป็ นระยะห่ างตามแนวนอนนับจากขอบ
ด้ านซ้ าย
เช่ น
<img src=“duck.gif” vspce=100 hspace=200>
56
วิธีการแสดง List มีท้งั ORDERED List.
และ UNORDERED List.
นี่คอื ตัวอย่ างของ ORDERED
นี่คอื ตัวอย่ างของ UNORDERED
1 รายละเอียด 1
รายละเอียด 1
2 รายละเอียด 2
รายละเอียด 2
3 รายละเอียด 3
รายละเอียด 3
4 รายละเอียด 4
รายละเอียด 4
57
Un Order Lists
แสดงข้ อความแยกเป็ นบรรทัดๆ ด้ วย Bullet ใช้ คาสั่ ง <UL>
สามารถใช้ ตัวเลือก “TYPE” กับ <UL> ได้ ดงั นี้
<UL TYPE=DISC>
กาหนด Bullet ให้ เป็ นวงกลมสี ดา
<UL TYPE=CIRCLE> กาหนด Bullet ให้ เป็ นวงกลมสี ขาว
<UL TYPE=SQUARE> กาหนด Bullet ให้ เป็ นสี เหลีย่ มสี ทึบ
58
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<UL>
<LI>รายละเอียด 1
<LI>รายละเอียด 2
<LI>รายละเอียด 3
<LI>รายละเอียด 4
</UL>
</BODY>
59
List แบบ Unordered List
60
Order Lists
แสดงข้ อความแยกเป็ นบรรทัดๆ ด้ วยตัวเลข หรือ ตัวอักษร
แบบเรียงลาดับ ใช้ คาสั่ ง <OL>
สามารถใช้ ตัวเลือก “TYPE” กับ <OL> ได้ ดงั นี้
<UL TYPE=A> ผลลัพธ์ คือ A , B , C , D , ...
<UL TYPE=1> ผลลัพธ์ คือ 1 , 2 , 3 , 4 , ...
<UL TYPE=I> ผลลัพธ์ คือ I , II , III , IV , ...
61
การกาหนดค่ าเพิม่ เติมใน Order List
SKIP
ใช้สาหรับการเรี ยงลาดับตัวเลขในรายการ เช่น <Li skip=3>
หมายถึง ให้ใส่ ตวั เลขเพิ่มจากปกติอีก 3 โดยเริ่ มจากรายการนี้
เป็ นต้นไป
START ใช้กาหนดค่าเริ่ มต้น เช่น <OL type=a start=2> หมายถึงให้เริ่ ม
จากรายการลาดับที่ 2 (เริ่ มที่ B)
Value
ใช้ระบุลงไปเลยว่าต้องการให้รายการนั้นเป็ นตัวเลขอะไร
62
<BODY BGCOLOR="#FFFFFF">
ทดสอบการแสดงผล
<OL>
<LI>รายละเอียด 1
<LI>รายละเอียด 2
<LI>รายละเอียด 3
<LI>รายละเอียด 4
</OL>
</BODY>
63
List แบบ Ordered List
64
ความสามารถด้ านการทาข้ อความเคลือ่ นไหว
คาสั่ งที่ใช้
<MARQUEE ตัวเลือก>…………</MARQUEE>
ตัวเลือกได้ แก่
BEHAVIOR = ลักษณะการเคลือ่ นไหวได้ แก่
SCROLL,SLIDE,ALTERNATE
DIRECTION = ทิศทางการเคลือ่ นไหว ได้ แก่ LEFT,RIGHT
WIDTH/HEIGHT= กาหนดขนาดของพืน้ ทีแ่ สดงผล
LOOP=จานวนรอบที่แสดงผล
65
<html>
<body>
<marquee behavier=slide width=80% direction=right
bgcolor=#ff0000>
ยินดีตอ้ นรับ
</marquee>
</body>
</html>
66
การสร้างตาราง ( TABLE )
รู ปแบบคาสั่ ง
<TABLE>
<CAPTION> ข้อความอธิบายตาราง</CAPTION>
<TR><TH></TH><TH>----</TH></TR>
<TR><TD></TD><TD>----</TD></TR>
--<TR><TD><TD/><TD>----</TD></TR>
</TABLE>
67
< BODY>
การสร้ างตาราง ( TABLE )
<TABLE>
<CAPTION>ผลการแข่ งขัน</CAPTION>
<TR><TH>รางวัลที1่ </TH><TH>รางวัลที2่ </TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
< /BODY >
68
69
การเพิม่ ขนาดความหนาให้ กบั ตาราง
รูปแบบคาสั่ ง
<TABLE BORDER="number">
----</TABLE>
70
< BODY>
การเพิม่ ขนาดความหนาให้ กบั ตาราง
<TABLE BORDER="10">
<CAPTION>ผลการแข่ งขัน</CAPTION>
<TR><TH>รางวัลที1่ </TH><TH>รางวัลที2่ </TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
< /BODY >
71
72
ตารางซ้อนตาราง
รู ปแบบคาสัง่
เหมือนกับคาสัง่ การสร้างตารางทัว่ ๆไปเพียงแต่เรา
สร้างตารางอีกชุดหนึ่งไว้ใน
<TD>.....</TD>ของตารางหลัก
73
<TD>
<TABLE BORDER="10">
<TR><TH>รางวัลที1่ </TH><TH>รางวัลที่
2</TH></TR>
<TR><TD>TV</TD><TD>CARD</TD></TR>
<TR><TD>VDO</TD><TD>TOY</TD></TR>
</TABLE>
</TD>
74
75
ALIGN
เพือ่ จัดวางข้ อความ
WIDTH
เพือ่ ปรับขนาดตาราง
COLSPAN
เพือ่ รวมตารางย่ อยตามคอลัมน์
ROWSPAN
เพือ่ รวมตารางย่ อยตามแถว
76
การสร้ าง Link. เพือ่ เชื่อมโยงไปยังเพจอืน่ ๆ
<A href=“ชื่อเพจที่ต้องการไป”>
………. ข้ อความ/รูปภาพ…….
</a>
<BODY BGCOLOR="#FFFFFF">
<A HREF=“Main.html"> COMPUTERHTML</A>
</BODY>
77
78
ต้ องการจะ Link ไปหา ... URL
<A HREF="ชื่อ URL ที่ต้องการจะไป">ข้ อความ
ที่ใช้ เป็ นตัว Link</A>
<BODY BGCOLOR="#FFFFFF">
Go to <A
HREF="http://Comsc.rilp.ac.th">COMPUTE
R-HTML</A>
</BODY>
79
สร้ าง Link เพือ่ ให้ ส่ง E-Mail
<BODY BGCOLOR="#FFFFFF">
Mail to Me :
<A
HREF="mailto:[email protected]">pak
[email protected]</A>
</BODY>
80
เราสามารถสร้ าง Link จากรูปภาพได้
<BODY BGCOLOR="#FFFFFF">
Go to
<A HREF="http://Comsc.rilp.ac.th">
<IMG SRC="copper.gif" WIDTH=82
HEIGHT=68>
</A>
</BODY>
81
ไม่ ต้องแสดงเส้ นขอบ
<BODY BGCOLOR="#FFFFFF">
Go to
<A HREF="http://Comsc.rilp.ac.th"><IMG
SRC="copper.gif" WIDTH=82 HEIGHT=68
BORDER=0></A>
</BODY>
82
การระบุตาแหน่ งของการ Link ในเอกสารอืน่
<A name “ต่าแหน่ ง”> ข้ อความ </a>
เช่ น
<A name=“top”>บนสุ ด</a>
83
การระตาแหน่ งในการแสดงเอกสารจากการ LINK
<A href=“เอกสารที่จะแสดง” target=“Option”> ข้ อความ </a>
_BLANK
_PARENT
_TOP
NAME
แสดงบนเพจใหม่
แสดงบนเพจเดิม
แสดงในส่ วนบนสุ ด
ตามชื่ อของ FRAME
84
การแบ่ งจอภาพโดยคาสั่ ง FRAME SRC
<HTML>
<HEAD><TITLE>....................</TITLE></HEAD>
<FRAMESET ROWS[COLS]="number หรือ %">
<FRAME SRC=ชื่อไฟล์ ทตี่ ้ องการแสดงผล หรือ URL>
<FRAME SRC=ชื่อไฟล์ ทตี่ ้ องการแสดงผล หรือ URL>
</FRAMESET>
</HTML>
โดยที.่ ..ROWS=แบ่ งแนวนอน,COLS=แบ่ งแนวตั้ง
85
<HTML>
<HEAD>
<TITLE>การแบ่ งจอภาพ ( FRAME )</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*">
<FRAME SRC="logo.html" >
<FRAME SRC="main.html">
</FRAMESET>
</HTML>
86
87
<HTML>
<HEAD>
<TITLE>การแบ่ งจอภาพ ( FRAME
)</TITLE></HEAD>
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.html" >
<FRAME SRC="main.html">
</FRAMESET>
</HTML>
88
89
<FRAMESET COLS="100,600">
<FRAME SRC="menu.html" >
<FRAMESET ROWS="20%,*">
<FRAME SRC="logo.html" >
<FRAME SRC="main.html">
</FRAMESET>
</FRAMESET>
90
91
การสร้างแบบฟอร์มเพื่อรับข้อมูล
คาสัง่ <FORM> เป็ นคาสัง่ เริ่ มต้นในการสร้างแบบฟอร์ม
<FORM Attributes>
…….. คาสัง่ อื่นๆ ที่ใช้ภายในคาสัง่ FORM ……..
</FORM
92
Attribute ต่างๆ ที่ใช้ในกับคาสัง่ <FORM> ได้แก่
ตัวเลือก
ACTION
METHOD = GET หรื อ
POST
ความหมาย
ใช้ระบุชื่อ Script ที่ Server เรี ยกขึ้นมาเพื่อใช้
ในการประมวลผลข้อมูลที่ผใู ้ ช้ป้อนข้อมูลเข้า
มาใน Form
ใช้ในการบอก Form ว่าจะส่ งข้อมูลกลับไปให้
กับ Script เพื่อประมวลผลโดยโปรแกรมที่
Server ด้วยวิธีใด กาหนดได้ 2 วิธี คือ
- GET เป็ นการนาข้อมูลไปต่อท้ายสุ ด แล้ว
ประมวลผลทีเดียว
- POST จะนาข้อมูลส่ งไปที่ Server แยกกันไป
93
เป็ น Transaction
ตัวอย่าง การสร้างฟอร์ม
<FORM METHOD="POST" ACTION="output.php">
………………………………..
</FORM>
94
คาสัง่ <TEXTAREA> เป็ นรู ปแบบการป้ อนข้อมูลแบบอิสระ
(Free Form)
<TEXTAREA Attributes>
……. Default Text …….
</TEXTAREA>
Atteibute ต่างๆ ได้แก่
- NAME
กาหนดชื่อให้กบั พื้นที่ขอ้ มูล
- ROWS
กาหนดจานวนแถวที่ตอ้ งการแสดงไว้ใน Form
- COLS
กาหนดจานวนตัวอักษรที่ตอ้ งการแสดงไว้ใน Form
- Default Text เป็ นข้อความที่ใช้แสดงให้เห็นภายในพื้นที่ของ TEXT
95
ตัวอย่างการใช้ TEXTAREA
<FORM METHOD="POST" ACTION="output.php">
<TEXTAREA NAME="text" ROWS="5" COLS="30">
.. บันทึกข้อมูล ...
</TEXTAREA>
</FORM>
96
97
คาสัง่ <INPUT> เป็ นส่ วนที่ใช้ป้อนข้อมูลภายใน 1 บรรทัด
… Text … <INPUT Attributes>
Attribute ต่างๆ ของ <INPUT>
- Text
เป็ นข้อความที่ใช้แสดงด้านหน้าของพื้นที่ที่ใช้รับข้อมูล
- NAME
กาหนดชื่อให้กบั พื้นที่รับข้อมูล
- SIZE
กาหนดความยาวของช่องที่ใช้ในการป้ อนข้อมูล
- MAXLENGTH กาหนดความยาวสูงสุ ดของตัวอักษรที่จะป้ อนข้อมูล
- VALUE กาหนดค่าเริ่ มต้นไว้ส่วนหน้าในช่องเติมข้อมูล
- CHECKED กาหนดให้มีการเลือกตัวเลือกไว้ล่วงหน้า(เฉพาะชนิด
Checkbox และ Radio Button เท่านั้น)
98
- TYPE
กาหนดชนิดของข้อมูลที่จะป้ อน ได้แก่
– Text ข้อมูลทัว่ ไป
– Password รหัสผ่านโดยจะแสดงข้อมูลเป็ น “*”
- Radio Button เป็ นวงกลมตัวเลือก
– Checkbox เป็ นสี่ เหลี่ยมตัวเลือก
– Reset สาหรับลบข้อมูลทั้งหมดที่ป้อนทิ้งไป
– Submit สาหรับส่งข้อมูลทั้งหมดที่ป้อน
– IMAGE จะทางานเหมือน Submit แต่จะใช้รูป
ภาพแสดงแทน
99
ตัวอย่างการใช้ Input โดยมี Type แบบ “Text” และ “Password”
<FORM METHOD="POST" ACTION="output.php">
USER <INPUT TYPE="text" NAME="user"><BR>
PASSWORD <INPUT TYPE="password">
</FORM>
100
101
ตัวอย่างการใช้ Input โดยมี Type แบบ “Check” และ “Radio”
<FORM METHOD="POST" ACTION="output.php">
คานาหน้าชื่อ<BR>
<INPUT TYPE="checkbox" NAME="c1" value=0>นาย
<INPUT TYPE="checkbox" NAME="c2" value=1>นาง
<INPUT TYPE="checkbox" NAME="c3" value=2>นางสาว
<BR>
สถานะภาพ<BR>
<INPUT TYPE="radio" NAME="r1" value=0>โสด
<INPUT TYPE="radio" NAME="r2" value=1>สมรส
<INPUT TYPE="radio" NAME="r3" value=2>หย่าร้าง
</FORM>
102
103
ตัวอย่างการใช้ Input โดยมี Type แบบ “Reset” และ “Submit”
<FORM METHOD="POST" ACTION="output.php">
<INPUT TYPE="reset" value="ยกเลิกการป้ อน
ข้อมูล"><BR><BR>
<INPUT TYPE="submit" value="ส่ งข้อมูล">
</FORM>
104
105
คาสัง่ <SELECT> ใช้แสดงตัวเลือกทั้งหมดที่มีเพื่อให้ผใู้ ช้เลือก โดย
อาจแสดงในรู ปแบบ Drop-down List ใช้คู่กบั คาสัง่ <OPTION>
<SELECT Attributes>
<OPTION Attributes> Text1
……………..
<OPTION Attributes> Text n
</SELECT>
Attributes ที่ใช้กบั คาสัง่ <Select> ได้แก่
- NAME
กาหนดชื่อให้กบั พื้นที่ขอ้ มูล
- SIZE
กาหนดจานวนตัวเลือกที่ตอ้ งการแสดงบนจอภาพ
- MULTIPLE เพื่อให้แสดงตัวเลือกทั้งหมดที่มีมาให้
106
Attributes ที่ใช้กบั คาสัง่ <OPTION> ได้แก่
- VALUE กาหนดค่าที่จะใช้ในการส่ งให้กบั Script
- SELECT กาหนดให้ตวั เลือกใดถูกเลือกไว้ล่วงหน้า
- Text1…Text n แสดงค่าของตัวเลือกที่ตอ้ งการให้ผใู ้ ช้เห็น
107
ตัวอย่างการใช้ <SELECT>
<FORM METHOD="POST" ACTION="output.asp">
<SELECT NAME="job" >
<OPTION Value="0">รับจ้าง
<OPTION Value="1">ข้าราชการ
<OPTION Value="2">เกษตรกร
<OPTION Value="3">ค้าขาย
</SELECT>
</FORM>
108
109
ตัวอย่างการสร้างแบบฟอร์ม
<FORM METHOD="POST" ACTION="output.asp">
ชื่อ<INPUT TYPE="text" NAME="">นามสกุล<INPUT TYPE="text"
NAME=""><BR>
คานาหน้าชื่อ<BR>
<INPUT TYPE="checkbox" NAME="c1" value=0>นาย
<INPUT TYPE="checkbox" NAME="c2" value=1>นาง
<INPUT TYPE="checkbox" NAME="c3" value=2>นางสาว
<BR>
สถานะภาพ<BR>
<INPUT TYPE="radio" NAME="r1" value=0>โสด
<INPUT TYPE="radio" NAME="r2" value=1>สมรส
<INPUT TYPE="radio" NAME="r3" value=2>หย่าร้าง
110
ตัวอย่างการสร้างแบบฟอร์ม(ต่อ)
<BR>
อาชีพ
<SELECT NAME="job" >
<OPTION Value="0">รับจ้าง
<OPTION Value="1">ข้าราชการ
<OPTION Value="2">เกษตรกร
<OPTION Value="3">ค้าขาย
</SELECT><BR>
<INPUT TYPE="reset" value="ยกเลิกการป้ อนข้อมูล"><INPUT
TYPE="submit" value="ส่ งข้อมูล">
</FORM>
111
112