ใบความรท 9 การสรางชองรบขอมล

เราคงเคยเหนและเคยใชงานระบบงานบนเวบมาบางแลว ยกตวอยางเชน ระบบการรบสมาชก

ซงจะมแบบฟอรมใหกรอกรายละเอยดตางๆ ซงจะถกน าไปประเมนผลตอไป ระบบตะกรา หรอรถเขนส าหรบใชเลอกซอสนคาทตองการโดยหยบสนคาลงตะกรา ระบบจะท าการค านวณสนคาและราคาเพอน าไปประมวลผล เนอหาในบทนจงกลาวถงการสรางแบบชองรบขอมลดวยภาษา HTML ซงมออบเจกตรบขอมลอยหลายประเภท

ปจจบนมการใชแบบฟอรมในเวบเพจเพอเกบขอมล ตงแตรายละเอยดเกยวกบผทมาเยยมชมเวบเพจ เพอตงแตรายรายละเอยดเกยวกบผมาเยยมชมเวบเพจ การสมครสมาชก ไปจนกระทงการรวบรวมความคดเหนเกยวกบเรองตางๆ ทก าลงอยในความสนใจ เชน แสดงความคดเหน เปนตน

ใน Dreamweaverไดจดเตรยมกลมเครองมอ Formsทใชในการสราวฟอรม โดยเราสามารถน าชองรบขอมล ( Input Object ) เชนText Areas Checkbox และอนๆ ไปวางบนเอกสารฟอรม แตจะตองเขยนสครปต PHP ท างานควบคกบฟอรมดวย เพอใชในการประมวลผลขอมลทไดรบจากแบบฟอรม

ชองรบขอมลตางๆ ใน HTML

ฟอรม (Form)

โดยปกตกอรทจะสรางชองรบขอมลตางๆ เราจะตองท าการสรางฟอรมกอน ซงฟอรจะท าหนาทเปนทรวมของชองรบขอมลตางๆ และทส าคญฟอรมยงท าหนาทก าหนดวธการสงขอมล การระบไฟลทจะสงขอมลไปประมวลผล

รปแบบโคด HTML ของฟอรมเปนดงน

โดยท

name = ระบชอของฟอรม ในสวนนอาจจะไมระบกได

method = ก าหนดวธการสงขอมลไปยงเซรฟเวอร ซงมอย 2 ประเภท คอ

v Get เปนวธการสงขอมลทจะน าคาของชองขอมลรวมไปกบ URL

v Post เปนวธการสงขอมลทตองการใหเปนความลบ คอจะไมเหนคาของชองรบขอมล action = ไฟลทรบขอมลจากฟอรม เปนการระบชอไฟลทจะสงไปเพอท าการประมวลผล โดยน าคาจากชองรบขอมลไปประมวลผลตอไปทไฟล ถา Dreamweaver กท าการการคลกทปม จะปรากฏเสนประ

แสดงขอบเขตของฟอรมสงเกตทบรเวณ Properties ของ Dreamweaver เราสามารถปรบแตงลกษณะของฟอรมไดดงน

Actuon = ระบชอไฟลทฟอรมนจะสงขอมลไปประมวลผล

Method = ระบวธการสงขอมล (Post หรอ GET)

Enctype = ก าหนดประเภทของขอมล เชน ถาเปนการอพโหลดไฟลกจะก าหนด Enctype เปน muctype/form – data ชองรบขอความ (Text Field)เปนชองทใหผใชกรอกขอมล หรอราบละเอยด เชน เปนชองรบชอ – นามสกล, ทอยของสมาชกเปนตน รปแบบโคด HTML ของชองรบขอความเปนดงน

Type = “text” ระบวาเปน ชองรบขอความ

Name = ชอของ Text Field ระบชอของชองรบขอความ ใหตงชอใหสอความหมายกบขอมลทจะจดเกบในชองนเชนNameคอชองรบขอมล ชอ และหามตงชอซ ากน ถามชองรบขอความหลายตว

ถาใช Dreamweaver กคลกทปม (Text Field) จะปรากฏชองรบขอความขนมา ซงจะตองสรางชองรบขอความนใหอยภายในฟอรม

สงเกตทบรเวณ Properties ของ Dreamweaver เราสามารถปรบแตงลกษณะของชองรบขอความไดดงน

Char width ระบขนาดความกวางของชองรบขอความ

Max chars ระบจ านวนตวอกษรสงสดทชองรบขอความสามารถรบได

Init val ระบคาเรมตนในชองรบขอความทตองการใหแสดง

Type

v Single line ลกษณะของชองรบขอความจะเปนแบบรบขอความไดเพยงบรรทดเดยว

v Multi line ลกษณะของชองรบขอความจะเปนแบบรบขอความไดหลายบรรทด

vPassword ลกษณะของชองรบขอความจะใชส าหรบการรบคารหสผาโดยสงทกรอกลง ในชองรบขอความนจะเปนจดวงกลมท าใหอานขอความดงกลาวไมได

ชองรบขอความแบบหลายบรรทด (Text Area)

ลกษณะเหมอนกบชอง (Text Field) แตสามารถรบขอความไดหลายบรรทด โดยถาขอความทกรอกลงไปมจ านวนหลายบรรทดมากกวาความสงของชองรบขอความ หรอขอความมความยาวมากกวาความกวางของชองรบขอความกจะปรากฏ Scroll bar ขนมาเพอใชในการเลอนดขอมล

ถาใช Dream weaver กจะท าการคลกทปม (Text area) จะปรากฏชองรบขอความแบบหลายบรรทดขนมา ซงจะตองสรางชองรบขอความแบบหลายบรรทดนใหอยภายในฟอรม

สงเกตทบรเวณ Properties ของ Dreamweaver เราสามารถปรบแตงลกษณะของชองรบขอความแบบหลายบรรทดไดดงน

Char width ระบขนาดความกวางของชองรบขอความแบบหลายบรรทด

Num Lines ระบจ านวนบรรทดของขอความโดยไมปรากฏ scroll bar

กลองตวเลอก (Check box)

กลองตวเลอกกนเปนลกษณะเปนชองสเหลยมเลกๆ ใชส าหรบการคลกเลอกรายการทตองการ โดยเราสามารถสรางกลองตวเลอกไดหลายกลอง และในการเลอกรายการตางๆ สามารถท าการเลอกไดหลายรายการพรอมกน ถามการเลอกทรายการใดภายในกลองตวเลอกนนกจะมเครองหมายถ

โดยท

Type = “checkbox” การระบวานคอ Input object กลองตวเลอก

name = ชอของกลองตวเลอก ระบชอของกลองตวเลอก

value = คาของกลองตวเลอก ระบคาของกลองตวเลอกถามการเลอกกลองตวเลอกน

ถาใช Dream weaver กท าการคลกทปม (Check box) จะปรากฏกลองตวเลอกขนมา ซงจะตองสรางกลองตวเลอกนใหอยภายในฟอรม

สงเกตทบรเวณ Properties ของ Dream weaver เราสามารถปรบแตงลกษณะของกลองตวเลอกไดดงน Checked value ระบคาของกลองตวเลอกแตละตว

Initial_state

v Checked ระบใหกลองตวเลอกน มการเลอกกจะปรากฏเครองหมายถกขน

v Unchecked ระบใหกลองตวเลอกนไมมการเลอก กลองตวเลอกกจะวาง

ปมตวเลอก (Radio Button)

ปมตวเลอกจะมลกษณะเปนวงกลมเลกๆ ใชส าหรบการคลกเลอกรายการทตองการ โดยเราสามารถสรางปมตวเลอกไดหลายปม แตในการเลอกรายกายตางๆ สามารถท าการเลอกไดเพยงรายการใดรายการหนงเทานน ถามการเลอกรายการทปมตวเลอกใดภายในวงเลบนนกจะมเครองหมายจดสปรากฏขน

รปแบบโคด HTML ของปมตวเลอกเปนดงน

type = “radio” ระบวาเปนปมตวเลอก

name = ชอของปมตวเลอก ระบชอของปมตวเลอก

value = คาของปมตวเลอก ระบคาของปมตวเลอก

ถาใช Dream weaver กท าการคลกทปม (Radio Button) จะปรากฏปมตวเลอกขนมา ซงจะตองสรางปมตวเลอกนใหอยภายในฟอรม

สงเกตทบรเวณ Properties ของ Dream weaver เราสามารถปรบแตงลกษณะของปมตวเลอกไดดงน

Checked value ระบคาของปมตวเลอกแตละตว Initial state

v Checked ระบใหปมตวเลอกนมการเลอกกจะปรากฏจดสปรากฏขน v Unchecked ระบใหปมตวเลอกนไมมการเลอก ปมตวเลอกกจะวาง

กลองรายการ (List Box)

กลองรายการจะมลกษณะเปนกลองสเหลยมใชบรรจรายการตวเลอกตางๆ ถาจะเลอกรายการใดกท าการคลกใหกลองนเลอนขอมลออกจากกลอง

รปแบบโคด HTML ของปมตวเลอกเปนดงน

ถาใช Dream weaver กท าการคลกทปม (List/Menu) จะปรากฏกลองรายการขนมา ซงจะตองสรางกลองรายการนใหอยภายในฟอรม

ชองรบชอไฟล (File Fied)

ชองรบชอไฟลใชส าหรบการเลอกไฟล โดยมกใชในการเลอกไฟล เพออพโหลด(Upload) ไฟลไปยงเซรฟเวอร ลกษณะเปนเหมอนชองรบขอความ แตจะมปม Browse อยขางๆ ดวยเพอใชในการเปดเขาไปเลอกไฟล

รปแบบโคด HTML ของชองรบชอไฟลเปนดงน

ถาใช Dream weaver กท าการคลกท (File Fied) จะปรากฏชองรบชอไฟลขนมา ซงจะตองสรางชองรบชอไฟลนใหอยภายในฟอรม

สงเกตทบรเวณ Properties ของ Dream weaver เราสามารถปรบแตงลกษณะของชองรบไฟลไดดงน

Char width ระบขนาดความกวางของชองรบชอไฟล

Max chars ระบจ านวนตวอกษรทชองรบชอไฟลสามารถรบได

ปมค าสง (Button)

การรบขอมลทผใชไดท าการกรอกหรอเลอก และน าไปประมวลตอไปจะตองใชปมค าสงเพอท าการสงขอมลน าเขาตางๆ เหลานน (Submit) นอกจากการสงขอมลปมค าสงยงสามารถใชท าการยกเลกขอมลน าเขตางๆ ไดอกดวย

ถาใช Dream weaver กท าการคลกทปม (Button) จะปรากฏปมค าสงขน ซงจะตองสรางปมค าสงนใหอยภายในฟอรม

สงเกตทบรเวณ Properties ของ Dream weaver เราสามารถปรบแตงลกษณะของปมค าสง ไดดงน

Label ใชพมพขอความทตองการใหปรากฏบนปมค าสง

Action

v Submit form ใชสรางปมค าสงประเภทขอมล

v Reset form ใชสรางปมค าสงประเภทยกเลกขอมล

v None ใชสรางปมค าสงประเภทธรรมดา

การสงขอมล

หลงจากเราไดท าการสรางฟอรมซงประกอบไปดวยฟอรมรบขอมลตางๆ แลวล าดบถดไปเราจะท าการเขยนโปรแกรม เพอท าการรบขอมลน าเขาจากฟอรม และน าไปประมวลผลตอไป

ในสอนของโปรแกรม memberdata.php เราจะท าการเขยนโปรแกรมภาษา PHP เพอรบคาทผใชน าเขาโดยมหลกการงายๆ คอใหจ าชอของชองรบขอมลแตละตวจากไฟล HTML โดยคาของฟอรมรบขอมลแตละตวจะเกบไวทตวแปรชอเดยวกบชอของชองรบขอมล ดงกลาวในการแสดงผลลพธวามขอมลน าเขาคออะไร เราอาจใชค าสง echo เพอพมพคาของตวแปรตางๆ ซงตวแปรตางๆ เรากเพมเตมเครองหมาย $ หนาชอของชองรบขอมล

การรวมไฟล HTML และ PHP

ในการเขยนโปรแกรมเราอาจจะท าการรวมไฟลทงสองเปนไฟลเดยวกได พจารณาลกษณะการท างานของการท างานของการรวมไฟล HTML และ PHP