บทท 13 สรางฟอรมรบขอมล (Form)

นอกจากการใชเวบเพจเพอน าเสนอเนอหาตางๆแลว คณกสามารถใชเวบเพจเพอรบขอมลจากผชมเขามาเกบหรอประมวลไดเชนกน ตวอยางเชน การใชแบบสอบถามหรอแบบส าหรบ (poll, vote),สมดแสดงความคดเหน-ทกทาย-ตชมเวบไซต (guestbook), การลงทะเบยนสมครสมาชก (registration form) , กระดานสนทนา (webboard) และบนทกสวนบคคล (blog) เปนตน ซงในเวบเพจเหลานองคประกอบทใชรบขอมลจากผชมกคอ“ฟอรม” (form) นนเอง รจกกบฟอรม (Form) ฟอรม คอองคประกอบบนเวบเพจทท าหนาทรบขอมลจากผชม แลวสงไปยงเวบเซรฟเวอรเพอประมวลผลอยางใดอยางหนง ภายในฟอรมจะประกอบดวยออบเจค (Form Object) ตางๆ ทเปนตวรบขอมล ซงมหลายชนด เชน Text Field ,Checkbox และ Radio Button เปนตน นอกจากนภายในฟอรมยงอาจจะมองคประกอบส าหรบตกแตงหรอใหค าอธบาย ซงสวนนกคอเนอหาปกตของเวบเพจนนเอง ไมวาจะเปนขอความ,ภาพกราฟก,ตาราง ฯลฯ หลกการท างานของเวบในการรบขอมลจากผชม เมอผชมกรอกขอมลลงในฟอรมบนเวบเพจแลวคลกปม Submit ขอมลทงหมดจะถกสงไปยงเวบเซรฟเวอร ซงโปรแกรมสครปตหรอแอพพลเคชนทก าหนดไวจะน าขอมลดงกลาวไปประมวลผลดงนนการท างานของฟอรมจะตองมองคประกอบเพมขนจากเวบเพจปกต 2 อยางคอ

ฟอรมบนเวบเพจ เพอใชรบขอมล โปรแกรมบนเวบเซรฟเวอร เพอประมวลผลขอมลและสงผลลพธกลบไปยงผชม

โปรแกรมส าหรบประมวลผลขอมลจากฟอรม การประมวลผลขอมลจากฟอรมจะขนกบความตองการของงานแตละอยาง ดงนนจงตองใชโปรแกรมทถกเขยนมาโดยเฉพาะ โดยเวบเซรฟเวอรจะเปนเพยงตวกลางทคอยรบสงขอมลใหเทานนโปรแกรมดงกลาวจะใชท างานอะไรและเขยนขนดวยภาษาใดกได แตสวนใหญแลวมกนยมใชภาษาประเภททเรยกวา “สครปต” (script) เชน PHP,ASP เปนตน แตถาคณไมใชนกเขยนโปรแกรมกสามารถใชวธอนๆตอไปนแทน ใชบรการของเวบเซรฟเวอร เวบเซรฟเวอรแบบทตองเสยคาบรการ มกจะมโปรแกรมหลกๆทจ าเปนใหใชอยแลว เชน โปรแกรมนบจ านวนผชม (counter), โปรแกรมทรบขอมลแลวสงเปนอเมล (form-to-mail หรอe-mail form), เวบบอรด (webboard) และระบบซอขายสนคา (shopping cart หรอ e-commerce) สวน

เวบเซรฟเวอรแบบทเปนบรการฟรกอาจมโปรแกรมบางอยางใหใชเชนกน ส าหรบรายละเอยดวธตดตงและใชงานจะสอบถามไดจากผดแลระบบของเวบเซรฟเวอรนนๆ ใชบรการส าเรจรป โปรแกรมบางอยางซงนยมใชกนทวไป จะมผใหบรการทไดเตรยมฟอรมและโปรแกรมส าเรจรปไวแลวบนเซรฟเวอรของเขา ถาคณตองการใชกเพยงแคสมครเปนสมาชก แลวสรางลงคจากเวบเพจของคณไปยง URL ทเขาก าหนดให บรการทมใหใชกเชน form-to-mail, blog, webboard และ poll เปนตน ส าหรบผใหบรการฟรทนาสนใจไดแก www.thaimisc.com, www.212cafe.com และwww.buildboard.com หาโปรแกรมมาตดตงใชงานเอง บนอนเทอรเนตมโปรแกรมตางๆใหเลอกใชมากมายทงแบบแจกฟรและเสยเงน แตกอนอนคณตองตรวจสอบวาเวบเซรฟเวอรของคณสนบสนนภาษาทใชพฒนาโปรแกรมดงกลาว และมองคประกอบทจ าเปนตดตงไวครบหรอไม เพราะผใหบรการเวบเซรฟแตละราย หรอแผนบรการแตละแบบ จะมรายละเอยดทแตกตางกน (เชน เซรฟเวอรระบบ Linux มกสนบสนนเฉพาะภาษา PHP โดยไมสนบสนน ASP) นอกจากนคณยงตองมความรเกยวกบระบบของเวบเซรฟเวอรบางซงจ าเปนในการตดต งโปรแกรมใหท างานได คณสามารถหาโปรแกรมฟรไดจากเวบไซต เชน www.thaimisc.com และwww.hotscripts.com องคประกอบและขนตอนการสรางฟอรม ฟอรมบนเวบเพจจะประกอบดวยสวนตางๆ ดงน ตวฟอรม (Form) เปนโครงสรางทก าหนดขอบเขตของฟอรม,โปรแกรมทจะใชประมวลผลและว ธ ส งขอมลไปย ง เวบ เ ซ รฟ เวอ ร (แทก ทใช คอ <form>…</form>) ใน Dreamweaver ขอบเขตของฟอรมจะปรากฏเปนกรอบเสนประสแดงบนวนโดว Document (ดรปหนาถดไป) ฟอรมออบเจค (Form Object) เปนองคประกอบส าหรบใชสรางฟลดเพอรบขอมลจากผชมโดยมใหเลอกหลายชนดขนกบลกษณะและเงอนไขของขอมลนน ปม Submit และ Reset ปม Submit ใชส าหรบสงขอมลจากฟอรมไปยงเวบเซรฟเวอร สวนปม Reset ใชลางขอมล (ทผชมกรอกไวในฟอรม) กลบเปนคาเรมตน องคประกอบอนๆ คอเนอหาปกตของเวบเพจทถกน าไปใสไวในฟอรม เชน ค าอธบายวธใชฟอรม,ภาพกราฟกส าหรบตกแตง และตารางทชวยจดต าแหนงของออบเจคตางๆใหสวยงาม การสรางฟอรมมขนตอนหลกๆ คอ

1. สรางตวฟอรม พรอมทงก าหนดคณสมบต เชน โปรแกรมทจะใชประมวลผลและวธสงขอมล 2. วางออบเจคตางๆลงในฟอรม โดยเลอกชนดออบเจคตามลกษณะขอมลพรอมทงใสค าอธบาย 3. ปรบแตงคณสมบตของออบเจคแตละชนตามตองการ 4. วางองคประกอบอนๆเพอตกแตงฟอรมใหสวยงาม 5. ก าหนดวธตรวจสอบความถกตองของขอมลแตละฟลดทผชมกรอก และทดสอบดวยบราวเซอร 6. อพโหลดเวบเพจขนเวบเซรฟเวอร และทดสอบการประมวลผลของโปรแกรม ตวอยางการสรางฟอรม ในทนจะขอยกตวอยางการสรางฟอรมส าหรบรบสมครสมาชกของเวบไซต โดยฟอรมนจะท าหนาทรวบรวมขอมลตางๆของผชม ซงขอมลแตละอยางจะเหมาะกบฟอรมออบเจคแตละชนดแตกตางกนออกไป สรางตวฟอรม วางฟอรมบนเวบเพจ

1.คลกวางเคอรเซอรตรงต าแหนงทจะสรางฟอรม

2.คลกปม Form บนแทบ Forms ของพาเนล Insert (หรอเลอกค าสง Insert >Form>Form)

รปท 2.137 การสรางตวฟอรม

เสนประสดงซงแสดงขอบเขตของฟอรมบนเวบ

เพจ

ก าหนดคณสมบตของฟอรม หลงจากทคณสรางฟอรม บนพาเนล Properties จะแสดงคณสมบตตางๆใหปรบแตงไดดงรป(ส าหรบฟอรมทสรางไวแลว คณจะเลอกไดโดยคลกกรอบเสนประสแดง หรอแทก <form>บน Tag Selector) ชอฟอรม URL ของโปรแกรมก าหนดวนโดวหรอเฟรม ทใชประมวลผลขอมลส าหรบแสดงผลลพธ

วธสงขอมลไปยงเวบเซรฟเวอร วธเขารหสขอมล รปท 2.138 ก าหนดคณสมบตของฟอรม Form ID ชอฟอรม (ถาบนเวบเพจเดยวกนมหลายฟอรม ตองตงชอใหแตกตางกน) Action ระบ URL ของโปรแกรมทจะใชประมวลผลขอมลจากฟอรม ซงหากโปรแกรมอยในเวบไซตเดยวกบฟอรมคณกคลก เพอเลอกไฟล หรอระบเฉพาะชอไฟลได เชนLogin.aspxแ ต ถ า อ ย บ น เ ว บ ไ ซ ต อ น ก จ ะ ต อ ง ร ะ บ แ บ บ เ ต ม ร ป เ ช น http://www.myweb.com/board/post.aspx Method วธสงขอมลจากฟอรมไปยงเวบเซรฟเวอร ซงการเลอกแบบใดจะขนอยกบโปรแกรมทใชประมวลผลขอมล Default ไมระบ(ขนกบบราวเซอร ซงโดยทวไปจะเปนแบบ Get) Get สงขอมลโดยน าไปตอทาย URL ของโปรแกรมทใชประมวลผล POST สงขอมลไปกบ HTTP request (มกใชกบขอมลทมขนาดใหญหรอขอมลทตองการรกษาความปลอดภย) Emctype วธเขารหสขอมล (ปกตควรใช application/ x-www-form-urlencode รวมกบ method แบบ POST ยกเวนกรณฟอรมทมการอพโหลดไฟลใหใชแบบ multipart/form-data) Target ก าหนดชอวนโดวสหรอเฟรมส าหรบแสดงผลลพธ หลงจากทโปรแกรมประมวลผลเรยบรอยแลว

จดโครงสรางฟอรมดวยตาราง คณสามารถใชตารางชวยจดโครงสรางส าหรบวางฟอรมออบเจคและองคประกอบอนๆใหเปนระเบยบวธสรางตารางนท าไดเหมอนบนเวบเพจปกต เพยงแตใหคณวางเคอรเซอรไวภายในฟอรมกอนทจะสรางเทานน ฟอรมออบเจคชนดตางๆ ฟอรมออบเจคมหลายชนด ซงแตละชนดกมคณสมบตทเหมาะกบลกษณะขอมลทแตกตางกนไป (รายละเอยดจะอธบายจะอธบายในหวขอของออบเจคชนดนนๆ) การวางออบเจคเหลานลงในฟอรมท าไดโดยคลกปมบนแทบforms ของพาเนล Insert ดงรป หรอเลอกค าสง Insert>form

(การใชงานออบเจคกลม Spry หวขอ “สรางฟอรมทมการตรวจสอบขอมล ดวย Spry Validation”)

รปท 2.139 ฟอรมออบเจคชนดตางๆ รบขอความดวยText Fieldและ Textarea Text Field และ Textarea เปนฟอรมออบเจคทใชส าหรบขอมลประเภทตวอกษรหรอขอความ Text Field ใชรบขอความสนๆทมเพยงบรรทดเดยว เชน ชอ-สกล, รหสผาน หรออเมลแอดเดรส Textarea ใชรบขอความทยาวมากกวา 1 บรรทด เชน ทอย หรอความคดเหน

วาง Text Field หรอ Textarea 1. คลกภายในฟอรม ตรงต าแหนงทจะวาง Text Field หรอ Textare

2. คลก Text Field หรอ Textare 3. คลก Cancel

ก าหนดคณสมบตบนพาเนล Properties

รปท 2.140 การวาง Text Field หรอ Textarea คณสมบตของ Text Field และ Text area ความกวางของฟลด ชอฟลด จ านวนตวอกษรสงสด/จ านวนบรรทด

ประเภทฟลด เรมตนท แสดงในฟลด

รปท 2.141คณสมบตของ Text Field หรอ Textarea

Textfield ชอฟลด และเปนชอตวแปรซงจะถกสงไปยงเวบเซรฟเวอรพรอมกบคาทผชมกรอก Char widtj ความกวางของฟลดทปรากฏบนฟอรม (เปนจ านวนตวอกษรโดยประมาณแตผชมสามารถพมพขอความทยาวกวาคานได) Type ประเภทฟลด Single Line ก าหนดใหฟลดนเปน Textfield ซงรบขอความไดเพยงบรรทดเดยว

Multi Line ก าหนดใหฟลดนเปน Textarea ซงสามารถรบขอมความไดหลายบรรทด Password ใชส าหรบขอมลทตองการใหเปนความลบ เชน รหสผาน Max chars จ านวนตวอกษรสงสดทผชมสามารถพมพได (กรณเลอก Type แบบ Single Line) Num Lines ความสงของฟลด เปนจ านวนบรรทด (กรณเลอก Type แบบ Multi Line)

Init val คาเรมตนทแสดงในฟลด คณอาจจะใชขอความทผชมสวนใหญตองการกรอบอยแลวหรอใสค าแนะน าการกรอกขอมลในฟลดนกได คณสมบตเฉพาะของ Textarea

Wrap วธการขนตนบรรทดใหมกรณรบขอความหลายบรรทด (เมอผชมพมพขอความจนสดความกวางบของฟลด)

Default ไมระบ (ขนกบการท างานของบราวเซอร) Off ผชมตองกดคย เพอบรรทดใหม Virtual ใหขนบรรทดใหมอตโนมต โดยตวควบคมการขนบรรทดใหมจะไมถกสงไปยง

เวบเซรฟเวอร

Physical ใหขนบรรทดใหมอตโนมต โดยตวควบคมจะถกสงไปยงเวบเซรฟเวอร ดวย

ENTER

1. คลกขวาท Textarea เลอกค าสง Edit Tag <textarea>

รปท 2.142คณสมบตเฉพาะของ Textarea

สรางฟลดรหสผาน ฟลดรหสผานคอ Text Field แบบหนงทใชส าหรบรบขอมลซงตองการ ใหเปนความลบ

โดยบราวเซอรจะแสดงเครองหมาย หรอ * แทนตวอกษรแตละตวทผชมกรอก เพอไมใหผอนอานได

รปท 2.143 การสรางฟลดรหสผาน

สรางฟลดตวเลอกชนดตางๆ นอกจากการใหผชมกรอกขอมลเองผาน Text Field หรอ Textarea แลว คณอาจจะใหผชมเลอกขอมลจากหวขอหรอตวเลอกตางๆทก าหนดไวกได โดยฟลดตวเลอกทสามารถใชในฟอรมมอยหลายชนดดงน

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

หวขอกได (แลวแตออปชนทก าหนด)

2. คลกปม Text Field 3. ก าหนดคณสมบตบนพาเนล

Perperties

2. เลอกรปแบบ

1.คลกภายในฟอรม ตรงต าปหนงทจะวางฟลดรหสผาน

4.เลอกประเภทเปน Password

Jump Menuใชสรางไฮเปอรลงคทมลกษณะเปนเมน (ดบทท 05 หวขอ “สราง Jump Menu”) สรางฟลดตวเลอกแบบ Checkbox

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

เนองจากcheckbox แตละหวขอคอตวแปร 1 ตว ดงนนภายในฟอรมเดยวกนถามหลายหวขอ (ไมวาจะเปนเรองเดยวกนหรอไม) คณตองตงชอใหแตกตางกน

1. คลกภายในฟอรม ตรงต าแหนง ทจะวาง Checkbox

2. คลกปม Checkbook

3. ก าหนดคณสมบตบนพาเนลProperties

รปท 2.144 การสรางฟลดตวเลอกแบบ Checkbox

คณสมบตของ checkbox Checkbox name ชอฟลด และเปนชอตวแปรซงจะถกสงไปยงเวบเซรฟเวอรพรอมกบคา

ในชอง Checkboxvalue ถาฟลดนถกเลอก Checkboxvalue คาของฟลด ซงจะถกสงไปยงเวบเซรฟเวอรเมอฟลดนถกเลอก Initial state สถานะเรมตนของฟลด

- Checked ใหฟลดถกเลอกไวกอน - Unchecked ใหฟลดไมถกเลอก

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

1.คลกภายในฟอรมตรงต าแหนงทจะวาง Radio Button 2. คลกปมRadio Button

3. ก าหนดคณสมบตบนพาเนล Properties

รปท 2.145สรางฟลดตวเลอกแบบ Radio Button

คณสมบตของ Radio Button Radio Button ชอฟลด และเปนชอตวแปรซงจะถกสงไปยงเวบเซรฟเวอรพรอมกบคาในชอง Checked value ของหวขอทถกเลอก Checked value คาของฟลดซงจะถกสงไปยงเวบเซรฟเวอร Initial state สถานะเรมตนของ ตวอยางการก าหนดคณสมบต

รปท 2.146การก าหนดคณสมบต

สรางฟลดตวเลอกแบบ Radio Button ดวย Radio Group เพอความสะดวกในการสรางฟลดแบบ Radio Group เขามาชวยสรางไดดงน 1. คลกตรงต าแหนงทจะวาง Radio Button

3.ตงชอฟลด4. คลกแลวพมพค าอธบายตวเลอก

5. คลกแลวพมพคาของตวเลอกน 7. คลกเพอเพมตวเลอก แลวพมพค าอธบายและคา เชนเดยวกบขนตอนท 6 จนกวาจะไดหวขอครบ

9. คลก

รปท 2.147สรางฟลดตวเลอกแบบ Radio Button ดวย Radio Group ออปชนวธจดเลยเอาทของ Radio Group Line breaks (<br> tags)แยกตวเลอกแตละหวขอออกจากกนดวยการขนบรรทดใหม Table แยกตวเลอกแตละหวขอออกจากกนโดยใชตาราง สรางฟลดตวลอกแบบ Select (List /Menu)

List /Menu เปนฟลดตวเลอกทแสดงผลได 2 ลกษณะ คอ List แสดงรายการไดหลายบรรทด และผชมสามารถเลอกไดคราวละหลายหวขอ นอกจากนถาจ านวนหวขอมมากกวาความสงของฟลด กจะปรากฏสโครลบารส าหรบใชเลอนรายการได

2. คลกปม Radio

Grop

6. คลกแลวพมพค าอธบายและคาของตวเลอกถดไป

8. เลอกวธจดเลยเอาท

Menu (หรอเรยกแบบเตมๆวา drop – down menu)แสดงรายการไดบรรทดเดยวและผชมจะเลอกไดเพยงหวขอเดยวเทานน โดยคลกทปม แลวเลอนไปคลกทหวขอทตองการ

รปท 2.148การสรางฟลดตวลอกแบบ Select (List /Menu)

1. คลกตรงต าแหนงทจะวาง Select

(List/Menu) 2. คลกปม Select (List/Menu)

3. คลก

4. คลกแลวเลอกพมพค าอธบายตวเลอก

5. คลกแลวพมพคาของตวเลอกน

6. คลกเลอกเพมตวเลอก 9. คลก

7.คลกแลวพมพค าอธบายและคาของตวเลอกถดไป 8. ท าซ าขนตอนท 6-7 จนไดตวเลอกครบตามตองการ

10. ก าหนดคณสมบตบนพาเนล Properties

คณสมบตของ Select (List /Menu) Select ชอฟลด และเปนชอตวแปรซงจะถกสงไปยงเวบเซรฟเวอรพรอมกบคาทผชมเลอก Type เลอกประเภทฟลดเปน Menu หรอ List ซงกรณเลอกเปน List จะมออปชนเพมเตมคอ Height ความสงของฟลด (เปนจ านวนบรรทด) Allow multiple ยอมใหผชมเลอกคราวละหลายหวขอได(โดยกด Ctrl หรอ Shift คางไวแลวคลกทแตละหวขอ) Initially selected ใชก าหนดตวเลอกทเปนคาเรมตนของฟลด อพโหลดไฟลดวย File Field File Field เปนฟอรมออบเจคส าหรบใหผชมเลอกไฟลทอยในเครองของตนเพออพโหลดไปยงเวบเชรฟเวอร การใชฟลดชนดนมเงอนไขคอ

วธสงขอมล(Method) ของฟอรมตองเปนแบบ PODT เทานน วธเขารหสขอมล (Enctype)ของฟอรมตองเปนแบบ multipart/form-data ตองมโปรแกรมประมวลบนเชรฟเวอรทจะคอยรบไฟล และก าหนดวาจะน าไฟลทถกอพ

โหลดนนไปเกบไวทไหนและภายใตชออะไร

รปท 2.149 อพโหลดไฟลดวย File Field

1. คลกตรงต าแนงทจะวางฟลด

2. คลกปม File Field

3. ก าหนดคณสมบตบนพาเนล

Properties

คณสมบตของ File Field FileField name ชอฟลด และเปนตวแปรทเกบชอไฟลซงจะถกสงไปยงเวบเชรฟเวอร Char width ความกวางของฟลดทปรากฏบนฟอรม Max chars ความยาวของชอไฟลและพาธ สงขอมลทมคาคงทดวย Hidden Field Hidden Field ใชส าหรบก าหนดตวแปรทเปนคาคงทและซอนไวไมใหปรากฏบนฟอรมโดยตวแปรนจะถกสงไปประมวลผลรวมกบขอมลอนๆทผชมกรอก

รปท 2.150การสงขอมลทมคาคงทดวย Hidden Field สรางปมดวย Button และ Image Field สรางปมธรรมดาดวย Button

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

1.คลกตรงต าแหนงทจะวางฟลด (ทจดใดกไดในฟอรม เพราะไมมผลตอการท างานและไมแสดงใหผชมเหน)

3. ก าหนดคณสมบตบนพาเนล

Properties

2. คลกปม Hidden Field

รปท 2.151การสรางปมธรรมดาดวย Button

คณสมบตของ Button Button name ชอฟลด และเปนชอตวแปรซงจะถกสงไปยงเวบเชรฟเวอรพรอมกบคาของปม Value คาของปมซงจะถกสงไปยงเวบเชรฟเวอร รวมทงเปนขอความส าหรบแสดงบนปมดวย Action หนาทของปม Submit form ใชเปนปม Submit ส าหรบสงขอมล Reset form ใชเปนปม Reset ส าหรบลางขอมลในฟอรมกลบเปนคาเรมตน None ไมก าหนดหนาท สรางปมรปภาพดวย Image Field Image Field เปนเครองมอส าหรบน าภาพกราฟกมาใชแทนปม Submit เพอใหฟอรมดสวยงามขน

1. คลกตรงต าแหนงทจะวางฟลด

3. ก าหนดคณสมบตบนพาเนล Properties

2. คลกปมButton

1. คลกตรงต าแหนงทจะวาง

รปท 2.152การสรางปมรปภาพดวย Image Field ใสค าอธบายฟลดดวย Label Label เปนเครองมอทใชส าหรบใสค าอธบายก ากบฟลตตาง ๆ โดยมขอดกวาขอความธรรมดาคอฟลดบางชนด เชน Checkbox การคลกท Label จะใหผลเหมอนคลกท Checkbox โดยตรง ซงจะท าใหผชมใชฟอรมไดงายขน การใสค าอธบายฟลดดวย Label ท าได 2 วธคอใชออบเจค Label วธนโปรแกรมจะสรางเฉพาะตวแทก<label></label>ให จากนนคณจะตองพมพแกไขค าสงใหสมบรณเอง ใชไดอะลอกบอกซ Input Tag Accessibility Attributes หากคณเปดการแสดงไดอะลอกซบอกซ Input Tag Accessibiltty Attributes ไว กจะสามารถใสค าอธบายไดทนทขณะทวางฟลดแตละฟลด ซงวธนโปรแกรมจะสรางค าสง HTMLทสมบรณใหโดยอตโนมต จดกลมฟลดดวย Fieldset Fieldset เปนเครองมอทใชจดกลมฟลดตางๆบนฟอรมตามความสมพนธ เพอใหดเปนระเบยบและชวยใหผชมเชาใจไดงายขน

2. คลกปม Image

Field

3. เลอกไฟลภาพทตองการ

3. ก าหนดคณสมบตบนพาเนล

Properties

สรางฟอรมเพอสงอเมลแบบงายๆ ตามปกตการจดการขอมลจากฟอรมจะตองอาศยโปรแกรมบนเวบเชรฟเวอร แตยงมฟอรมอกแบบหนงซงสามารถท างานไดเอง คอฟอรมทรบขอมลจากผชมแลวสงเปนอเมลไปยงแอดเดรสทระบโดยอาศยการท างานของโปรแกรมสงอเมลบนเครองของผชม สรางฟอรมคนหาขอมลบนอนเทอรเนต ถาตองการใหผชมเวบไซตของคณสามารถคนหาขอมลจากอนเทอรเนตกท าไดงายๆ โดยสรางฟอรมรบขอความ และก าหนด Action ใหสงขอมลนนไปคนหาท search engine ยกเลกความเชอมโยงระหวางส าเนากบไลบรารไอเทม ใชในกรณทคณตองการแกไขส าเนาชนใดชนหนงของไลบรารไอเทม โดยไมใหสงถงเวบเพจอนๆทเรยกใชไอเทมเดยวกน ซงเมอยกเลกการเชอมโยงแลวส าเนานนจะเปลยนเปนเนอหาปกตของเวบเพจและไมเกยวของกบไลบรารไอเทมตนฉบบอกตอไป ปรบปรงเวบเพจภายหลงการแกไขเทมเพลตและไลบรารไอเทม เมอคณแกไขเทมเพลตและไลบรารไอเทมแลวสงบนทกขอมล โปรแกรมจะสอบถามวาตองการปรบปรงเวบเพจตางๆทเรยกใชเทมเพลตและไลบรารไอเทมเหลานนทนทหรอไม ถาคลกปม Don’t Update การปรบปรงจะไมเกดขนแตคณสามารถสงปรบปรงเองภายหลงไดเลนมลตมเดยเวบเพจ (Web Multimedia)