ค าน า แบบฝ กท กษะ การสร างเว บเพจด วยภาษา HTML

Transcription

1 แ บ บ ฝ ก ท ก ษ ะก ร ส ร ง เ ว บ เ พ จ ด ว ย ภ ษ H T ML เ ล ม ท 7 ร ย ว ช ง ก ร ส ร ง เ ว บ เ พ จ ด ว ย ภ ษ H T MLช น ม ธ ย ม ศ ก ษ ป ท 4 Ò Ã Ê Ã Ò é á º º Í Ã Á ì โ ด ยน ย ส ม รม ล ต ำ แ ห น ง ค ร ว ท ย ฐ น ะช ำ น ญก ร โ ร ง เ ร ย น ก ด บ ง พ ท ย ค รต. ก ด บ งอ. โ พ น พ ส ยจ. ห น อ ง ค ย ส ง ก ด ส ำ น ก ง น เ ข ต พ น ท ก ร ศ ก ษ ม ธ ย ม ศ ก ษ เ ข ต2 1 ส ำ น ก ง น ค ณะ ก ร ร ม ก ร ก ร ศ ก ษ ข น พ น ฐ นก ร ะ ท ร ว ง ศ ก ษ ธ ก ร

2 ก ค น แบบฝ กท กษะ กรสร งเว บเพจด วยภษ HTML เล มท 7 เร อง กรสร งแบบฟอร ม Form จ ดท ข นเพ อใช ประกอบก จกรรมกรเร ยนกรสอนในรยว ช กรสร งเว บเพจด วยภษHTML รห สว ช ง สระกรเร ยนร เพ มเต ม กล มสระกรเร ยนร กรงนอช พและเทคโนโลย หน วย กรเร ยนร ท 2 กรสร งเว บเพจด วยภษ HTML ช นม ธยมศ กษป ท 4 โรงเร ยนก ดบงพ ทยคร อ เภอโพนพ ส ย จ งหว ดหนองคย โดยเน นผ เร ยนเป นส ค ญ ให สมรถพ ฒนควมร ควมเข ใจและ เสร มท กษะกรสร งเว บเพจด วยตนเองโดยใช ภษ HTML ให ก บน กเร ยน ม เน อหท ม ควมช ดเจน เข ใจง ย เป นล ด บข นตอน น กเร ยนสมรถน ไปศ กษฝ กปฏ บ ต ได ด วยตนเองท งในเวลเร ยนและฝ ก เพ มเต มในเวลว ง น ไปประย กต ใช ในช ว ตประจ ว นได แบบฝ กท กษะกรสร งเว บเพจด วยภษ HTML ม จ นวน 8 เล ม เน อหในแต ละเล มม ควมต อเน องก น ด งน นน กเร ยนจ งควรศ กษตมข นตอนท ละเล ม ผ จ ดท หว งเป นอย งย งว แบบฝ กท กษะกรสร งเว บด วยภษ HTML จะเป นประโยชน ต อ กรจ ดก จกรรมกรเร ยนร ของน กเร ยน คร ผ สอนและผ ท สนใจ เป นอย งด สมร มล

3 ข สรบ ญ เร อง หน ค น ก สรบ ญ ข ค ช แจง ค ค แนะน ส หร บคร ง ค แนะน ส หร บน กเร ยน จ สระกรเร ยนร 1 จ ดประสงค กรเร ยนร 1 แบบทดสอบก อนเร ยน 2 กรอบเน อห 3 แบบฟอร มกรป อนข อม ล 4 แท ก <input>ก บกรป อนข อม ล 6 กรสร งล สต แบบ Drop-Down Lists 12 กรกรอกข อม ลด วย Text Area 15 กรจ ดกล มข อม ลด วย Fieldset 16 กรอบก จกรรม 19 ก จกรรมฝ กท กษะท 7.1 เร อง สร งฟอร มป อนข อม ล 20 ก จกรรมฝ กท กษะท 7.2 เร อง สร งล สต แบบ Drop-Down Lists 21 ก จกรรมฝ กท กษะท 7.3 เร อง สร งแบบฟอร ม 22 แบบทดสอบหล งเร ยน 24 บรรณน กรม 25 ภคผนวก 26 เฉลยแบบทดสอบก อนเร ยน หล งเร ยน 27 เฉลยแบบฝ กท กษะ 28

4 ค ค ช แจง แบบฝ กท กษะ กรสร งเว บเพจด วยภษ HTML ได จ ดท ข นท งหมด จ นวน 8 เล ม ประกอบด วย เล มท 1 เร มต นเสร งเว บเพจ เล มท 2 กรจ ดกรก บข อควม เล มท 3 กรจ ดร ปแบบต วอ กษร เล มท 4 กรใส และตกแต งร ปภพ เล มท 5 กรสร งล งค เช อมโยง เล มท 6 กรสร งตรง เล มท 8 กรจ ดกรก บเฟรม Frames แบบฝ กท กษะ กรสร งเว บเพจด วยภษ HTML ในรยว ช กรสร งเว บเพจด วยภษ HTML รห สว ช ง กล มสระกรเร ยนร กรงนอช พและเทคโนโลย ช นม ธยมศ กษป ท 4 จ นวน 8 เล ม เป นแบบฝ กท กษะท ม ก จกรรมฝ กท กษะท น กเร ยนจะได ร บประสบกรณ พ นฐนของกร สร งเว บเพจโดยตรง สมรถเร ยนร ด วยตนเอง ได ร บควมร เพล ดเพล น โดยย ดหล กน กเร ยนท กคน สมรถเร ยนร และพ ฒนตนเองได รวมท งย ดหล กผ เร ยนเป นส ค ญ สอดคล องก บหล กส ตรแกนกลง กรศ กษข นพ นฐน พ ทธศ กรช 2551 น กเร ยนสมรถน ควมร และท กษะจกกรท แบบฝ ก ท กษะ ไปประย กต ใช ในช ว ตประจ ว นและศ กษหควมร ต อในอนคต

5 ง ค แนะน ส หร บคร แบบฝ กท กษะ กรสร งเว บเพจด วยภษ HTML เล มท 7 เร อง กรสร งแบบฟอร ม Form เป นส อกรเร ยนร ประกอบกรเร ยนกรสอนส หร บแผนกรจ ดกรเร ยนร 10 รยว ช กรสร งเว บ เพจด วยภษ HTML ง ช นม ธยมศ กษป ท 4 โรงเร ยนก ดบงพ ทยคร อ.โพนพ ส ย จ.หนองคย ใช เวลในกรจ ดก จกรรมกรเร ยนร 2 ช วโมง ในกรด เน นก จกรรมกรเร ยนกรสอน คร ผ สอนควร ปฏ บ ต ด งน 1. ข นเตร ยมกรสอน คร ผ สอนต องศ กษรยละเอ ยด ด งน 1.1 ศ กษโครงสร ง ผลกรเร ยนร ท คดหว งของแผนกรจ ดกรเร ยนร ให เข ใจอย ง ละเอ ยด 1.2 ตรวจสอบแบบฝ กท กษะ กรสร งเว บเพจด วยภษ HTML ส อกรสอน และ คอมพ วเตอร ให อย ในสภพท ใช งนได ด 1.3 คร ผ สอนควรเตร ยมควมร ในเน อหอย งล กซ ง และควรม พ นฐนในกรสร งเว บเพจ ด วยภษ HTML 2. ข นด เน นก จกรรมกรเร ยนกรสอน 2.1 คร ผ สอนสมรถย ดหย นเวลในกรจ ดก จกรรมกรเร ยนกรสอนได ตมควม เหมะสม 2.2 คร แจกแบบฝ กท กษะ กรสร งเว บเพจด วยภษ HTML ให น กเร ยนได ศ กษ 2.3 คร อธ บยและสธ ตข นตอนกรฝ กปฏ บ ต 2.4 คร ให น กเร ยนเป ดเคร องและฝ กปฏ บ ต ก จกรรมฝ กท กษะท ก หนดไว ในกรอบก จกรรม 2.5 คร ผ สอนสมรถเพ มเต มเน อหบงตอนได 3. ข นกรประเม นผล 3.1 คร ผ สอนควรแจ งให น กเร ยนทรบถ งขอบเขตเน อหท จะประเม น 3.2 คร ผ สอนควรประเม นผลท กคร งหล งส นส ดก จกรรมกรเร ยนกรสอน และแจ งให น กเร ยนทรบถ งผลกรประเม น

6 จ ค แนะน ส หร บน กเร ยน 1. อ นค ช แจงและค แนะน ส หร บน กเร ยนให เข ใจก อนลงม อศ กษแบบฝ กท กษะ 2. ท แบบทดสอบก อนเร ยน เพ อประเม นควมร เด มของน กเร ยน 3. ฟ งค อธ บยและกรสธ ตของคร พร อมท งฝ กปฏ บ ต หล งจกกรสธ ต 4. ศ กษกรอบควมร และฝ กปฏ บ ต ตมข นตอนท ระบ ไว ในกรอบก จกรรม 5. ทดสอบกรฝ กปฏ บ ต ก บคร ผ สอน 6. ท แบบทดสอบหล งเร ยนเพ อด ควมก วหน ในกรเร ยนของน กเร ยนหล งจกท ก จกรรม กรเร ยนกรสอนโดยใช แบบฝ กท กษะ 7. หล งจกท ก จกรรมกรเร ยนกรสอนเสร จเร ยบร อยแล ว ให น กเร ยนป ดเคร อง คอมพ วเตอร อย งถ กว ธ เก บเก อ เก บขยะให เร ยบร อย 8. ในกรท ก จกรรมตมแบบฝ กท กษะท กเล ม ขอให น กเร ยนปฏ บ ต ด วยควมต งใจ ม ควมซ อส ตย ต อตนเองให มกท ส ด และไม ด เฉลยก อนท แบบทดสอบ 9. หกน กเร ยนย งไม สมรถปฏ บ ต ได ตมกรอบก จกรรมของแต ละแบบฝ ก น กเร ยน สมรถร บแบบฝ กไปศ กษและฝ กปฏ บ ต เพ มเต มนอกเวลเร ยน เพ อเพ มควมช นญ มกย งข น

7 1 สระกรเร ยนร 1. แบบฟอร มกรป อนข อม ล 2. แท ก <input> ก บกรป อนข อม ล 3. กรสร งล สต แบบ Drop-Down Lists 4. กรกรอกข อม ลด วย Text Area 5. กรจ ดกล มข อม ลด วย Fieldset จ ดประสงค กรเร ยนร 1. ด นควมร (Knowledge) เข ใจร ปแบบกรป อนข อม ลชน ดต ง ๆ บนแบบฟอร ม ไม ว จะเป นเท กซ บ อกซ เช กบ อกซ เรด โอบ ตตอน และดร อปดวน ล สต 2. ด นท กษะ (Process) 2.1 สมรถสร งแบบฟอร มเพ อป อนข อม ลชน ดต ง ๆ ได 2.2 สมรถประย กต กรสร งแบบฟอร มเพ อป อนข อม ล ได อย งเหมะสม 3. ด นค ณล กษณะ (Attitude) น กเร ยนเห นประโยชน และค ณค ของกรสร งแบบฟอร มเพ อป อนข อม ลชน ดต ง ๆ บนเว บเพจ โดยม ควมต งใจฝ กตมแบบฝ กท กษะด วยควมซ อส ตย ม ว น ยในกรฝ ก ปฏ บ ต ด วยใฝ เร ยนร และม งม นในกรฝ กจนประสบผลส เร จได

8 2 แบบทดสอบก อนเร ยน กรสร งเว บเพจด วยภษ HTML เร อง กรสร งแบบฟอร ม Form ค ช แจง แบบทดสอบเป นแบบปรน ย 4 ต วเล อก จ นวน 10 ข อ ใช เวลในกรสอบ 10 นท ค ส ง จงเล อกค ตอบท ถ กต องท ส ดเพ ยงค ตอบเด ยวแล วท เคร องหมย X ลงในกระดษค ตอบ 1. แบบฟอร มชน ดใดท ผ ใช สมรถเล อก ค ตอบได มกกว 1 ข อ ก. Textbox ข. Radio Button ค. Checkbox ง. Drop-Down Lists e 2. แอตตร บ วต ใดระบ URL ของสคร ปต CGI ก. name ข. action ค. method ง. mode 3. หกต องกรกรอกข อม ลหลย ๆ บรรท ด จะต องใช แท กค ส งใด ก. textbox ข. textarea ค. multi-line ง. list 4. ในกรสร งแบบฟอร มเพ อป อนและส ง ข อม ลได อย งสมบ รณ จะต องประกอบด วย ส งใด ก. Database ข. CGI Script ค. Web Server ง. ถ กท กข อ 5. หกต องกรจ ดกล มฟ ลด ป อนข อม ล ให รวมอย ในกล มเด ยวใช แท กค ส งใด ก. fieldset ข. fieldgroup ค. grouping ง. Legend 6. จกข อ 5 จะใช แท กค ส งใด ก หนดช อของ กล มฟ ลด ข อม ลด งกล ว ก. fieldset ข. fieldgroup ค. grouping ง. legend 7. แอตตร บ วต ในข อใด อธ บยถ งว ธ กรส ง ข อม ลไปย งสคร ปต CGI ก. name ข. action ค. method ง. mode 8. Script CGI น ยมเข ยนด วยภษใด ก. Java Script ข. PHP ค. ASP ง. น ยมท ง PHP และ ASP 9. ข อม ลแบบใดท เหมะก บกรป อนข อม ล แบบ Radio Button ก. ช วงอย ข. เพศ ค. งนอด เรก ง. ถ กท งข อ ก และ ข 10. แท กใดต อไปน ท ใช ส หร บจ แนกกล ม ข อม ลภยในล สต ก. option ข. optgroup ค. group value ง. label

9 3 <กรอบเน อห>

10 4 แบบฟอร มกรป อนข อม ล กรโต ตอบ หร อส งข อม ลระหว งผ ใช ก บเว บ แบบฟอร มจ ดเป นองค ประกอบ หน งท ถ กน มใช ส หร บกรป อนข อม ลเพ อเก บรวบรวมข อม ลจกผ ใช ไม ว จะเป นข อควม หร อข อม ลในร ปแบบต ง ๆ เม อผ ใช กรอกแบบฟอร ม แล วท กรคล กเพ อย นย นกรส ง โปรแกรมเบรเซอร จะส งข อม ลตมแบบฟอร ม ส งไปย งเซ ร ฟเวอร ปลยทง ซ งน กพ ฒนเว บจะม ว ธ กรจ ดกรก บข อม ล ไม ว จะเป นกรเข ยนสคร ปต เพ อแยกข อม ลท ต องกร และจ ดเก บลงใน ฐนข อม ล จกน นจะส งข อม ลโต กล บมย งผ ใช ทงโปรแกรมเบรเซอร หร อ ทงอ เมล เป นต น ซ งโดยส วนใหญ แบบฟอร มเหล น จะถ กประมวลผลโดยใช สคร ปต CGI (Common Gateway Interface) บนฝ งเว บเซ ร ฟเวอร และสคร ปต CGI น เองท ท ให ผ ใช สมรถส งข อม ลเพ อโต ตอบก บเว บ เซ ร ฟเวอร ได ภษสคร ป ท น ยมน มใช เข ยนสคร ปต CGI อย งเช น PHP หร อ ASP กรสร งแบบฟอร ม ในกรสร งฟอร มจะใช แท กค ส ง <form> และภยในจะประกอบด วยอ ล เมนต ต ง ๆ ท เก ยวข อง ท ส ค ญ ในกรสร งแบบฟอร มจะม แอตตร บ วต อย 3 ต ว ท จะต องถ กก หนดข นมเม อม กร สร งแบบฟอร ม ประกอบด วย แอตตร บ วต ค อธ บย ค action ก หนดท อย ข อม ล ว จะส งไปท ไหน ท อย หร อ URL ของ CGI Script ท ใช ร บข อม ลจกแบบฟอร มท ส งไป method อธ บยเคร องม อ HTTP ท น มใช GET, POST ส หร บกรส งข อม ล name ช อของแบบฟอร ม ท โปรแกรมเมอร น ไปใช เพ อกรอ งอ งภยใน โปรแกรม พ จรณจกโค ดค ส งต อไปน ซ งเป นต วอย งกรโพสข อม ลกล บไปย งฝ งเซ ร ฟเวอร ผ น PHP Script บนเว บเพจ <form name= example method= POST action= > </form>

11 5 กรโต ตอบก บแบบฟอร ม แบบฟอร มบนเว บ นอกจกม จ ดประสงค เพ อรวบรวมข อม ลจกผ ใช แล ว จะต องสมรถ โต ตอบระหว งก นได (ระหว งผ ใช ก บระบบ) ซ งก ค อกรโต ตอบแบบสองท ศทงน นเอง HTML form PHP Action 2. Order data is sent to the action 1. A user places an order User browser 5.Order confirmation is displayed Sales database * แผนภพแสดงข นตอนกรโต ตอบระหว งผ ใช ก บระบบ ผ นกรส งซ อส นค บนเว บ อ น ประกอบด วยข นตอนรยละเอ ยดด งน 1. ผ ใช (ล กค ) กรอกข อม ลลงแบบฟอร มส งซ อ 2. ข อม ลกรส งซ อถ กส งเข ม และถ กด เน นกรโดย PHP 3. สคร ปต PHP ได ถ กเข ยนข นมเพ อส งให บ นท กข อม ลกรส งซ อลงในฐนข อม ลกรขย (Sales database) บนฝ งเซ ร ฟเวอร 4. สคร ปต PHP ได ตอบร บค ย นย นกรส งซ อกล บไปย งล กค 5. ล กค ได ร บกรตอบร บค ส งซ อจกระบบ (Order confirmation) ผ นกรแสดงผลบน เบรเซอร ทงฝ งผ ใช

12 6 แท ก <input> ก บกรป อนข อม ล แท ก <input> ท ใช งนใน HTML ไม ต องกรแท กป ด แต ในขณะเด ยวก น หกเป น XHTML ได บ งค บให ต องใช แท กป ด ซ งเป นแท กป ดใน ต วม นเอง เช นเด ยวก บแท ก <br /> และ <img /> ค ของแอตตร บ วต ท สมรถน มใช งนในแท ก <input> ม ด งน ค ค อธ บย text สร งกรอบส เหล ยมท อน ญตให ผ ใช พ มพ ข อควมลงไป checkbox สร งเช กบอกซ ท ให ผ ใช สมรถเล อกต วเล อกในรยกรได มกกว หน ง รยกร radio สร งเรด โอบ ตทอน ท ผ ใช สมรถเล อกรยกรได เพ ยงรยกรเด ยว file อน ญตให ผ ใช สมรถเร ยกด ไฟล บนเคร อง พร อมก บส งไฟล กล บไปย ง เว บไซต password อน ญตให ผ ใช กรอกข อม ล โดยข อควมท กรอกจะถ กแทนด วย เคร องหมย hidden ใช ส หร บจ ดเก บข อม ลตมร ปแบบท ต องกร โดยผ ใช จะมองไม เห น Reset สร งป มเพ อเคล ยร แบบฟอร ม submit สร งป มเพ อส งแบบฟอร มข อม ลตม action ท ก หนดไว Textbox <form> < input type="text" name="ช อช องกรอกข อม ล" value="ข อม ล" size="number" maxlength="number" disabled readonly /> < /form> - size="number" ควมกว งของช องกรอกข อม ล - maxlengt="number" จ นวนต วอ กษรส งส ดท กรอกได - disabled lock ไม ให ช องกรอกข อม ลใช งนได - readonly ให ช องกรอกข อม ลอ นได อย งเด ยว กรอกข อม ลไม ได

13 7 ต วอย ง ไฟล เอกสร HTML (example7_1.html) สร งแบบฟอร มกรป อนข อม ลแบบเท กซ บอกซ (Textbox) <html> <head><title>textbox</title></head> <body> <form action=""> Enter username : <input type="text" name="username" maxlength="8" /><br /> Enter password : <input type="password" name="password" maxlength="12" /><br /> </form> </body> </html>

14 8 Checkbox <form> < input type="checkbox" name="ช อ checkbox" value="ค ข อม ล" checked> < /form> - checked = ให checkbox น นถ กเล อก (tick / ท checkbox) ต วอย ง ไฟล เอกสร HTML (example7_2.html) สร งแบบฟอร มกรป อนข อม ลแบบเช กบอกซ (checkbox) ซ งผ ใช สมรถเล อกค ตอบได หลยต วเล อก โดยในท น ได ก หนดเช กบอกซ ท ต วเล อก ภษไทย โดยอ ตโนม ต <html> <head><title>check Boxes</title></head> <body> <h4>ภษท พ ดได </h4> <form action=""> <input type="checkbox" name="lng" value="th" checked="checked" /> ภษไทย<br /> <input type="checkbox" name="lng" value="en" /> ภษอ งกฤษ<br /> <input type="checkbox" name="lng" value="ch" /> ภษจ น<br /> <input type="checkbox" name="lng" value="ja" /> ภษญ ป น<br /> <input type="checkbox" name="lng" value="lao" /> ภษลว<br /> </form> </body> </html>

15 9 Radio Buttons <form> < input type="radio" name="ช อ radio" value="ค ข อม ล"checked="checked" /> < /form> - checked = ให option น นถ กเล อก- checked = ให checkbox น นถ กเล อก (tick / ท checkbox) ต วอย ง ไฟล เอกสร HTML (example7_3.html) สร งแบบฟอร มกรป อนข อม ลแบบเรด โอบ ตทอน (Radio Buttons) <html> <head><title>radio Buttons</title></head> <body> <h4>รยได ต อเด อน</h4> <form action=""> <input type="radio" name="incom" value="level1" /> ต กว 10,000 บท <br /> <input type="radio" name="incom" value="level2" /> 10,000-30,000 บท <br /> <input type="radio" name="incom" value="level3" /> 30,001-50,000 บท <br /> <input type="radio" name="incom" value="level4" /> 50,001-70,000 บท <br /> <input type="radio" name="incom" value="level5" /> 70, ,000 บท <br /> <input type="radio" name="incom" value="level6" /> 100,001 บท ข นไป <br /> </form> </body> </html>

16 10 Buttons <form> < input type="button" name="ช อ button" value="ค ข อม ล" /> < /form> ต วอย ง ไฟล เอกสร HTML (example7_4.html) สร งป มย นย นข อม ล และป มล งข อม ล <html> <head> <title>buttons</title> </head> <body> <h4>กร ณย นย นกรส งข อม ล</h4> <form action=""> <input type="submit" name="button1" value="send Data" /> <input type="reset" name="button2" value="clear Form" /> </form> </body> </html>

17 11 File <form> < input type="file" name="ช อ input file" value="ค ข อม ล" size="number" maxlength="number" /> < /form> ต วอย ง ไฟล เอกสร HTML (example7_5.html) สร งฟอร มเพ อแนบไฟล ภพ <html> <head><title>upload File</title></head> <body> <h4>อ ปโหลดไฟล ภพ</h4> <form name="upload" method="post" action=" enctype="multipart/form-data"> ไฟล ร ปภพ (.jpg) : <input type="file" /><br /><br /> <input type="submit" name="button1" value="send Data" /> &nbsp &nbsp <input type="reset" name="button2" value="clear Form" /> </form> </body> </html>

18 12 กรสร งล สต แบบ Drop-Down Lists แท ก <select> เป นแท กค ส งท น มใช ในกรสร งล สต แบบดร อปดวน ซ งจ ดได ว เป นว ธ ท ด ส หร บกรณ ม ต วเล อกจ นวนมกให ผ ใช เล อก โดยไม ต องเส ยพ นท หน จอ ไปก บต วเล อกจ นวนมก เหล น น ร ปแบบ <form> < select name="ช อ select" size="5" multiple> < option value="1" selected="selected">option 1</option> < option value="2">option 2</option> < option value="3">option 3</option> < option value="4">option 4</option> < option value="5">option 5</option> < /select> < /form> - size = จ นวนต วเล อกท ให มองเห น - multiple = ให ผ ใช งนเล อกหลยต วเล อกได โดยกดป ม Ctrl ต วอย ง ไฟล เอกสร HTML (example7_6.html) สร ง Drop-Down lists เพ อให ผ ใช เล อก <html> <head><title>drop-down Lists</title></head> <body> <form action=" "> ระด บกรศ กษ : <select name="edu" > <option value="non">กร ณเล อก</option> <option value="certificate">ปวช.</option> <option value="diploma">ปวส.</option> <option value="bachelor">ปร ญญตร </option> <option value="master">ปร ญญโท</option> <option value="doctor">ปร ญญเอก</option> </select> </form>

19 13 </body> </html> กรณ เม อต องกรก หนดต วเล อกต วใดต วหน งให เป นค Default สมรถก หนดได โดย เพ ม แท กค ส งเพ มด งน <html> <head><title>drop-down Lists</title></head> <body> <form action=" "> ระด บกรศ กษ : <select name="edu" > <option value="non">กร ณเล อก</option> <option value="certificate">ปวช.</option> <option value="diploma">ปวส.</option> <option value="bachelor" selected= selected >ปร ญญตร </option> <option value="master">ปร ญญโท</option> <option value="doctor">ปร ญญเอก</option> </select> </form> </body> </html> ผลล พธ ท ได ต วเล อกท เรเล อกเป น Default จะปรกฏข นมก อน

20 14 ถ ต วเล อกม จ นวนมก ย งสมรถจ ดกล มต วเล อกได (Grouping Options) โดยจะใช แท ก <optgroup label= ช อกล ม > คล มแท ก <option value> ด งน ต วอย ง ไฟล เอกสร HTML (example7_7.html) สร ง Drop-Down lists แบบจ แนกรยกรตมกล ม <html> <head><title>drop-down Lists (Grouping)</title></head> <body> <form action=" "> กร ณเล อกสขว ชเอก : <select name="edu" > <optgroup label="คณะว ทยศสตร "> <option value="sco1">เคม </option> <option value="sco2">ช วว ทย</option> <option value="sco3">ว ทยศสตร </option> </optgroup> <optgroup label="คณะคร ศสตร "> <option value="edu1">คณ ตศสตร </option> <option value="edu2">ส งคมศ กษ</option> <option value="edu3">ภษไทย</option> <option value="edu4">ดนตร </option> </optgroup> </select> </form> </body> </html>

21 15 กรกรอกข อม ลหลยๆ บรรท ดด วย Text Area กรป อนข อม ลต วอ กษร จะป อนข อม ลภยในกรอบบรรท ดเด ยวก น ด งน นในกรณ ท ต องกร พ นท กรอบกรป อนข อม ลหลย ๆ บรรท ด โดยเฉพะกรกรอกข อม ลเก ยวก บควมค ดเห น ก จะต องใช แท ก <textarea> ร ปแบบ 1. พ มพ แท กค ส ง <textarea name= ช อ rows= จ นวนแถว cols= จ นวนคอล มน > 2. ป ดด วยแท ก </textarea> โดยท แท ก <textarea> สมรถเข ยนอย ภยใต แท ก <form> หร อพ นท อ น ๆ บนเว บเพจก ได ต วอย ง ไฟล เอกสร HTML (example7_8.html) สร ง พ นท กรอกข อม ลหลย ๆ บรรท ด <html> <head> <title>text Area</title> </head> <body> <h3>กรอกควมค ดเห น</h3> <textarea name="comment" rows="6" cols="60"></textarea> </body> </html>

22 16 กรจ ดกล มข อม ลด วย Fieldset กรจ ดกล มฟ ลด ป อนข อม ลใน Form ท ม ควมส มพ นธ ก น จะท ให Form ม ควมเป นระเบ ยบ สวยงม และผ ใช งนสมรถเข ใจและป อนข อม ลได สะดวกมกข น สมรถท ได โดยใช แท กค ส ง <Fieldset> ร ปแบบ <form> <fieldset> แสดงจ ดเร มต นของกรจ ดกล มข อม ล <legend>ช อกล มข อม ล</legend> element form ต งๆ </fieldset> <fieldset> < legend>ช อกล มข อม ล</legend> element form ต งๆ < /fieldset> < /form> ต วอย ง ไฟล เอกสร HTML (example7_9.html) สร งฟอร มท ม กรจ ดกล มของข อม ลท ม ควมส มพ นธ ก นเป นกล มเด ยวก น <html> <head> <title>fieldset</title> </head> <body> <form action=""> <fieldset> <legend>ข อม ลน กเร ยน</legend><br /> <input type="radio" name="sex" value="sex1" />ชย &nbsp <input type="radio" name="sex" value="sex2" />หญ ง &nbsp <br /> ระด บช น : <select name="m"> <option value="m1"> ม. 1 </option> <option value="m1"> ม. 2 </option>

23 17 <option value="m1"> ม. 3 </option> <option value="m1"> ม. 4 </option> <option value="m1"> ม. 5 </option> <option value="m1"> ม. 6 </option> </select><br /> โรงเร ยน : <input type="text" size="99" /><br /> </fieldset><br /> <fieldset> <legend>ข อม ลด นส ขภพ</legend><br /> ส วนส ง (cm) :<input type="text" name="height" size="9"> น หน ก (kg) :<input type="text" name="ไรเะ" size="9"> ระบ โรคประจ ต ว (ถ ม ) :<input type="text" name="exe" size="60"><br /><br /> </fieldset> </form> </body> </html>

24 18 份 Ẻ½ Ñ ÉРѹ

25 19 <กรอบก จกรรม>

26 20 ก จกรรมฝ กท กษะท 7.1 เร อง สร งฟอร มป อนข อม ล ค ช แจง ให น กเร ยนฝ กปฏ บ ต กรสร งฟอร มป อน ข อม ลชน ดต ง ๆ กระบวนกรฝ กก จกรรมฝ กท กษะ ให น กเร ยนสร งเว บเพจด วยภษ HTML สร งฟอร มป อนข อม ลให เป นไปตมร ปแบบท ก หนด 1. สร ง Textbox เพ อป อนข อม ลด งน จ ดประสงค ของกรฝ ก 1.เข ใจร ปแบบกรป อนข อม ลชน ดต ง ๆ บนแบบฟอร ม ไม ว จะเป นเท กซ บ อกซ เช กบ อกซ เรด โอบ ตตอน และดร อปดวน ล สต 2.สมรถสร งแบบฟอร มเพ อป อนข อม ล ชน ดต ง ๆ ได 2. สร ง checkbox เพ อแสดงต วเล อกต อไปน 3. สร ง Radio buttons โดยต วเล อก ชย ถ กก หนดค ไว แล ว

27 21 ก จกรรมฝ กท กษะท 7.2 เร อง สร งล สต แบบ Drop-down Lists ค ช แจง ให น กเร ยนฝ กปฏ บ ต กรสร งฟอร มป อน ข อม ลแบบ Drop-down Lists กระบวนกรฝ กก จกรรมฝ กท กษะ ให น กเร ยนสร งเว บเพจด วยภษ HTML สร งฟอร มป อนข อม ลให เป นไปตมร ปแบบท ก หนด 1. สร ง Drop-down Lists โปรแกรมคอมพ วเตอร ด งน จ ดประสงค ของกรฝ ก 1.เข ใจร ปแบบกรป อนข อม ลชน ดต ง ๆ บนแบบฟอร ม ไม ว จะเป นเท กซ บ อกซ เช กบ อกซ เรด โอบ ตตอน และดร อปดวน ล สต 2.สมรถสร งแบบฟอร มเพ อป อนข อม ล ชน ดต ง ๆ ได 2. จกข อท 1 ก หนดให ต วเล อกถ กก หนดเป น Microsoft Word 3. สร ง Drop-down Lists จ แนกโปรแกรมเป นหมวดหม

28 22 ก จกรรมฝ กท กษะท 7.3 เร อง สร งแบบฟอร ม ค ช แจง ให น กเร ยนฝ กปฏ บ ต ประย กต กรสร ง แบบฟอร มเพ อป อนข อม ล ได อย งเหมะสม กระบวนกรฝ กก จกรรมฝ กท กษะ ให น กเร ยนฝ กปฏ บ ต สร งแบบฟอร ม น เทคน ค กรสร งแบบฟอร มมประย กต ใช ก บแบบฟอร มสม ครงน จ ดประสงค ของกรฝ ก 1.เข ใจร ปแบบกรป อนข อม ลชน ดต ง ๆ บนแบบฟอร ม ไม ว จะเป นเท กซ บ อกซ เช กบ อกซ เรด โอบ ตตอน และดร อปดวน ล สต 2.สมรถประย กต กรสร งแบบฟอร ม เพ อป อนข อม ล ได อย งเหมะสม

29 23 ถ ม เวลเหล อก ขอให น กเร ยนฝ ก ทบทวนจนเก ดควมช นญนะคร บ ถ ใครช นญแล วไปท แบบทดสอบหล ง เร ยนได เลย

30 24 แบบทดสอบหล งเร ยน กรสร งเว บเพจด วยภษ HTML เร อง กรสร งแบบฟอร ม Form ค ช แจง แบบทดสอบเป นแบบปรน ย 4 ต วเล อก จ นวน 10 ข อ ใช เวลในกรสอบ 10 นท ค ส ง จงเล อกค ตอบท ถ กต องท ส ดเพ ยงค ตอบเด ยวแล วท เคร องหมย X ลงในกระดษค ตอบ 1. แอตตร บ วต ในข อใด อธ บยถ งว ธ กรส ง ข อม ลไปย งสคร ปต CGI ก. name ข. action ค. method ง. mode 2. แอตตร บ วต ใดระบ URL ของสคร ปต CGI ก. name ข. action ค. method ง. mode 3. ในกรสร งแบบฟอร มเพ อป อนและส ง ข อม ลได อย งสมบ รณ จะต องประกอบด วย ส งใด ก. Database ข. CGI Script ค. Web Server ง. ถ กท กข อ 4. Script CGI น ยมเข ยนด วยภษใด ก. Java Script ข. PHP ค. ASP ง. น ยมท ง PHP และ ASP 5. แบบฟอร มชน ดใดท ผ ใช สมรถเล อก ค ตอบได มกกว 1 ข อ ก. Textbox ข. Radio Button ค. Checkbox ง. Drop-Down Lists 6. ข อม ลแบบใดท เหมะก บกรป อนข อม ล แบบ Radio Button ก. ช วงอย ข. เพศ ค. งนอด เรก ง. ถ กท งข อ ก และ ข 7. แท กใดต อไปน ท ใช ส หร บจ แนกกล ม ข อม ลภยในล สต ก. option ข. optgroup ค. group value ง. label 8. หกต องกรกรอกข อม ลหลย ๆ บรรท ด จะต องใช แท กค ส งใด ก. textbox ข. textarea ค. multi-line ง. list 9. หกต องกรจ ดกล มฟ ลด ป อนข อม ล ให รวมอย ในกล มเด ยวใช แท กค ส งใด ก. fieldset ข. fieldgroup ค. grouping ง. Legend 10. จกข อ 9 จะใช แท กค ส งใด ก หนดช อ ของกล มฟ ลด ข อม ลด งกล ว ก. fieldset ข. fieldgroup ค. grouping ง. legend

31 25 บรรณน กรม กร ว ธ อ ศวค ปตนนท. เร ยนร เทคน คและพ ฒนเว บไซต ด วย HTML5. กร งเทพมหนคร : เน ตด ไซน พ บล ชช ง, ฝ ยต รว ชกรคอมพ วเตอร. กรสร งเว บเพจ (HTML). กร งเทพมหนคร : ซ เอ ดย เคช น, สขคอมพ วเตอร สถบ นส งเสร มกรสอนว ทยศสตร และเทคโนโลย. เอกสรศ กษด วยตนเอง ส หร บคร เทคโนโลย สรสนเทศ เร องท 4 อ นเตอร เน ตละกรสร งเว บเพจ. กร งเทพมหนคร : สถบ นส งเสร มกรสอนว ทยศสตร และเทคโนโลย, ส น นท ส นทรประเสร ฐ. กรสร งส อกรสอนและนว ตกรรมกรเร ยนร ส...กรพ ฒนผ เร ยน. รชบ ร : ธรรมร กษ กรพ มพ, 2547.

32 26 <ภคผนวก>

33 27 เฉลยแบบทดสอบก อนเร ยนและหล งเร ยน กรสร งเว บเพจด วยภษ HTML เร อง กรสร งแบบฟอร ม เฉลยแบบทดสอบก อนเร ยน ข อ 1 ค ข อ 2 ข ข อ 3 ง ข อ 4 ง ข อ 5 ค ข อ 6 ง ข อ 7 ข ข อ 8 ข ข อ 9 ก ข อ 10 ง เฉลยแบบทดสอบหล งเร ยน ข อ 1 ค ข อ 2 ข ข อ 3 ง ข อ 4 ง ข อ 5 ค ข อ 6 ง ข อ 7 ข ข อ 8 ข ข อ 9 ก ข อ 10 ง

34 28 เฉลยแบบฝ กท กษะท 7_1 ข อ 1 <html> <head><title>textbox</title></head> <body> <form action=""> &nbsp &nbsp &nbsp &nbsp ช อ : <input type="text" name="username" maxlength="8" /><br /> นมสก ล : <input type="password" name="password" maxlength="8" /><br /> </form> </body> </html> ข อ 2 <html> <head><title>radio Buttons</title></head> <body> <form action=""> ชอบเล นก ฬ &nbsp&nbsp&nbsp&nbsp:<input type="checkbox" name="x" value="sport" /><br /> ชอบอ นหน งส อ :<input type="checkbox" name="x" value="book" /><br /> ชอบฟ งเพลง&nbsp&nbsp&nbsp&nbsp&nbsp:<input type="checkbox" name="x" value="song" /><br /> </form> </body> </html> ข อ 3 <html> <head><title>radio Buttons</title></head> <body> <form action=""> ชย&nbsp :<input type="radio" name="sex" value="sex1" checked="checked" /><br />

35 29 หญ ง :<input type="radio" name="sex" value="sex2" /><br /> </form> </body> </html> เฉลยแบบฝ กท กษะท 7_2 ข อ 1 <html> <head><title>drop-down Lists</title></head> <body> <form action=" "> โปรแกรมคอมพ วเตอร : <select name="pro" > <option value="non">กร ณเล อก</option> <option value="doc">microsoft Word</option> <option value="xls">microsoft Excel</option> <option value="ppt">microsoft PowerPoint</option> <option value="bmp">paint</option> </select> </form> </body> </html> ข อ 2 <html> <head><title>drop-down Lists</title></head> <body> <form action=" "> โปรแกรมคอมพ วเตอร : <select name="pro" > <option value="non">กร ณเล อก</option> <option value="doc" selected="selected">microsoft Word</option> <option value="xls">microsoft Excel</option> <option value="ppt">microsoft PowerPoint</option>

36 30 <option value="bmp">paint</option> </select> </form> </body> </html> ข อ 3 <html> <head><title>drop-down Lists (Grouping)</title></head> <body> <form action=" "> กร ณเล อกโปรแกรมคอมพ วเตอร : <select name="pro" > <optgroup label="microsoft Office 2013"> <option value="sco1">word</option> <option value="sco2">excel</option> <option value="sco3">powerpoint</option> </optgroup> <optgroup label="accessries"> <option value="edu1">paint</option> <option value="edu2">notepad</option> <option value="edu3">wordpad</option> <option value="edu4">calculator</option> </optgroup> </select> </form> </body> </html>

37 31 เฉลยแบบฝ กท กษะท 7_3 <html> <head><title>สม ครงนออนไลน </title></head> <body> <p align="center"><img src="image/logobts.gif"></p> <form action=""> <fieldset> <legend>ช อผ สม คร</legend><br /> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nb sp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspค น หน ช อ* : <input type="radio" name="prename" value="1" checked="checked" /> นย <input type="radio" name="prename" value="2" /> นง <input type="radio" name="prename" value="3" /> นงสว <input type="radio" name="prename" value="4" /> อ นๆ <input type="text" name="prename2" size="15" /><br /> &nbsp&nbsp&nbsp&nbspช อ-นมสก ล (ภษไทย)* : <input type="text" name="name1" size="35" /><br /> ช อ-นมสก ล (ภษอ งกฤษ)* : <input type="text" name="name2" size="35" /><br /> </fieldset><br /> <fieldset> <legend>ข อม ลใบสม คร</legend><br /> ต แหน งงนท เป ดร บสมคร ณ ป จจ บ น :<br /> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nb sp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&n bsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp& nbsp&nbsp 1. <select name="pro" /> <option value="pro0"> -- กร ณเล อก --</option> <option value="pro1">ช งเทคน ค (ไฟฟ )</option> <option value="pro2">ว ศวกรไฟฟ </option>

38 32 <option value="pro3">เจ หน ท ต อนร บ </option> <option value="pro4">เลขน กร </option> <option value="pro5">ผ จ ดกร </option><br /> </select><br /> ต แหน งท ต องกรสม ครเพ มเต ม<br /> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nb sp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&n bsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp& nbsp&nbsp 1.<input type="text" name="pro101" size="30" /><br /> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nb sp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&n bsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp& nbsp&nbsp 2.<input type="text" name="pro102" size="30" /><br /> </fieldset><br /> <fieldset> <legend>ท อย ผ สม คร</legend><br /> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nb sp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbspท อย ป จจ บ น* <textarea name="address" rows="3" cols="40"></textarea><br /> เบอร โทรศ พท ท ต ดต อได สะดวก* <input type="text" name="name1" size="35" /><br /> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nb sp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp address* <input type="text" name="name2" size="35" /><br /> </fieldset> <input type="submit" value="ส งใบสม คร"> <input type="submit" value="ล งข อ ล"><br /> </form> </body> </html>

39 We bs i t e: w w w. k p k s c h o o l. a c. t h E ma i l : s a mo r n ma l o t ma i l. c o m