บทท2 การสรางฟอรมรบขอมล และการจดการขอมล

วชา การเขยนโปรแกรมบนเวบd(Web-based Programming)

การสรางฟอรมกรอกขอมล

¡ÒÃÊà �Ò§¿oà �Á¡Ão¡¢ �oÁÙÅ㪠�¤íÒÊa觢o§ HTML o´ÂÁÕ a§¹ÕéÙ

ª �o§¡Ão¡¢ �o¤ÇÒÁ (TextField)

� aÊ �ª �o§¡Ão¡ÃËaʼ �Ò¹ (PasswordField)

ª �o§Ãaº¢ �o¤ÇÒÁËÅÒºÃ÷a (TextArea)

»u�ÁµaÇeÅ o¡ Radio

»u�ÁµaÇeÅ o¡ Check Box

ÃÒ¡ÒõaÇeÅo¡ List Box ÃÒ¡ÒõÇeÅo¡ List Box

Êà �Ò§»u�Á·íÒ§Ò¹ Submit ËÃo Reset

2

ชองกรอกขอความ (Text Fields)TextFields 㪠�ÊíÒËÃaºÃaº¤ �Ò¢ �oÁÙż �Ò¹¤Õ �ºoà �´eª �¹ username ª èo Ê¡uÅ ÏÅÏ

è éo´ÂÁÕÃٻ溺¤íÒÊa觴a§¹Õé

T xtFi ld TextFields ม Attribute เพมเตมดงน

Value : คาทตองการใหแสดงในกลองขอความ

Size : กาหนดความกวางของกลองขอความ

Maxlength : กาหนดจานวนตวอกษรสงสดทตองการรบคาMaxlength : กาหนดจานวนตวอกษรสงสดทตองการรบคา

Disabled : กาหนดใหกลองขอความไมสามารถใชงานได

3

ReadOnly : กาหนดใหอานขอความในกลองขอความไดอยางเดยว

ชองกรอกขอความ (TextFields)

ตวอยาง Textfields 溺»¡µi – 㪠�§Ò¹äÁ �ä´ � – o �Ò¹¤ �Òä´ �o �Ò§e´ÕÂÇ

1 เพม-ลบ-แกไข คาใน Textfield ได แตไมเกน 10 ตวอกษร1

2สามารถมองเหน Textfield แตใชงานไมได

2

ไ ไ ใ ไ 3

ไมสามารถ เพม-ลบ-แกไข คาใน Textfield แตอานคาได

ชองกรอกรหสผาน (PasswordField)PasswordField 㪠�ÊíÒËÃaºÃaº¤ �Ò¢ �oÁÙÅ·Õèµ �o§¡Òû �´ºa§¤ �ÒäÁ �ãË �o �Ò¹¤ÇÒÁËÁÒÂä´ �eÁ èo

� � � è � è �¡Ão¡¢ �oÁÙÅŧ㹪 �o§Ãaº¢ �oÁÙÅ o´Â¨aæÊ´§e¤Ã èo§ËÁÒ 淹¢ �o¤ÇÒÁ·Õè» �o¹ eª �¹ ÃËaʼ �Ò¹

ตวอยาง

ผลลพธ -->

5

หมายเหต : Attribute เหมอน textfield

ชองรบขอความหลายบรรทด (TextArea)TextArea 㪠�ÊíÒËÃaºÃaº¤ �Ò¢ �oÁÙż �Ò¹¤Õ �ºoà �´eª �¹ username ª èo Ê¡uÅ ÏÅÏ

è éo´ÂÁÕÃٻ溺¤íÒÊa觴a§¹Õé

Wrap เปนการกาหนดการตดคา หรอขนบรรทดใหมใน TextArea กาหนดคาได

3 แบบดงน

Off : ไมมการตดคา ขอความจะถกพมพตอเนองจนกวาจะกด Enter

Soft : ตดคาแบบขนบรรทดใหมโดยไมตองกด Enter (แบบจรง)

H d ตดคาแบบขนบรรทดใหมโดยไมตองกด E t (แบบหลอก)

6

Hard : ตดคาแบบขนบรรทดใหมโดยไมตองกด Enter (แบบหลอก)

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

µaÇo �Ò§

ผลลพธ

หมายเหต : TextArea เหมาะสาหรบการรบคาขอความทมมากกวา 1 บรรทด

ปมตวเลอก Radio ButtonRadio Button 㪠�ÊíÒËÃaºeÅ o¡¤ �Ò¢o§¢ �oÁÙÅ(ÁÕËÅÒµaÇeÅ o¡æµ �eÅ o¡ä´ �·ÕÅa 1

è é¤ �Ò) o´ÂÁÕÃٻ溺¤íÒÊa觴a§¹Õé

ขอสงเกต : ชอตวแปร (name) จะใชชอเดยวกนทงหมด

แต คาทสง (value) กาหนดคาตางกนตามตวเลอกทกาหนดไว

8

ปมตวเลอก Radio Button

ตวอยางตวอยาง

ผลลพธ -->

ผลลพธ -->

9

ปมตวเลอก CheckBoxCheckBox 㪠�ÊíÒËÃaºeÅ o¡¤ �Ò¢o§¢ �oÁÙÅ(ÁÕËÅÒµaÇeÅ o¡ æÅa eÅ o¡ä´ �ËÅÒ¤ �Ò)

è éo´ÂÁÕÃٻ溺¤íÒÊa觴a§¹Õé

ขอสงเกต : ชอตวแปร (name) จะใชชอตางกนทงหมด และ

คาทสง (value) กาหนดคาตางกนตามตวเลอกทกาหนดไว

10

ปมตวเลอก CheckBox

ตวอยางตวอยาง

ผลลพธ

11

หมายเหต :Check เหมาะสาหรบรายการทมหลายตวเลอก และสามารถเลอกไดมากกวา 1 คา

รายการตวเลอก (ListBox)ListBox 㪠�ÊíÒËÃaºeÅ o¡¤ �Ò¢o§¢ �oÁÙÅ溺¡Å �o§ÃÒ¡ÒõaÇeÅo¡ Popup(ÁÕËÅÒÂ

è éµaÇeÅ o¡ æµ � eÅ o¡ä´ �1 ¤ �Ò) o´ÂÁÕÃٻ溺¤íÒÊa觴a§¹Õé

ขอสงเกต : ชอตวแปร (name) จะใชชอเดยว และคาทสง

( l ) กาหนดคาตางกนตามตวเลอกทกาหนดไว

12

(value) กาหนดคาตางกนตามตวเลอกทกาหนดไว

ปมตวเลอก CheckBox

ตวอยางตวอยาง

ผลลพธ

13

การจดกลมดวย FieldSetFieldSet 㪠�ÊíÒËÃaº¡Òèa ¡Åu�Á¿ �Å´ �» �o¹¢ �oÁÙÅã¹ Form ·ÕèÁÕ

¤ÇÒÁÊaÁ¾a¹¸ �¡a¹ ¨a·íÒãË � Form ÁÕ¤ÇÒÁe» �¹ÃaeºÕºÊǧÒÁ æÅa¼ �㪠�§Ò¹ÊÒÁÒöe¢ �Òã¨æÅa» �o¹¢ �oÁÅä´ �Êa´Ç¡ÁÒ¡¢ é¹ ÁÕû溺¤íÒÊa觼Ù㪧ҹÊÒÁÒöe¢Òã¨æÅ »o¹¢oÁÙÅä´Ê ´ ¡ÁÒ¡¢¹ ÁÃٻ溺¤Òʧ´a§¹Õé

14

การจดกลมดวย FieldSet

ตวอยาง ผลลพธตวอยาง ผลลพธ

15

สรางปมทางาน SubmitButtonSubmit Button 㪠�Ê �§¤ �Ò¢ �oÁÙÅ·aé§ËÁ´¨Ò¡¿oÃ�Áä»Âa§ä¿Å �»ÅÒ·ҧ·Õè¨a

� í è è ä � Õè Õ»ÃaÁÇżŢ �oÁÙŵÒÁ¤íÒÊaè§ <Form action=“ª èoä¿Å �·Õè a»ÃaÁÇżŔ> o´ÂÁÕÃٻ溺¤íÒÊa觴a§¹Õé

Submit Button ดวยรปภาพSubmit Button ดวยรปภาพ

16

ปมทางาน SubmitButton

ตวอยาง

ตวอยาง

17

สรางปมทางาน Reset

Reset Button ใชยกเลกคาขอมลทปอนผานฟอรมทงหมด โดยมReset Button ใชยกเลกคาขอมลทปอนผานฟอรมทงหมด โดยม

รปแบบคาสงดงน

ตวอยาง

18

คาสงรบ-สงขอมลผานฟอรมÃٻ溺¤íÒÊa觿oà �Á <Form>…</Form>

<FORM METHOD=“POSTËÃo GET” ACTION=�URL ËÃo ª èoä¿Å �·Õè¨a»ÃaÁÇżÅ">¢ �oÁÙÅ溺Êoº¶ÒÁ¿oà �Á

</FORM>

Method ¤ oÇi Õ¡ÒÃÊ �§¢ �oÁż �Ò¹¿oà �Á æº �§oo¡e» �¹ Post æÅa GetMethod ¤oǸ¡ÒÃʧ¢oÁÙżҹ¿oÃÁ 溧oo¡e»¹ Post æÅa Get

Action ¤ o¤íÒÊa觷ÕèÃaºu¡ÒûÃaÁÇżÅ(URL ËÃo ª èoä¿Å � php ·Õèµ �o§¡ÒûÃaÁÇżÅ)

19

คาสงสงขอมลผานฟอรมMethod ¤ oÇi Õ¡ÒÃÊ �§¢ �oÁÙż �Ò¹¿oà �Á æº �§oo¡e» �¹ Post æÅa Get

Post e» �¹Çi Õ¡ÒÃÊ �§¢ �oÁÅ·ÕèÁÕ»ÃiÁÒ³ÁÒ¡æ e»¹Ç¸¡ÒÃʧ¢oÁÙÅ·Á»ÃÁÒ³ÁÒ¡æ äÁ �ÊÒÁÒöÁo§eËç¹µaÇæ»ÃæÅa¢ �oÁÙź¹ address bar ä´ �ã � � Õè � � 㪠� $_POST[ตวแปร] Ãaº¢ �oÁÙŨҡµaÇæ»Ã·ÕèÊ �§ÁÒ¨Ò¡¿oÃ�Á

Get Ê �§¢ �oÁÙÅä´ �¤ �o¹¢ �Ò§¹ �o äÁ �e¡i¹ 256 µaÇoa¡Éà e» � i Õ¡ Ê � ¢ � 仡a æ aä �e» � a e»¹Çi ¡ÒÃʧ¢oÁÙÅ仡aº URL æÅaäÁe»¹¤ÇÒÁÅaº 㪠� $_GET[ตวแปร] Ãaº¢ �oÁÙŨҡµaÇæ»Ã·ÕèÊ �§ÁÒ¨Ò¡¿oÃ�Á

20

Ù

คาสงรบขอมลผานฟอรม¡ÒÃÃaº¢ �oÁÙŨҡ¿oà �Á e» �¹¡ÒÃÃaº¤ �Ò¨Ò¡µaÇæ»Ã¢o§ÀÒÉÒ html ·Õè¡íÒ˹´äÇ �µo¹·Õè

è è è èÊà �Ò§¿oà �Á´ �ÇÂe¤Ã èo§Á oÃaº¤ �ÒÃٻ溺µ �Ò§æ « 觡íÒ˹´äÇ � �Ç attribute ·Õèª èoÇ �Ò “name”

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

การรบคาจากตวแปร username คอ

21

ตวอยางการสง-รบขอมลผานฟอรม

html

ลงายๆ)

regi

s.h

อกขอ

มล

rce ไฟ

ล

อรมก

รอ

Sour

(แบบฟ

22

ตวอยางการสง-รบขอมลผานฟอรม

tml

ลงายๆ)

regi

s.ht

อกขอ

มล

าจอไฟล

อรมก

รอ

หนา

(แบบฟ

ใหนกศกษาปรบรปแบบใหเปนระเบยบเองโดยใชตารางเขามาชวย

23

ใหนกศกษาปรบรปแบบใหเปนระเบยบเองโดยใชตารางเขามาชวย

ตวอยางการสง-รบขอมลผานฟอรม

php

สดงผล)

ลre

gis.p

อรมม

าแส

rce ไฟ

ล

ลจากฟอ

Sour

รบขอ

มล(

24

ตวอยาง

Register html iRegister.html Register.php

ใหนกศกษาปรบรปแบบใหเปนระเบยบเองโดยใชตารางเขามาชวย

25

ใหนกศกษาปรบรปแบบใหเปนระเบยบเองโดยใชตารางเขามาชวย

จบบทท 2