1 / 28

HTML [#4]

HTML [#4]. ออกแบบ Form รับค่า แบ่งช่องการแสดงใน Browser ด้วย Frameset การใช้ iFrame เพื่อแบ่งส่วนการแสดงในเพจ. การสร้างฟอร์ม (FORM). เรามักจะพบแบบฟอร์มสอบถามแบบต่างๆ ตัวอย่างเช่น แบบฟอร์มสั่งซื้อของ แบบฟอร์มการจ่ายเงิน เมื่อซื้อสินค้า แบบฟอร์มการสอบถามความคิดเห็น

donkor
Download Presentation

HTML [#4]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML [#4] ออกแบบ Form รับค่า แบ่งช่องการแสดงใน Browser ด้วย Frameset การใช้ iFrame เพื่อแบ่งส่วนการแสดงในเพจ

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

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

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

  5. การกำหนดกรอบป้อนข้อมูลแบบ TEXT BOX <FORM><INPUT TYPE="TEXT" NAME="ชื่อย่อของข้อความ" SIZE="ค่าตัวเลข” MAXLENGTH="ค่าตัวเลข"></FORM> • SIZE เป็นการกำหนดความกว้างของ Textbox • MAXLENGTH เป็นการกำหนดค่าที่จะแสดงผล Textbox • คำสั่งการแสดงผลนั้นจะมีลักษณะการแสดงผลแบบบรรทัดเดียว • เพื่อให้ป้อนข้อมูลที่เป็นเลข หรือตัวอักษร Example: ชื่อ <Input Type="text" Name="firstname" size="15" maxlength="10">

  6. การสร้างกรอบป้อนข้อความแบบหลายบรรทัด <FORM><TEXTAREA NAME="ชื่อของข้อมูล" ROWS="ค่าตัวเลข“ COLS="ค่าตัวเลข">....ข้อมูลที่ต้องการแสดงผลในกรอบป้อนข้อมูล...... </TEXTAREA> </FORM> • ROWS เป็นการกำหนดจำนวนแถวที่ใช้ในการป้อนข้อมูลต่าง ๆ ลงในกรอบป้อนข้อความ • COLS เป็นการกำหนดจำนวนคอลัมน์สูงสุดในการป้อนข้อมูลในแต่ละแถว • ซึ่งจำนวนคอลัมน์ที่เหมาะสมที่สุดจะมีค่าตัวเลขเท่ากับ 80 Characters Example: ที่อยู่ <Textarea name="address" rows="5" cols="25"> ข้อความแสดงใน Text Area </Textarea>

  7. ข้อสังเกต • ค่าตัวเลขของ ROWS นั้นจะเป็นการกำหนดความสูงของกรอบป้อนข้อมูล และค่าตัวเลขของ COLS นั้นและเป็นการกำหนดความกว้างของกรอบป้อนข้อมูล

  8. การสร้างตัวเลือก <FORM><SELECT NAME="ชื่อของข้อมูลที่ต้องการสร้างตัวเลือก" SIZE="ค่าตัวเลข / MULTIPLE"><OPTION SELCETED VALUE=ชื่อย่อของตัวเลือก">ตัวเลือกที่ต้องการแสดง<OPTION VALUE=ชื่อย่อของตัวเลือก">ตัวเลือกที่ต้องการแสดง<OPTION VALUE=ชื่อย่อของตัวเลือก">ตัวเลือกที่ต้องการแสดง</SELECT></FORM> โดยใช้คุณสมบัติ SIZE เป็นตัวกำหนดซึ่งสามารถกำหนดได้ 2 แบบคือ • SIZE="ค่าตัวเลข" เป็นการกำหนดการแสดงผลตัวเลือกตามค่าตัวเลขที่ได้ระบุไป • SIZE="MULTIPLE" เป็นการกำหนดการแสดงผลตัวเลือกทั้งหมดที่มีอยู่ • โดยจะแสดงเรียงต่อกันตามบรรทัดในแต่ละตัวเลือก <OPTION>

  9. การสร้างตัวเลือก Example: ระดับการศึกษา <select name="edu_Level" size="1"> <option value="1">ประถมศึกษา</option> <option value="2">มัธยมศึกษา</option> <option value="3" selected>อุดมศึกษา</option> <option value="4">ปริญญาโท</option> <option value="5">ปริญญาเอก</option> </select>

  10. การแสดงผลแบบ PASSWORD แสดงผลแบบ PASSWORD จะเป็นดอกจัน (*) <FORM><INPUT TYPE="PASSWORD" NAME="ชื่อย่อของข้อความ" SIZE="ค่าตัวเลข" MAXLENGTH="ค่าตัวเลข"></FORM> SIZE เป็นการกำหนดความกว้างของ Textbox MAXLENGTH เป็นการกำหนดค่าที่จะแสดงผล Textbox Example: รหัสลับ <Input type="password" name="password" size="15" maxlength="10">

  11. การแสดงผลแบบ CHECKBOX • เพื่อให้คลิกตัวเลือกที่ต้องการในการแสดงผลแบบ CHECKBOX จะมีคุณสมบัติอยู่ตัวหนึ่งที่ชื่อว่า CHECKED • แสดงผลเป็นเครื่องหมายถูกในช่องสี่เหลี่ยมที่เป็นตัวเลือก <FORM><INPUT TYPE="CHECKBOX" NAME="ชื่อย่อของข้อความ" VALUE="ชื่อย่อของข้อมูลที่แสดงผล" CHECKED></FORM> Example: ผลไม้ที่ชอบ <input type="checkbox" name="c1" value="1" >ส้ม <input type="checkbox" name="c2" value="1">แอปเปิ้ล <input type="checkbox" name="c3" checked value="1">มะละกอ <input type="checkbox" name="c4" value="1">กล้วย

  12. การแสดงผลแบบ RADIO • แสดงช่องทำเครื่องหมายเป็นรูปวงกลม ในการแสดงผลแบบ RADIO จะมีคุณสมบัติอยู่ตัวหนึ่งที่ชื่อว่า CHECKED • ถ้าเราต้องการยกเลิกก็ทำการคลิกที่ช่องตัวเลือกนั้นเครื่องหมายถูกก็จะหายไป <FORM><INPUT TYPE="RADIO" NAME="ชื่อย่อของข้อความ" VALUE="ชื่อย่อของข้อมูลที่แสดงผล" CHECKED></FORM> Example: เพศ <input type="radio" name="sex" value="0" checked>ไม่ระบุ <input type="radio" name="sex" value="1">ชาย <input type="radio" name="sex" value="2">หญิง

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

  14. การส่งแบบฟอร์มแบบ SUBMIT • คำสั่งนี้จะทำหน้าที่ส่งข้อมูลแบบฟอร์มสอบถาม ไปยังเซอร์ฟเวอร์ของเราเพื่อทำการประมวลผลข้อมูล <FORM><INPUT TYPE="SUBMIT" NAME="ชื่อย่อของข้อความ" VALUE="ค่าที่จะแสดงบนปุ่ม"></FORM> Example: <input type="submit" name="submit" value="บันทึก">

  15. การส่งแบบฟอร์มแบบ RESET • คำสั่งจะทำหน้าที่ในการยกเลิกข้อมูลต่าว ๆ ที่ทำการป้อนลงในแบบฟอร์ม <FORM><INPUT TYPE="RESET" NAME="ชื่อย่อของข้อความ" VALUE="ค่าที่จะแสดงบนปุ่ม"></FORM> Example: <input type="reset" name="reset" value="ยกเลิก">

  16. การจัดกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์ม • คำสั่งนี้ใช้ในการจัดกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์มที่มีใจความและการใช้งานที่สัมพันธ์กัน ช่วยให้แบบฟอร์มมีความเป็นระเบียบเรียบร้อย <FORM><FIELDSER><LEGEND>.....................</LEGEND></FIELDSER></FORM> <FIELDSET> เป็นการกำหนดการจัดกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์ม <LEGEND> เป็นการแสดงคำอธิบายกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์ม

  17. การแบ่งพื้นที่ของจอภาพ • การแบ่งส่วนบนจอภาพออกเป็นส่วนๆ โดยที่แต่ละส่วนต่างก็มีข้อมูลแยกแตกต่างกันไป ซึ่งเราจะเรียกการแบ่งหน้าจอภาพออกเป็นส่วนๆ ว่า เฟรม (FRAME) <HTML><HEAD><TITLE>.........</TITLE></HEAD><FRAMESET></FRAMESET></HTML> • ข้อสังเกต • จะเห็นได้ว่าในการกำหนดการแบ่งหน้าจอภาพนั้นจะกำหนดคำสั่ง <FRAMESET>.........</FRAMESET> แทนที่คำสั่ง <BODY>.........</BODY> เพื่อเป็นตัวกำหนดการแสดงผลในโปรแกรมเว็บเบราเซอร์

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

  19. การกำหนดเส้นแบ่งเฟรมและการกำหนดสีของเส้นแบ่งเฟรม • ในการกำหนดเส้นแบ่งเฟรมนั้นถ้าเรากำหนด FRAMEBORDER="yes" แล้ว จะปรากฎเส้นแบ่งเฟรม แต่ถ้าเราไม่กำหนด FRAMEBORDER="yes" การแสดงผลก็ยังสามารถแสดงเส้นแบ่งเฟรม <FRAMESET FRAMEBORDER="NO/YES">BORDER="ค่าตัวเลข" BORDERCOLOR="RGB หรือ ระบุชื่อสี"></FRAMESET> • FRAMEBORDER เป็นการกำหนดเส้นแบ่งเฟรม • BORDER เป็นการกำหนดขนาดของเส้นแบ่งเฟรม • BORDERCOLOR เป็นการกำหนดสีของเส้นแบ่งเฟรม

  20. การกำหนดการแสดงผลแถบสกอลบาร์ การกำหนดการปรับขนาดของเฟรม <FRAMESET><FRAME SRC="URL" SCROLLING="YES/NO" ><FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL"><FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL"></FRAMESET> <FRAMESET><FRAME SRC="URL" NORESIZE ><FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL"><FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL"></FRAMESET>

  21. พิจารณาไฟล์ต่อไปนี้ ให้สร้างไฟล์ทั้งสามตามชื่อไฟล์ที่กำหนด A1.html A2.html <html> <body bgcolor="Red"> Hello Hello Hello Hello </body> </html> <html> <body bgcolor="Yellow"> Welcome Welcome Welcome </body> </html> B.html <html> <frameset rows="200,*" cols="*" > <frame src=“A2.html" name=“topFrame" > <frame src=“A1.html" name="mainFrame"> </frameset> </html> เมื่อสร้างไฟล์ทั้ง 3 เสร็จแล้วให้รัน B.html ซึ่งเป็นตัวควบคุมการแสดงผล

  22. A3.html พิจารณาไฟล์ต่อไปนี้ <html> <body bgcolor="Green"> ThailandThailand <a href="http://www.nu.ac.th" target="mainFrame">มอนอ</a> </body> </html> A1.html A2.html <html> <body bgcolor="Red"> Hello Hello Hello </body> </html> <html> <body bgcolor="Yellow"> Welcome Welcome </body> </html> B1.html <html> <frameset rows="110,*" cols="*" > <frame src="A3.html" name="topFrame" scrolling="NO" noresize> <frameset rows="*" cols="216,*" frameborder="NO" border="0"> <frame src="A2.html" name="leftFrame" scrolling="NO" noresize> <frame src="A1.html" name="mainFrame"> </frameset> </frameset> </html> A3.Html [TopFrame] A2.Html [Leftframe] A1.Html [MainFrame]

  23. การแสดงเฟรมแบบ INLINE • เราสามารถนำเฟรมมาแสดงในเว็บเพจโดยไม่ต้องทำการแบ่งพื้นที่หน้าจอ ออกเป็นส่วน ๆ ทั้งนี้เฟรมจะแสดงผลร่วมกับข้อความต่าง ๆ ในเว็บเพจ (INLINE หรือ INFLOW) <BODY><IFRAME SRC="ชื่อไฟล์เอกสาร HTML หรือ URL" WIDTH="พิกเซลหรือเปอร์เซ็นต์" HEIGHT=“พิกเซลหรือเปอร์เซ็นต์” Name=“ชื่อเฟรม” ALING="LEFT/CENTER/RIGHT" ></BODY> <IFRAME SRC="A2.html" WIDTH="200" HEIGHT="200" Name="MainShow" ALIGN ="LEFT" >

  24. การกำหนดระบุวินโดว์หรือเฟรมที่ต้องการให้แสดงเว็บเพจปลายทางการลิงค์ • Target="_blank" เมื่อพบกับชื่อนี้ จะมีการเปิดหน้าต่างเบราเซอร์ขึ้นมาใหม่ • Target="_self" จะทำให้ไฮเปอร์ลิงค์นำข้อมูลมาแสดงบนเฟรมซึ่งมีไฟล์ไฮเปอร์ลิงค์นี้อยู่ • Target="_parent" จะทำให้เบราเซอร์ปัจจุบันนั้นถูกรีเซ็ตใหม่ และนำข้อมูลมาแสดงบนเบราเซอร์นี้ • Target="_Top" จะทำให้ไฮเปอร์ลิงค์นำข้อมูลพิมพ์ลงบนเฟรมบนสุด

  25. ติดอันดับการสืบค้น • อย่าลืมกำหนด Title ถ้าต้องการให้ข้อมูลเว็บเราอยู่ในกลุ่มของการค้นหาข้อมูลจากผู้ให้บริการสืบค้นข้อมูลอัตโนมัติ (Search Engine) • เพื่อช่วยให้การสืบค้นได้ผลดีขึ้น อาศัยแท็กคำสั่ง <META NAME="Keywords" CONTENT="คำที่ 1, คำที่ 2, …">

  26. ติดอันดับการสืบค้น (ต่อ..) <META NAME="Description" CONTENT="ข้อความอธิบายเว็บไซต์"> และ<META NAME="Robots” CONTENT="all/none/index/noindex/follow/nofollow"> • Description จะเป็นการใส่คำอธิบายให้กับเว็บไซต์ • Robots เป็นการบอกให้กับ Spider หรือ Robot (โปรแกรมของ Search Engine ที่ทำหน้าที่ค้นหาข้อมูลของเว็บไซต์ต่างๆ) ว่าควรจัดการหน้าเว็บต่างๆ ในเว็บไซต์อย่างไร เช่น • ถ้าต้องการให้เก็บข้อมูลทุกหน้า กำหนด Contect="All" • ต้องการให้เก็บข้อมูลหน้าใด ก็กำหนด Contect="noindex" • ให้เก็บเฉพาะหน้าที่ระบุ ไม่ต้องเก็บหน้าอื่นๆ ก็ใช้ Contect="NoFollow"

  27. แบบฝึกหัด Chk_pwd.html main.html Name :: Old Password :: **** Age :: 15,18,20,25 New Password :: **** Address :: Confirm Password :: **** Submit Cancel E-mail :: Color :: Red Green Yellow Sex :: Male Female Submit Cancel Change Password

  28. อ้างอิง • www.thaicreate.com • www.nectec.or.th

More Related