HTML (Hypertext Markup Language)
รูปแบบของ HTML 1. Text หมายถึงข้อความทั่วไป 2. Tag , Element หรือ คำสั่ง หมายถึงคำสั่งที่ใช้ใน การกำหนดรูปแบบของ Text 3. Attribute หมายถึงตัวเลือกที่คำสั่งของ HTML สามารถใช้ได้
กฏในการใช้งาน HTML แต่ละคำสั่ง จะต้องอยู่ในเครื่องหมาย < และ > เท่านั้น สามารถใช้ตัวอักษรพิมพ์เล็ก หรือ ใหญ่ ก็ได้เพราะได้ความหมายเหมือนกัน สามารถพิมพ์เอกสาร HTML จัพิมพ์ติดต่อกัน หรือ พิมพ์แยกบันทัดกันก็ได้
การใส่คำอธิบาย(Comment) การใส่คำอธิบายบางส่วนของ HTML ที่เราเขียนมาเพื่อจะได้สะดวกในการติดตามในภายหลัง Comment จะไม่แสดงผลบน Browser รูปแบบของคำสั่งจะแตกต่างจาก HTML ทั่วไป คือเริ่มต้นด้วยคำสั่ง <!- และ ปิดด้วยคำสั่ง ->
เริ่มต้นกับการสร้าง Web Page!!! ในเอกสาร HTML นั้นจะต้องขึ้นต้นด้วยคำสั่ง(Tags.) <HTML> และปิดท้ายด้วย </HTML> ดังนี้ <HTML> ……….. </HTML>
ทุกเอกสาร HTML จะต้องมี HEAD tag ซึ่ง บอกว่าส่วนนี้เป็น Head ของเอกสารนี้ </HEAD> </HTML>
ใน HEAD tags เราจะบอกหน้าปัจจุบันของ Home Page ของเราด้วย TITLE tag <HTML> <HEAD> <TITLE>……………….</TITLE> </HEAD> </HTML>
ส่วนรายละเอียดของหน้าเอกสารจะอยู่ในส่วนของ BODY tags ส่วนรายละเอียดของหน้าเอกสารจะอยู่ในส่วนของ BODY tags. ซึ่งจะเป็นส่วนที่อยู่ถัดไปจาก HEAD tags. <HTML> <HEAD> <TITLE> ……… </TITLE> </HEAD> <BODY> ……………. </BODY> </HTML>
Attribute ของคำสั่ง <BODY>
เริ่มเขียน Page แรกกัน <HTML> <HEAD> <TITLE>My First Page.</TITLE> </HEAD> <BODY> Hello.........World. </BODY> </HTML>
พิมพ์ข้อความ ทดสอบการแสดงผล <BODY> ทดสอบการแสดงผล </BODY>
เปลี่ยนสีพื้นหลังของหน้าต่างได้โดยใช้คำสั่ง <BODY BGCOLOR="#FF0000"> ทดสอบการแสดงผล </BODY>
ใช้รูปภาพมาเป็น Background ได้ด้วย <BODY BACKGROUND=”bgg.gif"> ทดสอบการแสดงผล </BODY>
กลับสู่หน้าจอสีขาวตามเดิม <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล </BODY>
การกำหนดหัวข้อด้วย Tag <Hn> รูปแบบ <Hn> ………………… </Hn> n = ค่าของขนาดเป็นตัวเลข เช่น <h1>…….</h1> โดยค่าของ n จะมีค่าตั้งแต่ 1- 6 เรียงจากมากไปน้อย
<h1> ข้อความ </h1>
การจัดรูปแบบของตัวอักษร
การทำตัวอักษรหนา (Bold) <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <B>ตัวหนา</B> </BODY>
การทำตัวอักษรเอียง (Italics) <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <I>ตัวเอียง</I> </BODY>
การทำตัวอักษรขีดเส้นใต้ (Underlining) <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <U>ตัวขีดเส้นใต้</U> </BODY>
เราสามารถใช้ Tags หลายอย่างปนกันได้ตามต้องการ <BODY BGCOLOR="#FFFFFF"> ตัวปกติ <I><B>ตัวเอียงและหนา</B></I> </BODY>
ในการใช้ Tags หลายอันปนกันจะต้องจัด เรียงลำดับโดยตัวที่ใช้ก่อนจะต้องถูกปิดทีหลังและ ตัวอยู่ทีหลังจะต้องปิดก่อน <ก่อน><หลัง></ก่อน></หลัง> ผิดหลักการ <ก่อน><หลัง></หลัง></ก่อน> ถูกหลักการ
เปลี่ยนขนาดของอักษร(Font) ได้ด้วยวิธีการง่ายๆ อันดับแรกต้องเพิ่ม <FONT> tags... <BODY BGCOLOR="#FFFFFF"> ทดสอบขนาดตัวอักษร <FONT>ขนาด</FONT> </BODY> จากนั้นจึงกำหนดค่าของขนาดด้วย SIZE <BODY BGCOLOR="#FFFFFF"> ทดสอบขนาดตัวอักษร <FONT SIZE=6>ขนาด</FONT> </BODY>
ขนาดของอักษรทั้งหมด 7 ขนาด 1-teeny tiny 2-small 3-regular 4-extra medium 5-large 6-real big 7-yelling!
การกำหนดชื่อ Font ที่ใช้แสดงผล <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT FACE="ARIAL">ARIAL</FONT> </BODY>
เราสามารถที่จะใส่ชื่อ Font มากกว่า 1 ชื่อได้ลงไป ใน Tags ของ <FONT> ได้เพื่อที่เราจะใช้ Font ตัว ที่สองหรือสามแทนเมื่อ ใน Browser ไม่มี Font ตัวแรกๆ ถ้ารายชื่อ Font ที่ เราใส่ไว้ไม่มีเลย Browser จะใช้ Default Font แทน <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">ชื่อ Font </FONT>
เปลี่ยนสีอักษรเป็นสีที่เราชอบ <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT COLOR="#FFOOOO">สีแดง</FONT> </BODY>
เราสามารถใช้หลายๆ ATTRIBUTE ใน <TAG>... <BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Font</FONT> </BODY>
<BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Font</FONT></B></I></U> </BODY>
การทำงานของ Browser <BODY BGCOLOR="#FFFFFF"> สวัสดี ลองดูซิ ว่ามีการจัดเรียงบรรทัด เป็นอย่างไร ? </BODY>
จะขึ้นบรรทัดใหม่จะต้องเพิ่ม Tags <BR> ลงไป เพื่อเป็นการบอกให้ขึ้นบรรทัดใหม่ <BODY BGCOLOR="#FFFFFF"> สวัสดี <BR> ลองดูซิ <BR> ว่ามีการจัดเรียงบรรทัด <BR> เป็นอย่างไร ? </BODY>
<BODY BGCOLOR="#FFFFFF"> ทดสอบ การแสดงผล ของ Browser <BODY BGCOLOR="#FFFFFF"> ทดสอบ การแสดงผล ของ Browser. </BODY>
จะต้องใส่รหัสช่องว่าง(Space) ใช้ <BODY BGCOLOR="#FFFFFF"> ทดสอบ การ แสดงผล   ; ของ Browser. </BODY>
Special Character ที่มี ; ปิดท้าย ( non-breaking space) < (< less-than symbol) > (> greater-than symbol) & (& ampersand) " (" quotation mark)
การสั่งให้เว้นบรรทัดที่ละหลายๆบรรทัดกัน <BODY BGCOLOR="#FFFFFF"> ทดสอบ <BR> <BR> <BR> <BR> การแสดงผล </BODY>
เรื่องของเส้นกั้น หรือ "Horizontal Rule." <BODY BGCOLOR="#FFFFFF"> <HR> </BODY>
การกำหนดความกว้าง WIDTH - กำหนดเป็น % ของ Windows - กำหนดเป็น Pixel ของจอภาพ
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> </BODY>
การกำหนดตำแหน่งของเส้น <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% ALIGN=LEFT> <HR WIDTH=60% ALIGN=RIGHT> <HR WIDTH=60% ALIGN=CENTER> </BODY>
สามารถที่จะกำหนด 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>
สามารถกำหนดให้เป็น 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>
การจัดเอกสาร ด้วย tag <p> และ <pre> รูปแบบ <pre>……………</pre> ใช้ในการรูปแบบของข้อความให้อยู่ในรูปแบบที่พิมพ์
ตัวอย่างการจัดย่อหน้าด้วย <p> <HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p> การเขียนโฮมเพจ<br> ด้วยภาษา html </p> เรื่อง <br> การทดสอบการใช้<br> คำสั่งจัดย่อหน้า </BODY> </HTML> ตัวอย่างการจัดย่อหน้าด้วย <p>
ตัวอย่างการใช้คำสั่ง จัดย่อหน้าและวางตำแหน่ง <HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p align=center> การเขียนโฮมเพจ<br> ด้วยภาษา html </p> <p align=right> เรื่อง <br> การทดสอบการใช้<br> คำสั่งจัดย่อหน้า </BODY> </HTML> ตัวอย่างการใช้คำสั่ง จัดย่อหน้าและวางตำแหน่ง
ตัวอย่างการจัดรูปแบบข้อความด้วย<pre> <HTML> <HEAD> <TITLE>Testing Tag</TITLE> </HEAD> <BODY> <p > การเขียนโฮมเพจ ด้วยภาษา html </p> <pre > เรื่อง การทดสอบการใช้ คำสั่งจัดย่อหน้า </pre> </BODY> </HTML> ตัวอย่างการจัดรูปแบบข้อความด้วย<pre>
การเรียกใช้งาน File รูปภาพนั้นเราจะใช้คำสั่งนี้ <IMG> (image) tag. <BODY BGCOLOR="#FFFFFF"> <IMG> </BODY>
การกำหนดขนาดของรูปภาพ <BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68> </BODY>
การกำหนดเส้นกรอบของรูปภาพ ด้วย BORDER <img src=“duck.gif” border=2 > การกำหนดข้อความแทนรูปภาพด้วย Alternative <img src=“duck.gif” border=2 alt=“เป็ด” >
การจัดวางรูปภาพ ด้วย Align Align=left คือการ วางรูปภาพให้ชิดของเอกสารด้านซ้าย Align=right คือการ วางรูปภาพให้ชิดของเอกสารด้านขวา
การจัดวางรูปภาพ ร่วมกับข้อความ ด้วย Align Align=Top คือการ วางรูปภาพให้ชิดข้อความบันทัดบนสุด Align=Middle คือการ วางรูปภาพให้ตำแหน่งกลางของข้อความ Align=botton คือการ วางรูปภาพให้ชิดข้อความบันทัดบนสุด
การกำหนดระยะการแสดงรูปภาพด้วย Vspace,Hspace เช่น <img src=“duck.gif” vspce=100 hspace=200>
วิธีการแสดง List มีทั้ง ORDERED List. และ UNORDERED List. 1 รายละเอียด 1 2 รายละเอียด 2 3 รายละเอียด 3 4 รายละเอียด 4 นี่คือตัวอย่างของ UNORDERED รายละเอียด 1 รายละเอียด 2 รายละเอียด 3 รายละเอียด 4
Un Order Lists แสดงข้อความแยกเป็นบรรทัดๆ ด้วย Bullet ใช้คำสั่ง <UL> สามารถใช้ตัวเลือก “TYPE” กับ <UL> ได้ดังนี้ <UL TYPE=DISC> กำหนด Bullet ให้เป็นวงกลมสีดำ <UL TYPE=CIRCLE> กำหนด Bullet ให้เป็นวงกลมสีขาว <UL TYPE=SQUARE> กำหนด Bullet ให้เป็นสีเหลี่ยมสีทึบ
<BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <UL> <LI>รายละเอียด 1 <LI>รายละเอียด 2 <LI>รายละเอียด 3 <LI>รายละเอียด 4 </UL> </BODY>
List แบบ Unordered List
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 , ...
การกำหนดค่าเพิ่มเติมใน Order List
<BODY BGCOLOR="#FFFFFF"> ทดสอบการแสดงผล <OL> <LI>รายละเอียด 1 <LI>รายละเอียด 2 <LI>รายละเอียด 3 <LI>รายละเอียด 4 </OL> </BODY>
List แบบ Ordered List
ความสามารถด้านการทำข้อความเคลื่อนไหว คำสั่งที่ใช้ <MARQUEE ตัวเลือก>…………</MARQUEE> ตัวเลือกได้แก่ BEHAVIOR = ลักษณะการเคลื่อนไหวได้แก่ SCROLL,SLIDE,ALTERNATE DIRECTION = ทิศทางการเคลื่อนไหว ได้แก่ LEFT,RIGHT WIDTH/HEIGHT= กำหนดขนาดของพื้นที่แสดงผล LOOP=จำนวนรอบที่แสดงผล
<html> <body> <marquee behavier=slide width=80% direction=right bgcolor=#ff0000> ยินดีต้อนรับ </marquee> </body> </html>
การสร้างตาราง ( TABLE ) รูปแบบคำสั่ง <TABLE> <CAPTION> ข้อความอธิบายตาราง</CAPTION> <TR><TH></TH><TH>----</TH></TR> <TR><TD></TD><TD>----</TD></TR> --- <TR><TD><TD/><TD>----</TD></TR> </TABLE>
< 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 >
การเพิ่มขนาดความหนาให้กับตาราง รูปแบบคำสั่ง <TABLE BORDER="number"> --- --- </TABLE>
< 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 >
ตารางซ้อนตาราง รูปแบบคำสั่ง เหมือนกับคำสั่งการสร้างตารางทั่วๆไปเพียงแต่เรา สร้างตารางอีกชุดหนึ่งไว้ใน <TD>.....</TD>ของตารางหลัก
<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>
ALIGN เพื่อจัดวางข้อความ WIDTH เพื่อปรับขนาดตาราง COLSPAN เพื่อรวมตารางย่อยตามคอลัมน์ ROWSPAN เพื่อรวมตารางย่อยตามแถว
การสร้าง Link. เพื่อเชื่อมโยงไปยังเพจอื่นๆ <A href=“ชื่อเพจที่ต้องการไป”> ………. ข้อความ/รูปภาพ……. </a> <BODY BGCOLOR="#FFFFFF"> <A HREF=“Main.html"> COMPUTER-HTML</A> </BODY>
ต้องการจะ Link ไปหา ... URL <A HREF="ชื่อ URL ที่ต้องการจะไป">ข้อความ ที่ใช้เป็นตัว Link</A> <BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://Comsc.rilp.ac.th">COMPUTE R-HTML</A> </BODY>
สร้าง Link เพื่อให้ส่ง E-Mail <BODY BGCOLOR="#FFFFFF"> Mail to Me : <A HREF="mailto:pakawatk@hotmail.com">pak awatk@hotmail.com</A> </BODY>
เราสามารถสร้าง Link จากรูปภาพได้ <BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://Comsc.rilp.ac.th"> <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68> </A> </BODY>
ไม่ต้องแสดงเส้นขอบ <BODY BGCOLOR="#FFFFFF"> Go to <A HREF="http://Comsc.rilp.ac.th"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A> </BODY>
<A name=“top”>บนสุด</a> การระบุตำแหน่งของการ Link ในเอกสารอื่น <A name “ต่ำแหน่ง”> ข้อความ </a> เช่น <A name=“top”>บนสุด</a>
การระตำแหน่งในการแสดงเอกสารจากการ LINK <A href=“เอกสารที่จะแสดง” target=“Option”> ข้อความ </a>
การแบ่งจอภาพโดยคำสั่ง FRAME SRC <HTML> <HEAD><TITLE>....................</TITLE></HEAD> <FRAMESET ROWS[COLS]="number หรือ %"> <FRAME SRC=ชื่อไฟล์ที่ต้องการแสดงผล หรือ URL> <FRAME SRC=ชื่อไฟล์ที่ต้องการแสดงผล หรือ URL> </FRAMESET> </HTML> โดยที่...ROWS=แบ่งแนวนอน,COLS=แบ่งแนวตั้ง
<HTML> <HEAD> <TITLE>การแบ่งจอภาพ ( FRAME )</TITLE> </HEAD> <FRAMESET ROWS="20%,*"> <FRAME SRC="logo.html" > <FRAME SRC="main.html"> </FRAMESET> </HTML>
<HTML> <HEAD> <TITLE>การแบ่งจอภาพ ( FRAME )</TITLE></HEAD> <FRAMESET COLS="20%,*"> <FRAME SRC="menu.html" > <FRAME SRC="main.html"> </FRAMESET> </HTML>
<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>
การสร้างแบบฟอร์มเพื่อรับข้อมูล คำสั่ง <FORM> เป็นคำสั่งเริ่มต้นในการสร้างแบบฟอร์ม <FORM Attributes> …….. คำสั่งอื่นๆ ที่ใช้ภายในคำสั่ง FORM …….. </FORM
Attribute ต่างๆ ที่ใช้ในกับคำสั่ง <FORM> ได้แก่
<FORM METHOD="POST" ACTION="output.php"> ……………………………….. ตัวอย่าง การสร้างฟอร์ม <FORM METHOD="POST" ACTION="output.php"> ……………………………….. </FORM>
คำสั่ง <TEXTAREA> เป็นรูปแบบการป้อนข้อมูลแบบอิสระ (Free Form) <TEXTAREA Attributes> ……. Default Text ……. </TEXTAREA> Atteibute ต่างๆ ได้แก่ - NAME กำหนดชื่อให้กับพื้นที่ข้อมูล - ROWS กำหนดจำนวนแถวที่ต้องการแสดงไว้ใน Form - COLS กำหนดจำนวนตัวอักษรที่ต้องการแสดงไว้ใน Form - Default Text เป็นข้อความที่ใช้แสดงให้เห็นภายในพื้นที่ของ TEXT
<FORM METHOD="POST" ACTION="output.php"> ตัวอย่างการใช้ TEXTAREA <FORM METHOD="POST" ACTION="output.php"> <TEXTAREA NAME="text" ROWS="5" COLS="30"> .. บันทึกข้อมูล ... </TEXTAREA> </FORM>
… Text … <INPUT Attributes> Attribute ต่างๆ ของ <INPUT> - Text เป็นข้อความที่ใช้แสดงด้านหน้าของพื้นที่ที่ใช้รับข้อมูล - NAME กำหนดชื่อให้กับพื้นที่รับข้อมูล - SIZE กำหนดความยาวของช่องที่ใช้ในการป้อนข้อมูล - MAXLENGTH กำหนดความยาวสูงสุดของตัวอักษรที่จะป้อนข้อมูล - VALUE กำหนดค่าเริ่มต้นไว้ส่วนหน้าในช่องเติมข้อมูล - CHECKED กำหนดให้มีการเลือกตัวเลือกไว้ล่วงหน้า(เฉพาะชนิด Checkbox และ Radio Button เท่านั้น)
<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>
ตัวอย่างการใช้ 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>
<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>
คำสั่ง <SELECT> ใช้แสดงตัวเลือกทั้งหมดที่มีเพื่อให้ผู้ใช้เลือก โดย อาจแสดงในรูปแบบ Drop-down List ใช้คู่กับคำสั่ง <OPTION> <SELECT Attributes> <OPTION Attributes> Text1 …………….. <OPTION Attributes> Text n </SELECT> Attributes ที่ใช้กับคำสั่ง <Select> ได้แก่ - NAME กำหนดชื่อให้กับพื้นที่ข้อมูล - SIZE กำหนดจำนวนตัวเลือกที่ต้องการแสดงบนจอภาพ - MULTIPLE เพื่อให้แสดงตัวเลือกทั้งหมดที่มีมาให้
Attributes ที่ใช้กับคำสั่ง <OPTION> ได้แก่ - VALUE Attributes ที่ใช้กับคำสั่ง <OPTION> ได้แก่ - VALUE กำหนดค่าที่จะใช้ในการส่งให้กับ Script - SELECT กำหนดให้ตัวเลือกใดถูกเลือกไว้ล่วงหน้า - Text1…Text n แสดงค่าของตัวเลือกที่ต้องการให้ผู้ใช้เห็น
<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>
ตัวอย่างการสร้างแบบฟอร์ม <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>หย่าร้าง
ตัวอย่างการสร้างแบบฟอร์ม(ต่อ) <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>