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