HTML3

Week 3 - HTML 3 Frame Form HTML3

เนื้อหา • การแบ่งพื้นที่ของจอภาพ • Attribute ที่เกี่ยวข้องกับเฟรม • การเชื่อมโยงระหว่างเฟรม • Inline Frame • การตั้งชื่อให้กับ Control • Control ต่างๆ

การแบ่งพื้นที่ของจอภาพการแบ่งพื้นที่ของจอภาพ ในระยะแรกที่มีในการใช้งานเว็บเพจ เราจะพบว่าการทำงานทุกอย่างจะอยู่บนจอภาพเพียงจอเดียวเท่านั้น แต่มาตอนนี้เมื่อเราเข้าไปค้นหาข้อมูลในเว็บเพจต่างๆ ในปัจจุบัน เราก็จะเห็นได้ว่าหลายเว็บเพจๆ จะปรากฎมีการแบ่งส่วนบนจอภาพออกเป็นส่วนๆ โดยที่แต่ละส่วนต่างก็มีข้อมูลแยกแตกต่างกันไป ซึ่งเราจะเรียกการแบ่งหน้าจอภาพออกเป็นส่วนๆ ว่า เฟรม (FRAME) เฟรมนับได้ว่าเป็นรูปแบบการจัดพื้นที่การใช้งานบนหน้าจอใหม่ โดยพื้นที่ในแต่ละส่วนนั้นจะมีข้อมูลแยกเป็นของตัวเอง โดยที่จะมีเนื้อหาที่เกี่ยวข้องกันหรือไม่เกี่ยวข้องกันก็ได้ ขึ้นอยู่กับการออกแบบเพื่อให้ใช้งานแตกต่างกันไป

การแบ่งพื้นที่ของจอภาพการแบ่งพื้นที่ของจอภาพ การแบ่งจอภาพออกเป็นส่วนๆ สามารถนำพื้นที่ทั้งหมดของจอภาพให้ถูกใช้งานอย่างเต็มที่ ทั้งนี้เพราะในการใช้เฟรมจะมีการเรียกไฟล์ HTML ขึ้นมาพร้อมๆ กันหลายไฟล์ ทำให้ประหยัดเวลาในการค้นหาข้อมูล หลักการในการแบ่งเฟรม จะมี file ที่เกี่ยวข้อง คือ 1. File ที่เป็นเฟรมควบคุม (Frame Control) ทำหน้าที่ในการแบ่งหน้าจอออกเป็นส่วนต่างๆ ตามที่กำหนด 2.File ที่จะนำข้อมูลมาแสดงในเฟรมต่างๆ ที่ได้แบ่งมา

การแบ่งพื้นที่ของจอภาพการแบ่งพื้นที่ของจอภาพ คำสั่งในการแบ่งจอภาพสำหรับ file เฟรมควบคุม <HTML> <FRAMESET> </FRAMESET> </HTML> จะเห็นได้ว่าในการกำหนดการแบ่งหน้าจอภาพนั้นจะกำหนดคำสั่ง <FRAMESET>.........</FRAMESET> แทนที่คำสั่ง <BODY>.........</BODY> เพื่อเป็นตัวกำหนดการแสดงผลในโปรแกรมเว็บบราวเซอร์

การแบ่งพื้นที่ของจอภาพการแบ่งพื้นที่ของจอภาพ <FRAMESET>จะเป็น Tag ที่ใช้สำหรับการแบ่งหน้าจอออกเป็นแต่ละส่วน ซึ่งจะสามารถแบ่งหน้าจอออกได้เป็น 2 แนวคือ 1. แนวนอน (Rows) 2. แนวตั้ง (Cols) <FRAME>จะเป็น Tag ที่ใช้สำหรับการแสดง file ที่จะมาอยู่ในเฟรมที่ถูกแบ่งออกมา

การแบ่งพื้นที่ของจอภาพการแบ่งพื้นที่ของจอภาพ การแบ่งพื้นที่ของจอภาพตามแนวนอน <FRAMESET ROWS="พิกเซล/เปอร์เซ็นต์/*"> <FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL"> <FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL"></FRAMESET> ผลลัพธ์ที่ได้คือ หน้าจอถูกแบ่งออกเป็นส่วนบนและส่วนล่าง

การแบ่งพื้นที่ของจอภาพการแบ่งพื้นที่ของจอภาพ การแบ่งพื้นที่ของจอภาพตามแนวตั้ง <FRAMESET COLS="พิกเซล/เปอร์เซ็นต์/*"> <FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL"> <FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL"></FRAMESET> ผลลัพธ์ที่ได้คือ หน้าจอถูกแบ่งออกเป็นส่วนซ้ายและส่วนขวา

การแบ่งพื้นที่ของจอภาพการแบ่งพื้นที่ของจอภาพ ตัวอย่างการแบ่ง Frame แบบผสม <FRAMESET COLS=“20%,*” <FRAME SRC=“a.html”> <FRAMESET ROWS=“100,*”> <FRAME SRC=“b.html”> <FRAME SRC=“c.html”> </FRAMESET> </FRAMESET>

การแบ่งพื้นที่ของจอภาพการแบ่งพื้นที่ของจอภาพ • สรุปการแบ่ง Frame • การใช้ระบบ Frame จะต้องมีการสร้าง file ขึ้นมาหนึ่ง file ก่อน เรียก fileนั้นว่า Frame Control ซึ่งจะเป็น file ที่มี Tag <FRAMESET> , <FRAME> อยู่ข้างใน ใช้สำหรับการสร้าง Frame และแบ่งขนาดของหน้าจอ • จากนั้นจะต้องมี File ย่อยๆ ซึ่งอาจจะเป็นเอกสาร HTML หรือ รูปภาพก็ได้ ที่จะนำมาแสดงใน Frame ย่อยแต่ละ Frame เช่น ถ้าเราแบ่ง Frame ออกเป็น 3 ส่วน เราจะมี file ที่เกี่ยวข้องทั้งหมด 4 file คือ Frame Control 1 file และ file ที่จะนำมาแสดงใน frame ที่แบ่งอีก 3 file • การแบ่ง Frame ต้องดูว่าแบ่งตามแนวใดก่อนเป็นอันดับแรก จากนั้นก็ค่อยๆ แบ่งต่อไปเรื่อยๆ

การแบ่งพื้นที่ของจอภาพการแบ่งพื้นที่ของจอภาพ • สรุปการแบ่ง Frame • ถ้าต้องการจะตัดส่วนของ Frame ให้ใช้ Attribute ROWS หรือ COLS ที่ <FRAMESET> • ระหว่าง ROWS หรือ COLS ต้องขั้นด้วยเครื่องหมาย “ , ” เพื่อเป็นการบอกให้รู้ว่าจะมีการแบ่ง Frame แล้ว • คำสั่ง <FRAME SRC> เป็นตัวกำหนดให้แสดงผลไฟล์ HTML หรือรูปภาพ โดยที่ SRC=“ที่อยู่ของ HTML Document หรือ ที่อยู่ของรูปภาพ” ถ้าหากว่าอ้างผิด หรือไม่มีข้อมูลอยู่จริงก็จะไม่มีการแสดงผลลัพธ์ใน Frame นั้นๆ

Attribute ที่เกี่ยวข้องกับเฟรม Attribute ที่ใส่ <FRAMESET> Frameborderจะมีค่าเป็น Yes / No เป็นการกำหนดว่าจะให้เฟรมมีเส้นขอบหรือไม่ Border จะมีค่าเป็นตัวเลข จะเป็นการกำหนดขนาดของเส้นขอบเฟรม Bordercolor กำหนดสีให้กับเส้นขอบ Attribute ที่ใส่ <FRAME> Scrolling จะเป็นการกำหนด Scrollbar ให้กับเฟรม ซึ่งจะมีค่าได้เป็น Yes/No/Auto Noresizeเป็นการกำหนดว่าไม่ให้เฟรมนี้เปลี่ยนแปลงขนาดได้

การเชื่อมโยง(link) ระหว่างเฟรม • ต้องมีการระบุ NAME=“ชื่อของเฟรม” ไว้ใน <FRAME> ก่อนตอนที่สร้าง Frame • ใส่ TARGET="window name“ ตอนที่จะทำการ LINK ด้วย Tag <A> • ให้ระบุชื่อวินโดว์หรือเฟรม (ที่กำหนดด้วยค่า NAME) ที่ต้องการให้ทำหน้าที่แสดงเว็บเพจปลายทางจากการลิงค์ หากไม่พบวินโดว์หรือเฟรมชื่อดังกล่าว (เพราะไม่ได้ สร้างเตรียมไว้) เว็บบราวเซอร์จะสร้างวินโดว์ขึ้นมาใหม่เอง โดยมีชื่อตามที่ระบุ เพื่อให้วินโดว์ใหม่นั้นทำหน้าที่แสดงเว็บเพจปลายทางที่ได้จากการลิงค์แทน

การแสดงเฟรมแบบ INLINE • โดยปกติแล้วกำหนดเฟรมนั้นเราจะกำหนดอยู่ในส่วนของ <HEAD>......</HEAD> แต่เราสามารถนำเฟรมมาแสดงในเว็บเพจโดยไม่ต้องทำการแบ่งพื้นที่หน้าจอ ออกเป็นส่วน ๆ ทั้งนี้เฟรมจะแสดงผลร่วมกับข้อความต่าง ๆ ในเว็บเพจ (INLINE หรือ INFLOW) เสมือนเป็นภาพการฟิกภาพหนึ่ง แต่สามารถใช้งานได้เช่นเดียว กับเว็บเพจทั่วไป • ไม่ต้องมีการสร้าง Frame Control หรือ file ที่ใช้ในการแบ่ง Frame มาก่อนด้วยและสามารถจัดการงานได้ง่ายการซึ่งปัจจุบันในการสร้างเว็ปเพจนิยม ใช้แบบนี้กันมากยิ่งขึ้น

การแสดงเฟรมแบบ INLINE รูปแบบการใช้งานคือ <BODY><IFRAME SRC="ชื่อไฟล์เอกสาร HTML หรือ URL" WIDTH=“Pixel/Percent" HEIGHT="Pixel/Percent" ALING="LEFT/CENTER/RIGHT" > </BODY>

การสร้างฟอร์ม โดยทั่วไปบนอินเทอร์เน็ต เรามักจะพบแบบฟอร์มสอบถามแบบต่างๆ ไม่ว่าจะเป็นแบบฟอร์มสั่งซื้อของ แบบฟอร์มการจ่ายเงิน เมื่อซื้อสินค้า หรือแบบฟอร์มการสอบถามความคิดเห็น การลงทะเบียนเข้าเว็บเพจ เพื่อค้นหาข้อมูลในเว็บเพจนั้น รวมถึงแบบฟอร์มสมุดผู้เข้าเยี่ยมชมเว็บเพจต่างๆ โดยทั้วไปแบบฟอร์ม จะมีการเติมข้อความลงในช่องที่กำหนดไว้ หรือการเลือกตัวเลือกในหัวข้อต่างๆ สิ่งเหล่านี้เราจะเรียกว่า ฟอร์ม (FORM) รูปแบบฟอร์มสอบถามนั้น จะมีลักษณะการจัดเรียงข้อมูลอย่างเป็นระเบียบ ซึ่งสามารถทำให้ผู้ใช้โต้ตอบกับตัวเว็บเพจได้ (interactive)

การสร้างฟอร์ม • ประเภทของคำสั่งในการสร้างขอบเขตของแบบฟอร์มสอบถาม หรือ อาจจะเรียกองค์ประกอบเหล่านี้ว่า Control ซึ่งสามารถแบ่งออกเป็น 3 ประเภท • <INPUT> เป็นคำสั่งที่ใช้ในการสร้างกรอบป้อนข้อความบรรทัดเดียว ปุ่มแบบวิทยุ (Radio button) ช่องทำเครื่องหมาย (Check box) ปุ่มยืนยันข้อมูลที่ป้อน (Submit button) ปุ่มยกเลิกข้อมูลที่ป้อน (Reset button) • <TEXTAREA> เป็นคำสั่งที่ใช้สำหรับกรอบป้อนข้อมูล สามารถป้อนข้อมูลได้หลายฃบรรทัด • <SELECT>เป็นคำสั่งที่ใช้สำหรับสร้างตัวเลือกที่อยู่ในกรอบตัวเลือก

การกำหนด NAME ให้กับ Control ในการสร้าง Control แต่ละตัวนั้น เราจำเป็นที่จะต้องกำหนด Name หรือ ชื่อที่ใช้สำหรับการเรียก Control ตัวนั้นๆ เพื่อที่จะได้นำไปใช้งานในการเขียนโปรแกรมต่อไปได้ เวลาที่โปรแกรมทำงานและจะต้องการอ้างอิงข้อมูลใน Control ก็จะอ้างอิงชื่อ NAME จาก Control ต่างๆ ที่กำหนดขึ้นมา ในการทำงานจะใช้ Attribute NAME=”ชื่อของ Control” ใส่เพิ่มเข้าไปใน Control นั้น

คำสั่งในการสร้างแบบฟอร์มคำสั่งในการสร้างแบบฟอร์ม • <FORM METHOD="POST/GET" ACTION="URL" >..........</FORM> • METHOD เป็นรูปแบบของวิธีในการส่งข้อมูล ซึ่งจะประกอบไปด้วย • GET เป็นตัวรับ - ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร และใช้การส่งค่าของตัวแปร control ต่างๆ ไปกับ URL เช่น www.myweb.com?user=worapat&type=administrator • POST เป็นตัวรับ - ส่ง ข้อมูลไม่จำกัดจาก Server ส่งค่าไปกับฟอร์มเลย • ACTIONคือตำแหน่งหรือ URL ของ CGI Script ,โปรแกรม ที่วางไว้ที่ Server ที่กำหนดใน Domain ต่างๆ แล้วต้องการส่งค่าของ Form ไปทำงานที่ file นั้น หรือใช้ค่า mailto: ก็ได้

การกำหนดกรอบป้อนข้อมูลแบบ TEXT BOX • <INPUT TYPE="TEXT" NAME="ชื่อของ Control" SIZE="ค่าตัวเลข" MAXLENGTH="ค่าตัวเลข"> • SIZE เป็นการกำหนดความกว้างของ Textbox • MAXLENGTH เป็นการกำหนดค่ามากที่สุดที่จะแสดงผลใน Textbox • คำสั่งการแสดงผลนั้นจะมีลักษณะการแสดงผลแบบบรรทัดเดียว เพื่อให้ป้อนข้อมูลที่เป็นเลข หรือตัวอักษร ตัวอย่าง Textbox

การแสดงผลแบบ PASSWORD • คำสั่งการแสดงผลแบบ PASSWORD จะเป็นคำสั่งที่ใช้ในการรักษาความปลอดภัยของข้อมูล โดยการแสดงผลจะเหมือนกับการแสดงผลแบบ TEXTBOX คือจะเป็นคำสั่งที่มีลักษณะการแสดงผลแบบบรรทัดเดียว แต่จะแตกต่างตรงที่การป้อนข้อมูล ถ้าเป็นการแสดงผลแบบ Textbox นั้นจะเป็นตัวอักษร แต่ถ้าเป็นการแสดงผลแบบ PASSWORD จะเป็นดอกจัน (*) • <INPUT TYPE="PASSWORD" NAME="ชื่อของ Control " SIZE="ค่าตัวเลข" MAXLENGTH="ค่าตัวเลข"> • SIZE เป็นการกำหนดความกว้างของ Textbox • MAXLENGTH เป็นการกำหนดค่าที่จะแสดงผล Textbox ตัวอย่าง Textbox ที่เป็น Password

การแสดงผลแบบ RADIO • ในการกำหนดการแสดงผลแบบ RADIO จะแสดงผลตัวเลือกทั้งหมดที่เรากำหนดไว้ โดยจะแสดงช่องทำเครื่องหมายเป็นรูปวงกลม ในการแสดงผลแบบ RADIO จะมีคุณสมบัติอยู่ตัวหนึ่งที่ชื่อว่า CHECKED จะเป็นตัวกำหนดค่าเริ่มต้น มีลักษณะการแสดงผลเป็นการถูกเลือก (คือ ที่ Radio ที่กำหนดจะถูกเลือกไว้แล้ว) ถ้าเราต้องการยกเลิกก็ทำการคลิกที่ช่องอื่น ตัวเลือกก็จะย้ายช่องไป • <INPUT TYPE="RADIO" NAME="ชื่อของ Control " VALUE="ชื่อย่อของข้อมูลที่แสดงผล" CHECKED>

การแสดงผลแบบ RADIO ตัวอย่าง Radio

การแสดงผลแบบ CHECKBOX • ในการกำหนดการแสดงผลแบบ CHECKBOX จะแสดงผลตัวเลือกทั้งหมดที่เรากำหนดไว้ โดยจะแสดงช่องทำเครื่องหมายรูปสี่เหลี่ยมอยู่หน้าตัวเลือก เพื่อให้คลิกตัวเลือกที่ต้องการ • ในการแสดงผลแบบ CHECKBOX จะมีคุณสมบัติอยู่ตัวหนึ่งที่ชื่อว่า CHECKED จะเป็นตัวกำหนดค่ามาตรฐานในการแสดงผลที่มีลักษณะการแสดงผลเป็นเครื่องหมายถูกในช่องสี่เหลี่ยมที่เป็นตัวเลือก (Set Default คือ มีเครื่องหมายถูกมาให้ก่อน) ถ้าเราต้องการยกเลิกก็ทำการคลิกที่ช่องตัวเลือกนั้นเครื่องหมายถูกก็จะหายไป • <INPUT TYPE="CHECKBOX" NAME="ชื่อของ Control " VALUE="ชื่อย่อของข้อมูลที่แสดงผล" CHECKED>

การแสดงผลแบบ CHECKBOX ตัวอย่าง checkbox

ข้อสังเกต การกำหนดค่า VALUE และ NAME ในการแสดงตัวเลือกแบบ CHECKBOX และการแสดงตัวเลือกแบบ RADIO นั้นมีข้อสังเกตได้ว่า ถ้าเป็นการตัวเลือกแบบ CHECKBOX นั้น VALUE จะกำหนดค่าเท่ากันได้ แต่ NAME จะกำหนดค่าต่างกัน ในทางกลับกันการแสดงตัวเลือกแบบ RADIO นั้นจะกำหนดค่า VALUE ให้มีค่าต่างกันส่วนค่าของ NAME นั้นจะกำหนดค่าให้เหมือนกัน

การส่งแบบฟอร์มแบบ SUBMIT คำสั่งนี้จะทำหน้าที่ส่งข้อมูลแบบฟอร์มสอบถาม ไปยังเซอร์ฟเวอร์ของเราเพื่อทำการประมวลผลข้อมูล การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการกำหนดค่าที่จะแสดงบนปุ่มที่ VALUE <INPUT TYPE="SUBMIT" NAME="ชื่อย่อของข้อความ" VALUE="ค่าที่จะแสดงบนปุ่ม"> ตัวอย่างปุ่ม Submit

การส่งแบบฟอร์มแบบ RESET คำสั่งจะทำหน้าที่ในการยกเลิกข้อมูลต่าว ๆ ที่ทำการป้อนลงในแบบฟอร์ม คือ เป็นคำสั่งที่ใช้ในการลบข้อมูลในแบบฟอร์มทั้งหมด เพื่อทำการป้อนข้อมูลลงในแบบฟอร์มใหม่ การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการกำหนดค่าที่จะแสดงบนปุ่มที่ VALUE <INPUT TYPE="RESET" NAME="ชื่อของ Control" VALUE="ค่าที่จะแสดงบนปุ่ม"> ตัวอย่างปุ่ม Reset

<TEXTAREA> การสร้างกรอบป้อนข้อความแบบหลายบรรทัด <TEXTAREA NAME="ชื่อของข้อมูล TEXTAREA" ROWS="ค่าตัวเลข" COLS="ค่าตัวเลข">....ข้อมูลที่ต้องการแสดงผลในกรอบป้อนข้อมูล...... </TEXTAREA> คำสั่งนี้จะเป็นการกำหนดการสร้างกรอบป้อนข้อมูลแบบหลายบรรทัด โดยในที่นี้จะมีคุณสมบัติในการกำหนดความกว้าง และความสูงของกรอบป้อนข้อความคือ ROWS เป็นการกำหนดจำนวนแถวที่ใช้ในการป้อนข้อมูลต่าง ๆ ลงในกรอบป้อนข้อความ COLS เป็นการกำหนดจำนวนคอลัมน์สูงสุดในการป้อนข้อมูลในแต่ละแถว

<TEXTAREA> การสร้างกรอบป้อนข้อความแบบหลายบรรทัด ตัวอย่าง TEXTAREA

<SELECT> การสร้างตัวเลือก รูปแบบ Tag ที่ใช้ คือ <SELECT NAME="ชื่อของข้อมูลที่ต้องการสร้างตัวเลือก " SIZE="ค่าตัวเลข"> <OPTION SELCETED VALUE=ค่าของตัวเลือก">ตัวเลือกที่ต้องการแสดง <OPTION VALUE=ค่าของตัวเลือก">ตัวเลือกที่ต้องการแสดง <OPTION VALUE=ค่าของตัวเลือก">ตัวเลือกที่ต้องการแสดง </SELECT>

<SELECT> การสร้างตัวเลือก • SIZE="ค่าตัวเลข" เป็นการกำหนดการแสดงผลตัวเลือกตามค่าตัวเลขที่ได้ระบุไป ว่าต้องการจะให้เป็น List box ที่แสดงรายการทีละกี่รายการ แต่ถ้าหากไม่กำหนดไว้ก็จะกลายเป็นลักษณะของ Combo box คือ มีตัวเลือกให้ บรรทัดเดียว • <OPTION>…</OPTION> จะเป็นตัวที่ใช้แสดงรายการตัวเลือกของ List นั้น • VALUE เป็น Attribute ที่จะใส่ไว้ใน Option เพื่อที่จะบอกว่า ค่าของ Option ที่เลือกมีค่าอะไร หรือในการเขียนโปรแกรมจะเอาค่านี้ไปใช้งาน

<SELECT> การสร้างตัวเลือก ตัวอย่างของ <SELECT> ทั้งสองแบบ แบบที่เป็น Combo Box แบบที่เป็น List Box

HTML3

HTML3

Presentation Transcript