สอนสร้างโฮมเพจ คู่มือ HTML ฉบับเร่งด่วน รูปแบบไฟล์ HTML พื้นฐานมาตรฐานที่น่าจะมีทุกไฟล์ HTML <HTML> <HEAD><TITLE>ส่วนแสดงชื่อหัวเรื่องของไฟล์นี้ </TITLE></HEAD> <BODY> ส่วนเนื้อหาของไฟล์เอกสารนี้ </BODY> </HTML> * TAG จะอยู่ในเครื่องหมาย < > ตัวใหญ่เล็กไม่สำคัญ * เกือบทุก TAG จะมี TAG ปิด คือจะต้องมี < > และ </ > ยกเว้นบาง TAG เช่น <BR> , <P> เป็นต้น * การพิมพ์จะพิมพ์ติดกันไปเลยหรือแยกบรรทัดมีค่าเท่ากัน แต่จะช่วยให้อ่านง่ายขึ้น * หน้าแรกสมควรจะชื่อ index.htm หรือ index.html คำสั่งเบื้องต้น- <HTML> , <HTML> ใส่เพื่อให้ Browser รู้ว่าเป็นเอกสาร HTML สมควรจะมีทุกไฟล์- <HEAD> , </HEAD> ใช้กำหนดชื่อเรื่องให้กับเอกสาร แต่จะไม่แสดงผลใน Browser- <BODY>, </BODY> ใช้กำหนดขอบเขตของเนื้อหาเอกสารในส่วนนั้นว่าอยู่ช่วงใด้- <TITLE>, </TITLE> ใช้แสดงหัวเรื่องของหน้านั้น ๆ จะแสดงผลบน Browser ด้านบน ต้องวางระหว่าง <HEAD> และ </HEAD>- <PRE>, </PRE> จะจัดรูปแบบข้อความ ให้ตรงกับเอกสารเดิม คือพิมพ์อย่างไร เว้นว่าง อย่างไรก็จะออกมาตามนั้นเลย- <Hn>, </Hn> กรณีที่เอกสารแบ่งเป็นหลายส่วน เราจะกำหนดขนาดตัวอักษรในแต่ละ Section ให้แตกต่างกันออกไปได้ ค่า n อยู่ระหว่าง 1-6 , 1 = เล็กสุด , 6 = ใหญ่สุด- <ADDRESS>,</ADDRESS> เป็นการกำหนด footer นิยมใส่ไว้ด้านล่างเอกสาร เช่นที่อยู่ที่เราจะ ติดต่อได้ จะแสดงผลเป็นตัวเอน- <HR> ใช้สร้างเส้นตรงแนวนอน ไม่มี </HR> มี Option ประกอบดังนี้ - NOSHADE เช่น <HR NOSHADE> เป็นการกำหนดให้เป็นเส้นทึบดำ - SIZE เช่น <HR SIZE = 10> กำหนดความหนาให้กับเส้น สูงสุดได้ 500 - WIDTH ใช้กำหนดความยาวเส้น ถ้าไม่กำหนดจะถือว่าให้ยาวเต็มบรรทัด กำหนดได้ 2 แบบคือ - PIXEL แล้วแต่จอภาพ เช่น <HR WIDTH=200> - Percent กำหนดเป็นเปอร์เซนต์ตามความกว้างของจอภาพ เช่น <HR WIDTH=80%> - ALIGN กำหนดตำแหน่งเส้นในแนวนอนว่าจะให้ชิดด้านใด เช่น <HR WIDTH=50% ALIGN=CENTER> คือกำหนดให้เส้นตรงยาวเป็นครึ่งหนึ่งของจอภาพ และวางไว้ กลางบรรทัดพอดี- <!- -> เป็นการใส่หมายเหตุ เช่น <!- หมายเหตุหรือคำอธิบาย ->
การจัดวางข้อความ- การวางตำแหน่งข้อความ ใช้คำสั่ง <ALIGN ตัวเลือก> โดยตัวเลือกมี Left , Right , Center เป็นการ บอกว่า จะให้วางข้อความชิดด้านใดของบรรทัด- <BR> เป็นคำสั่งใช้ขึ้นบรรทัดใหม่ อาจใช้ ALIGN มาช่วยเช่น <BR ALIGN CENTER> เป็นการ ให้ขึ้นบรรทัดมา โดยชิดขวาของบรรทัด- <P> ขึ้นย่อหน้าใหม่- <BR> ขึ้นบรรทัดใหม่- <Center> , </Center> เป็นคำสั่งใช้จัดข้อความ หรือรูปภาพให้อยู่กลางบรรทัด แต่คำสั่งนี้ ใช้ไม่ได้กับทุก Browser ต้องตรวจสอบให้ดีนะครับ การจัดรูปแบบตัวอักษร มีคำสั่งที่ต้องใช้ดังนี้- Bold / Italic คำสั่ง <B> , </B> ให้แสดงตัวเข้ม <I> , </I> ให้แสดงตัวเอียง- Blink ใช้ให้แสดงตัวอักษรแบบกระพริบ <Blink> , </Blink>- Underline ขีดเส้นใต้ข้อความใช้ <U> , </U>- TypeWriter Text คือลักษณะตัวอักษรแบบพิมพ์ดีด มีความกว้างแต่ละตัวเท่ากันหมด <TT> , </TT>- SuperScript/SubScript เป็นการแสดงตัวอักษรแบบ ยกขึ้น และ ห้อยลง ตามลำดับ รูปแบบคือ <Sup> , </Sup> และ <Sub> , <Sub>- Strike เป็นการให้แสดงเส้นตรงขีดทับข้อความ คำสั่งคือ <Strike> , </Strike> ตัวอักษร การกำหนดขนาดและสีของตัวอักษร- <Font Size=n> , </Font> โดย m มีค่าตั้งแต่ 1-7 และ 1 = เล็กสุด , 7 = ใหญ่สุด- <Font Size=+-n> , </Font> เหมือนคำสั่งแรกแต่จะเปรียบเทียบกับขนาดอักษรที่กำลังแสดงขณะนั้นว่าจะ ให้มีขนาดมากกว่า หรือน้อยกว่าด้วยค่าเท่าใด การกำหนดสีของตัวอักษร- <Font Color=สี> , </Font> ค่าสีจะเป็นเลขฐาน 16 และต้องนำหน้าด้วย # เช่น <Font Color=#FFFFFF> คือการกำหนดให้ตัวอักษรมีสีขาว IE สามารถระบุเป็นตัวอักษรได้ เช่น <Font Color= white> แต่ NC ไม่รู้ เลยใส่เป็นฐาน 16 จะใช้ได้ทั้ง 2 Browser - ดูค่าของแต่ละสีในรูปแบบเลขฐาน 16 ตามเอกสารที่แนบมาด้วย การแสดงผลแบบรายการ(List) แบ่งออกเป็น1. Unorder Lists ใช้คำสั่ง <UL> เป็นการแสดงข้อความแยกเป็นบรรทัด ๆ ด้วยจุด "." มี Option ประกอบเช่น - <UL Type=Disc> เป็นการให้แสดงแบบจุดเป็นสีดำ (ปรกติ) - <UL Type=Circle> เป็นการให้แสดงเป็นสีเหลืองกลม - <UL Type=Square> เป็นการให้แสดงเป็นสีทึบแบบสี่เหลี่ยม2. Order Lists ใช้คำสั่ง <OL> เหมือน <UL> แต่จะแทน "." ด้วย ตัวเลข มี Option ประกอบเช่น - <OL Type=A> ผลคือแสดงรายการเป็น A,B,C,D,...... - <OL Type=a> ผลคือแสดงรายการเป็น a,b,c,d,...... - <OL Type=I> ผลคือแสดงรายการเป็น I,II,III,IV,...... - <OL Type=i> ผลคือแสดงรายการเป็น i,ii,iii,iv,...... - <OL Type=1> ผลคือแสดงรายการเป็น 1,2,3,4,......3. Menu Lists ใช้คำสั่ง <Menu> เหมือนคำสั่ง Order Lists แต่ข้อความต้องยาวไม่เกิน 1 บรรรทัด การแสดงผลแล้วแต่ว่าเป็น Browser ชนิดใด4. Directory Lists ใช้คำสั่ง <Dir> เหมือนคำสั่ง <Menu> แต่ใช้ได้เฉพาะข้อความสั้น ๆ ไม่เกิน 20 ตัว การแสดงผลแล้วแต่ว่าเป็น Browser ชนิดใด- คำสั่งช่วยงานสำหรับการแสดงผลแบบ Lists เราอาจใช้ <BR> มาช่วยแยกบรรทัดหรืออาจใช้ <LI> ก็ได้ ส่วน <LH> ใช้กำหนด Header ให้กับ Listsตัวอย่างการใช้งาน<UL><LH> ข้อความส่วนหัว </LH><LI> เนื้อหา 1<LI> เนื้อหา 2<LI> เนื้อหา 3</UL>ผลลัพธ์จะได้ ข้อความส่วนหัว - เนื้อหา 1
- เนื้อหา 2
- เนื้อหา 3
ถ้าเปลี่ยนจาก <UL> เป็น <OL> จะได้ดังนี้ ข้อความส่วนหัว - เนื้อหา 1
- เนื้อหา 2
- เนื้อหา 3
คำสั่งพิเศษ- Skip เช่น <LI Skip=n> ใช้ข้ามการเรียงลำดับตัวเลขในรายการ เช่นต้องการจะเพิ่มตัวเลขทีละ 3 ก็ให้ n เป็น 3- Start เช่น <OL Type=a Start=5> คือให้เรียงรายการโดยให้เริ่มค่าแรกด้วย 5 แทนที่จะเป็น a- Value เช่น <LI Value=n> ใช้ระบุลงไปเลยว่าต้องการให้รายการนั้นเป็นตัวเลขอะไร เช่น <LI Value=8> การสร้าง Link คือการเชื่มโยงไปยังเอกสารอื่น หรือภายในหน้าเดียวกัน ใช้คำสั่ง <A> , </A> โดยมี Href="...." ด้วย- การลิ้งไปคนละหน้าเอกสาร เช่น <A Href="Main2.htm">ไปหน้า 2</A>- การลิ้งไปยังส่วนอื่นถายในหน้าเดียวกัน จะใช้ Label มาช่วย คือจะกำหนดชื่อให้กับตำแหน่งที่ต้องการจะลิ้ง ไปโดยนำ Option "Name" มาใช้ร่วมกับ <A> เช่นส่วนที่ 1 <UL> <LI>Click<A Href="#L1">Here</A>For ThaiLink พอคลิ๊กที่นี่จะกระโดดไปส่วนที่ 2 <LI>Click<A Href="#L2">Here</A>For Add Url พอคลิ๊กที่นี่จะกระโดดไปส่วนที่ 3 </UL>ส่วนที่ 2 <A Name="L1">Thailink</A> : : :ส่วนที่ 3 <A Name="L2">Add Url</A> : : : การลิ้งไปยังส่วนใด ๆ ในไฟล์อื่น- ถ้าจะลิ้งไปยังส่วนใด ๆ ในไฟล์อื่นจะต้องระบุชื่อ Name ของส่วนนั้นพร้อมทั้งชื่อเอกสารลงไปด้วย และ อย่าลืมตั้งชื่อ Label ให้กับส่วนของเอกสารนั้น ๆ ด้วย เช่น ส่วนที่ 1 เก็บไว้ในไฟล์ index.htmส่วนที่ 2 เก็บไว้ในไฟล์ Link1.htmไฟล์ index.htm มีส่วนประกอบดังนี้<UL><LI>Click<A Href="Link1.htm#L1">Here</A>for ThaiLink : :</UL> ไฟล์ Link1.htm มีส่วนประกอบดังนี้<A Href="L1">Thailink</A> : : การลิ้งไปยังบริการอื่น ๆ บน Internet- การลิ้งไป Ftp เช่น <A Href="ftp://ftp4.netscape.com/pub/smart/smior2.zip">Netscape Smartmarks</A> ถ้าจำเป็นต้องระบุ User และ Password ก็ให้กำหนดดังนี้ เช่น <A Href="ftp://username:password@ftp.mysite.com/directory-path">Click Here</A>- การลิ้งไปยัง Gophers เช่น <A Href="gopher.stolaf.edu:70/00/Internet%20Resources/Us-state">Gopher Report- การลิ้งไปยัง UseNet เช่น <A Href="news:alt.fan.dare-barry" UseNet Link</A>- การลิ้งไปยัง E-Mail เช่น <A Href="mailto:jaewjing@hotmail.com>ส่งจดหมายถึง Webmaster Click</A> การใส่รูปภาพ ใช้คำสั่ง <IMG SRC="ชื่อไฟล์รูปภาพ"> มี Option ช่วยงานต่าง ๆ ดังนี้- Width=n เป็นการกำหนดความกว้างของรูปภาพ เช่น <IMG SRC="Logo.gif" Width=300>- Height=n เป็นการกำหนดความสูงของรูปภาพ เช่น <IMG SRC="Logo.gif" Height=200> หรือถ้าต้องการกำหนดทั้งความกว้างและความสูงใช้ <IMG SRC="Logo.gif" Width=300 Height=200>- Alt="คำอธิบาย" เช่น <IMG SRC="Logo.gif" Alt="Thailink"> เป็นคำสั่งที่ใช้อธิบายว่ารูปภาพนี้ชื่ออะไร หรือลิ้งไปที่ใด มีประโยชน์มากเมื่อผู้ใช้กำหนดไม่ให้แสดงรูป หรือใช้ Browser ที่แสดงเฉพาะ Text การวางตำแหน่งรูปภาพ (Align)เป็นพารามิเตอร์ที่ใช้กำหนดให้คำหรือข้อความใรูปภาพ หรือตัวรูปภาพเองวางอยู่ใน- Align=Left จะวางไว้ด้านซ้ายเอกสาร ส่วน Text ที่ตามมาจะถูกจัดให้อยู่รอบ ๆ ทางด้านขวา,บนและล่างรูปภาพ- Align=Right จะวางไว้ด้านขวาเอกสาร ส่วน Text ที่ตามมาจะถูกจัดให้อยู่รอบ ๆ ทางด้านซ้าย,บนและล่างรูปภาพ- Align=Top - Align=Middle - Align=Bottom การกำหนดระยะห่างระหว่างแนวตั้งและแนวนอน- VSPACE=n เป็นการกำหนดระยะห่างในแนวตั้ง- HSPACE=n เป็นการกำหนดระยะห่างในแนวนอน การกำหนดกรอบให้รูปภาพ- ใช้คำสั่ง Border=n ถ้าให้ n = 0 จะไม่มีการแสดงกรอบ การกำหนดรูปภาพให้เป็น Link- จะใช้คำสั่ง <A Href="..."> คู่กับ <IMG SRC="..."> เช่น <A Href="main.htm"><IMG SRC="logo.gif"></A> ซึ่งรูปนั้นจะมีเส้นกรอบทันทีถ้าไม่ต้องการให้แสดง กรอบก็ให้ใส่ border=0 ด้วย การใช้สีตกแต่งเอกสารการกำหนดสีให้กับข้อความทั้งเอกสาร- ปรกติข้อความบนเอกสารจะเป็นค่า default แต่เราสามารถปรับแต่งได้ตามต้องการโดยใช้ tag <Body> ช่วย เช่น <body text=#FF0000> เป็นการกำหนดสีให้ข้อความทั้งหมดที่เป็น Text ให้มีสีแดงยกเว้น Link- กำหนดสีให้กับ Text ที่เป็นลิ้ง เช่น <body Link="สี">- กำหนดสีให้ลิ้งที่เราไปดูมาแล้ว เช่น <body VLink="สี">- กำหนดสีให้ลิ้งที่กำลังใช้งานอยู่ (Active) เช่น <body ALink = "สี"> ซึ่งทุก option สามารถเขียนรวมกันอยู่ใน tag <body> เดียวได้ เช่น <body text=#FF0000 Link=#FFFFFF VLink=#000000 ALink=#F5F5DC> เป็นต้น- ใน Internet Explore สามารถระบุเป็นข้อความสีได้เช่น <body text=red> แต่ Nestcape ไม่รู้จักจึงควรใช้ แบบเลขฐาน 16 จะดีกว่า- เมื่อเปลี่ยนสีทั้งข้อความแล้ว ในกรณีที่ต้องการให้บางข้อความเป็นสีอื่น ทำได้ดังนี้ เช่น <Font Color=#FF0000>ข้อความ</Font>- การกำหนดสีให้กับ Background จะใช้คำสั่ง Bgcolor เช่น <body Bgcolor=#F5F5DC> เป็นต้น- การกำหนดรูปภาพให้กับ Background จะใช้คำสั่ง เช่น <body Background=bkg.gif> ตารางคำสั่งต่างๆ - <TABLE> , </TABLE> ใช้สำหรับเริ่มต้นสร้างและจบตาราง- <TABLE BORDER=n> , </TABLE> ใช้เมื่อต้องการระบุขนาดเส้นตาราง- <TR> , </TR> ใช้เริ่มต้นและจบเนื้อหาในแต่ละแถว โดยการใช้ </TR> จะเป็นการขึ้นบรรทัดใหม่ให้ด้วย- <TD> , <TD> ใช้สำหรับการเริ่มใส่ข้อมูลใน Cell ในแต่ละคอลัมน์- <TH> , </TH> ใช้งานเหมือน <TD> และ </TD> แต่ตัวอักษรจะเป็นตัวเข้มจึงเหมาะที่จะทำเป็นหัวข้อของตาราง<CELLPADDING=n> กำหนดระยะห่างระหว่างเส้นและเนื้อหาภายใน Cell<CELLSPACING=n> กำหนดระยะห่างระหว่างคอลัมน์<COLSTART=n> กำหนดให้เริ่มใส่ข้อมูลลงในคอลัมน์ที่เท่าใด<WIDTH=n> ใช้กำหนดความกว้างของเซล์ใด ๆ<COLSPAN=n> ใช้กำหนดให้คอลัมน์จำนวน ท คอลัมน์ รวมกันเป็น 1 คอลัมน์<ROWSPAN=n> ใช้กำหนดให้แถวจำนวน n แถว รวมกันเป็น 1 แถว<CAPTION> , </CAPTION>ใช้กำหนดคำอธิบายให้ตาราง การจัดข้อมูลในตาราง-แนวนอน ได้แก่ Left , Right , Center- แนวตั้ง ได้แก่ Top , Bottom , Middle- จะใช้ตัวเลือก Align สำหรับในแนวนอน- จะใช้ตัวเลือก VAlign สำหรับในแนวตั้ง เช่น <TR ALIGN=RIGHT VALIGN=TOP> การกำหนดสีใน Cellตัวอย่างการใช้งาน <TABLE BORDERCOLOR=#F5F5DC BGCOLOR=#FFFFFF> FRAMEคำสั่งในการสร้างเฟรมคือ <FrameSet> และ </FrameSet> เป็นคำสั่งที่ใช้แบ่งเอกสารออกเป็นส่วน ๆ ทั้งแนวตั้งและแนวนอน เช่น- <FrameSet Rows="50,*"> หมายถึงให้แบ่งจอภาพออกเป็น ส่วน บน-ล่าง โดยส่วนบนสูง 50 pixel ส่วนล่างจะใช้ที่เหลือทั้งหมดของจอภาพ- <FrameSet Cols="70,80,*"> เป็นการแบ่งเฟรมทางคอลัมน์ โดยให้ส่วนซ้ายกว้าง 70 pixel ส่วนกลางกว้าง 80 pixel ส่วนขวากว้างเท่าเนื้อที่ที่ เหลือทั้งหมด- <FrameSet Rows="40%,*"> เป็นการแบ่งเฟรมทางแถว โดยให้ส่วนล่างกว้าง 40 % ส่วนบนกว้างเท่าที่เหลือทั้งหมด (ในที่นี้คือ 60 %)- <Frame SRC="ชื่อไฟล์หรือรูปภาพ"> ใช้สำหรับใส่ชื่อเอกสารหรือรูปภาพไว้ในส่วนของจอภาพที่แบ่งไว้ ด้วยคำสั่ง <FrameSet> ตัวอย่างการใช้ <FrameSet Rows="50,50,*"> <Frame SRC="file1.htm"> <Frame SRC="file2.htm"> <Frame SRC="file3.htm"> </FrameSet>- </Noframes> , </Noframes> ใช้ป้องกันในกรณี Browser นั้นไม่ Support Frame จะทำให้เขาดูไม่ได้จะเป็น หน้าจอว่าง ๆ จึงควรมี tag นี้ ตัวอย่างการใช้ <HTML> <Noframes> <body bgcolor=#FFFFFF> Browser ของคุณไม่สามารถอ่านเฟรมได้ โปรด<A Href="main.htm">คลิ๊กที่นี่</A>เพื่อไม่ใช้เฟรม </body> </noframe> <FrameSet Rows="50,50,*"> <Frame SRC="file1.htm"> <Frame SRC="file2.htm"> <Frame SRC="file3.htm"> </FrameSet> </HTML> การแบ่ง Frame ทั้งทางคอลัมน์และแถว- จะใช้คำสั่ง <FrameSet> มาซ้อนกัน เช่น <HTML> <FrameSet Cols="30%,*"> <FrameSet Rows="30%,*70%> <Frame SRC="Top.htm"> <Frame SRC="Bottom.htm"> </FrameSet> <FrameSet Rows="33%,33%,*"> <Frame SRC="1.jpg"> <Frame SRC="2.jpg"> <Frame SRC="3.jpg" </FrameSet> </FrameSet> </HTML>- การนำตัวเลือก "Name" มาใช้เพื่อตั้งชื่อให้กับส่วนของเฟรมนี้ มีประโยชน์ในกรณีที่ตั้งชื่อให้กับส่วนของเฟรม มีประโยชน์ กรณีที่ต้องการเรียกใช้ Frame นี้ในการลิ้งและแสดงผลลัพธ์ลงในเฟรม ดังตัวอย่าง<HTML><FrameSet Cols="20,*"> <Frame Src="top.htm"> <Frame Src="bottom.htm" Name=main></FrameSet></HTML>--------------------------------------------------------------------------------------------------------------------สมมุติในไฟล์ TOP.HTM มีเนื้อหาดังนี้<body><a href="ok1.htm" target=main>Go To Ok1</A><a href="ok2.htm" target=main>Go To Ok2</A>--------------------------------------------------------------------------------------------------------------------สมมุติเนื้อหาในไฟล์ Bottom.htm มีดังนี้<body bgcolor=#FFFFFF><img src="logo.gif"></body>--------------------------------------------------------------------------------------------------------------------ผลเมื่อคลิ๊กที่ Link ใดก็ตามผลลัพธ์ที่จะปรากฏแสดงที่ส่วนของ Frame ที่ชื่อ Main เสมอOption ของคำสั่ง Frame- FrameBorder=n จะแสดงกรอบของเฟรมความกว้างตามค่าของ n ถ้าให้ n=0 จะไม่มีกรอบ- Scrolling = Yes/No ถ้าเลือก yes มันจะแสดง ScrollBar - MarginWidth=n ใช้กำหนดระยะห่างด้านซ้ายและขวาของเฟรม- MarginHeight=n ใช้กำหนดระยะห่างด้านบนและล่างของเฟรม- NoResize ใช้กำหนดว่าไม่ให้มีการปรับเปลี่ยนขนาดของเฟรม -------------------------------------------------------------------------------------------------------------------- FORM (ฟอร์ม)คำสั่ง <Form> , </Form> เป็นลักษณะของแบบสอบถามหรือให้ผู้ใช้กรอกข้อมูลต่าง ๆ มีคำสั่งที่เกี่ยวข้องดังนี้- TextArea เป็นรูปแบบการเขียนแบบอิสระ (Free Form) คือให้ผู้ใช้ป้อนข้อมูลลงไปในบริเวณที่เรากำหนดไว้ โดยความกว้างเป็นจำนวนคอลัมน์ และความสูงเป็นจำนวนแถว รูปแบบการใช้งานเป็นดังนี้ <TextArea Name="name"></TextArea> ค่า Name คือชื่อพื้นที่ที่เรากำหนด- <Select> , </Select> เป็นการแสดงตัวเลือกทั้งหมดมาให้ผู้ใช้เลือกตัวอย่างการใช้งาน---------------------------------------------------------------------------------------------------------------------ผลการทำงานจะแสดงตัวเลือกเพียงตัวเลือกเดียวมาให้ผู้ใช้เลือก คือจะแสดงเพียงตัวเลือกเดียว แต่ถ้าต้องการเลือกตัวเลือกอื่นให้ click ที่ลูกศรลง- ถ้าเป็นแบบ Multiple จะแสดงตัวเลือกทั้งหมดที่มีมาให้เลย เช่น จากตัวอย่างข้างบนให้แก้ตรง<Select Name="Problem Area"> เป็น <Select Name="Problem Area" multiple>- ถ้าแสดงทั้งหมดแต่ข้อมูลเรามีมากอาจยาวเกินไป เราสามารถจำกัดให้แสดงแค่คราวละกี่แถวก็ได้ โดยดารใส่ Size=n มาใน tag Select INPUTเป็นส่วนที่ใช้ป้อนข้อมูลภายใน 1 บรรทัด แต่กำหนดความยาวของกรอบและความยาวสูงสุดของข้อมูลที่ป้อนไว้ได้ด้วย โดยการใช้คำสั่ง Input ร่วมกับตัวเลือกต่าง ๆ ดังนี้- Type ใช้กำหนดชนิดของข้อมูลที่จะป้อน ซึ่งมีหลายแบบได้แก่ - Text คือข้อมูลทั่วไป - Password คือรหัสผ่านซึ่งจะแสดงเป็น * - Radio Button คือเป็นวงกลมตัวเลือก เลือกได้เพียงหัวข้อเดียวเท่านั้น - CheckBox เป็นตัวเลือกรูปสี่เหลี่ยม สามารถเลือกหลายตัวเลือกได้ - Reset สำหรับใช้ยกเลิกข้อมูลที่ป้อนมาทั้งหมดทิ้งไป - Submit สำหรับส่งข้อมูลที่ป้อนไว้ทั้งหมดไปให้กับผู้สร้างแบบสอบถาม - IMAPE คล้าย Submit แต่เป็นปุ่มรูปภาพแทน- Size ใช้กำหนดความยาวของช่องที่ใช้ป้อนข้อมูล- MaxLength ใช้กำหนดจำนวนสูงสุดของตัวอักษรที่จะป้อนลงในช่อง - Value กำหนดค่าเริ่มต้นไว้ส่วนหน้าในช่องเติมข้อมูล- Checked กำหนดให้มีการเลือกตัวเลือกไว้ล่วงหน้า (สำหรับในชนิด CheckBox และ RadioButton)---------------------------------------------------------------------------------------------------------------------ตัวอย่างการใช้งาน ---------------------------------------------------------------------------------------------------------------------ตัวอย่างการใช้งาน---------------------------------------------------------------------------------------------------------------------ตัวอย่าง----------------------------------------------------------------------------------------------------------------------ตัวอย่าง-----------------------------------------------------------------------------------------------------------------------คำสั่ง Form กับการใช้งานจริงจะใช้ตัวเลือกต่อไปนี้ร่วมกับคำสั่ง <Form> คือ- Action ใช้ระบุ URL ของ CGI Script ที่เรียกมาใช้งานพร้อมทั้งชื่อ Script ที่ Server เรียก มาใช้งานเพื่อใช้ในการประมวลผลข้อมูลที่ผู้ใช้ป้อนเข้ามาที่อยู่ใน Form เป็นโปรแกรม ที่อยู่ที่เครื่อง Server- EncType ใช้สำหรับเข้ารหัสเพื่อรักษาความลับของข้อมูล โดยระบุเป็น MIME Type- Method=Get หรือ Post ใช้บอก Browser ว่าจะส่งข้อมูลไปที่ Server ด้วยวิธีใดกำหนดได้ 2 แบบคือ - Get เป็นการนำข้อมูลไปต่อท้ายสุด แล้วประมวลผลทีเดียว - Post จะนำข้อมูลส่งไปที่ Server แยกกันไปเป็นแต่ละ Transaction ------------------------------------------------------------------------------------------------------------------------ตัวอย่าง-------------------------------------------------------------------------------------------------------
|