SlideShare a Scribd company logo
1 of 19
หน่วยที่ 9
การสร้างฟอร ์ม
ารสร้างเว็บเบื้องต้น
รหัส 20901-2003
เครื่องมือในการสร้างฟอร์ม
ฟิ
ลด์
ก
รอกข้
อ
ความแบบหลายบรรทั
ด
รายการแบบเชื
่
อ
มโยง
ปุ่
มกด
ฟิ
ลด์
จ
ั
ด
กลุ
่
ม
ฟอร์
ม
Spry
แบบต่
า
งๆ
ฟิ
ลด์
แ
สดงข้
อ
ความ
ฟิ
ลด์
เ
ลื
อ
กไฟล์
ฟิ
ลด์
ร
ู
ป
ภาพ
รายการ
กลุ
่
ม
ตั
ว
เลื
อ
ก
ตั
ว
เลื
อ
ก
กลุ
่
ม
ตั
ว
เช็
ค
ตั
ว
เช็
ค
ฟิ
ลด์
ซ
่
อ
น
ฟิ
ลด์
ก
รอกข้
อ
ความ
ฟอร์
ม
แท็
บ
Foms
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
เข้าใจการทางานของฟอร์มและโปรแกรมสคริปต์
3. บราวเซอร์แสดงผลลัพธ์ที่ได้
1. ผู้ใช้ป้อนข้อมูลในแบบฟอร์ม หรือส่วนที่เราต้องการค้นหา
ข้อมูลส่งไปทีเครื่องเว็บเซิร์ฟเวอร์
2. CGI Script ทาการประมวลผลข้อมูล
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
1. เลือกตาแหน่งวางฟิ ลด์กรอกข้อความ
และคลิกปุ่ม Text Field
2. กาหนดข้อความแสดงหน้าฟิ ลด์
การสร้างฟิ ลด์กรอกข้อความ
ฟิ ลด์แบบปกติ
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
การสร้างฟิ ลด์กรอกข้อความ
ฟิ ลด์ปกติ
ฟิ ลด์แบบใส่รหัสผ่าน
ฟิ ลด์แบบหลายบรรทัด
แสดงข้อความเริ่มต้นในฟิ ลด์
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
1. คลิกเลือกที่ฟิ ลด์กรอกข้อความ
2. กาหนดชื่อฟิ ลด์
การสร้างฟิ ลด์กรอกข้อความ
ฟิ ลด์แบบใส่รหัสผ่าน
3. กาหนดความยาวของฟิ ดด์ 4. กาหนดจานวนตัวอักษรสูงสุด
5. คลิกเลือก Password
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
1. คลิกเลือก Textarea
3. คลิกเลือกฟิ ลด์เพื่อตั้งค่า
การสร้างฟิ ลด์กรอกข้อความ
ฟิ ลด์แบบหลายบรรทัด
2. กาหนดข้อความแสดงหน้าฟิ ลด์
4. กาหนดชื่อฟิ ลด์
5. กาหนดจานวนบรรทัด 6. กาหนดขนาดความยาว
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
การสร้างรายการ
รายการแบบ Menu
รายการแบบ Menu
1. เลือก List/Menu
2. กาหนดข้อความแสดงหน้ารายการ
3. คลิกเลือกฟิ ลด์เพื่อตั้งค่า
4. กาหนดชื่อฟิ ลด์
5. กาหนดเป็น Menu 6. คลิกเมาส์เพื่อใส่
ตัวเลือกลงในรายการ
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
รายการแบบ Menu
7. พิมพ์ตัวเลือกลงในรายการ
8. คลิก OK
9. แสดงตัวเลือกในช่อง
การสร้างรายการ
รายการแบบ Menu
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
รายการแบบ List
1. เลือก List/Menu
2. กาหนดข้อความแสดงหน้ารายการ
3. คลิกเลือกฟิ ลด์เพื่อตั้งค่า
4. กาหนดชื่อฟิ ลด์
5. กาหนดเป็น List 6. คลิกเพื่อเพิ่มตัวเลือก
การสร้างรายการ
รายการแบบ List
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
รายการแบบ List
9. กาหนดความสูงของรายการ
7. พิมพ์ตัวเลือกลงในรายการ
8. คลิก OK
การสร้างรายการ
รายการแบบ List
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
การสร้างตัวเช็ค แสดงตัวเช็คในฟอร์มที่เราสร้าง
1. เลือก Check Box
2. กาหนดข้อความแสดงหลังตัวเช็ค
3. คลิกเลือกฟิ ลด์เพื่อตั้งค่า
4. กาหนดชื่อฟิ ลด์
5. ใส่ค่าของตัวเช็ค
6. กาหนดสถานะเริ่มต้นของ
ตัวเช็ค
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
การสร้างตัวเลือก แสดงตัวเลือกในฟอร์มที่เราสร้าง
1. เลือก Radio Button
2. กาหนดข้อความแสดงหลังตัวเลือก
3. คลิกเลือกฟิ ลด์เพื่อตั้งค่า
4. กาหนดชื่อฟิ ลด์
5. ใส่ค่าของตัวเลือก 6. กาหนดสถานะเริ่มต้นของตัวเลือก
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
การสร้างฟิ ลด์เลือกไฟล์
แสดงตัวอย่างฟิ ลด์เลือกไฟล์
1. เลือก File Field
2. กาหนดข้อความแสดงหน้าฟิ ลด์
3. คลิกเลือกฟิ ลด์เพื่อตั้งค่า
4. กาหนดชื่อฟิ ลด์
5. กาหนดความยาวและจานวนตัวอักษรสูงสุด
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
แสดงการสร้างปุ่มกด
การสร้างปุ่มกด
1. เลือก Button
2. เลือก No lable tag
3. คลิกเลือกฟิ ลด์เพื่อตั้งค่า
4. กาหนดชื่อฟิ ลด์
5. กาหนดข้อความบนปุ่ม
6. เลือกชนิดปุ่ม
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
การสร้างฟิ ลด์ซ่อน
1.คลิกปุ่มหรือเลือกคาสั่ง Insert>From>Hidden Field
สัญลักษณ์ที่ใช้แสดงฟิ ลด์ซ่อน
2.กาหนดชื่อฟิ ลด์ 3.กาหนดค่าให้กับฟิ ลด์
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
การสร้างฟิ ลด์รูปภาพ
1.คลิกปุ่ม หรือเลือกคาสั่ง Insert>From>Image Field
2. เลือกรูปภาพ แล้วคลิกปุ่ม OK
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
ปรับแต่ง และตรวจสอบรูปแบบฟอร์ม
รูปแบบของฟอร์มที่สมบูรณ์เมื่อทดสอบจากบราวเซอร์
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003
Thank you
ให้นักเรียน
ซักถามได้ครับ
นายอานวย สือพัฒธิมา
แผนกวิชาคอมพิวเตอร์ธุรกิจ
วิชาการสร้างเว็บเบื้องต้น รหัส 20901-2003

More Related Content

Similar to Cs6 ch09 การสร้างฟอร์ม show

โปรแกรม Webpage maker
โปรแกรม Webpage makerโปรแกรม Webpage maker
โปรแกรม Webpage maker491320129
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊กsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
ดรีม
ดรีมดรีม
ดรีมsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
หวิว
หวิวหวิว
หวิวViewMik
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์sirinet
 
Course Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home pageCourse Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home pageKhon Kaen University
 
บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง เนื้อหา
บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง เนื้อหาบทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง เนื้อหา
บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง เนื้อหาVisiene Lssbh
 
Powerpoint บทที่ 3
Powerpoint บทที่ 3Powerpoint บทที่ 3
Powerpoint บทที่ 3patchareepoim
 
อินทุอร
อินทุอรอินทุอร
อินทุอรMiw Inthuorn
 
อินทุอร
อินทุอรอินทุอร
อินทุอรMiw Inthuorn
 
รายงานคอม
รายงานคอมรายงานคอม
รายงานคอมdekthai
 
รายงาน คอม
รายงาน คอมรายงาน คอม
รายงาน คอมNooLuck
 
Chapter4
Chapter4Chapter4
Chapter4aumtall
 

Similar to Cs6 ch09 การสร้างฟอร์ม show (20)

Unit2
Unit2Unit2
Unit2
 
โปรแกรม Webpage maker
โปรแกรม Webpage makerโปรแกรม Webpage maker
โปรแกรม Webpage maker
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊ก
 
โบ
โบโบ
โบ
 
Best
BestBest
Best
 
หมวย
หมวยหมวย
หมวย
 
ดรีม
ดรีมดรีม
ดรีม
 
หมวย
หมวยหมวย
หมวย
 
หวิว
หวิวหวิว
หวิว
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์
 
Course Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home pageCourse Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home page
 
บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง เนื้อหา
บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง เนื้อหาบทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง เนื้อหา
บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง เนื้อหา
 
Powerpoint บทที่ 3
Powerpoint บทที่ 3Powerpoint บทที่ 3
Powerpoint บทที่ 3
 
อินทุอร
อินทุอรอินทุอร
อินทุอร
 
อินทุอร
อินทุอรอินทุอร
อินทุอร
 
e-Publishing
e-Publishinge-Publishing
e-Publishing
 
รายงานคอม
รายงานคอมรายงานคอม
รายงานคอม
 
รายงาน คอม
รายงาน คอมรายงาน คอม
รายงาน คอม
 
Chapter4
Chapter4Chapter4
Chapter4
 
At5
At5At5
At5
 

More from Amnuay

Cs6 ch11 การใช้มัลติมีเดีย show
Cs6 ch11 การใช้มัลติมีเดีย showCs6 ch11 การใช้มัลติมีเดีย show
Cs6 ch11 การใช้มัลติมีเดีย showAmnuay
 
Cs6 ch08 การสร้างแฟรมเซต show
Cs6 ch08 การสร้างแฟรมเซต showCs6 ch08 การสร้างแฟรมเซต show
Cs6 ch08 การสร้างแฟรมเซต showAmnuay
 
Cs6 ch06 การเชื่อมโยง show
Cs6 ch06 การเชื่อมโยง showCs6 ch06 การเชื่อมโยง show
Cs6 ch06 การเชื่อมโยง showAmnuay
 
Cs6 ch05 การใส่ตาราง show
Cs6 ch05 การใส่ตาราง showCs6 ch05 การใส่ตาราง show
Cs6 ch05 การใส่ตาราง showAmnuay
 
คำชี้แจง
คำชี้แจงคำชี้แจง
คำชี้แจงAmnuay
 
ใบงานหน่วยที่3
ใบงานหน่วยที่3ใบงานหน่วยที่3
ใบงานหน่วยที่3Amnuay
 
ใบงานหน่วยที่9
ใบงานหน่วยที่9ใบงานหน่วยที่9
ใบงานหน่วยที่9Amnuay
 
ใบงานหน่วยที่8
ใบงานหน่วยที่8ใบงานหน่วยที่8
ใบงานหน่วยที่8Amnuay
 
ใบงานหน่วยที่7
ใบงานหน่วยที่7ใบงานหน่วยที่7
ใบงานหน่วยที่7Amnuay
 
ใบงานหน่วยที่6
ใบงานหน่วยที่6ใบงานหน่วยที่6
ใบงานหน่วยที่6Amnuay
 
ใบงานหน่วยที่5
ใบงานหน่วยที่5ใบงานหน่วยที่5
ใบงานหน่วยที่5Amnuay
 
ใบงานหน่วยที่4
ใบงานหน่วยที่4ใบงานหน่วยที่4
ใบงานหน่วยที่4Amnuay
 
ใบงานหน่วยที่3
ใบงานหน่วยที่3ใบงานหน่วยที่3
ใบงานหน่วยที่3Amnuay
 
ใบงานหน่วยที่2
ใบงานหน่วยที่2ใบงานหน่วยที่2
ใบงานหน่วยที่2Amnuay
 
ใบงานหน่วยที่10
ใบงานหน่วยที่10ใบงานหน่วยที่10
ใบงานหน่วยที่10Amnuay
 
บทที่ 7 การทำงานเกี่ยวกับตาราง
บทที่  7  การทำงานเกี่ยวกับตารางบทที่  7  การทำงานเกี่ยวกับตาราง
บทที่ 7 การทำงานเกี่ยวกับตารางAmnuay
 
บทที่ 4 การจัดวางข้อความในเอกสาร
บทที่  4 การจัดวางข้อความในเอกสารบทที่  4 การจัดวางข้อความในเอกสาร
บทที่ 4 การจัดวางข้อความในเอกสารAmnuay
 
บทที่ 2 miceosoft word 2007
บทที่  2 miceosoft word 2007บทที่  2 miceosoft word 2007
บทที่ 2 miceosoft word 2007Amnuay
 
บทที่ 6 การแทรกรูปข้อความศิลป์
บทที่  6  การแทรกรูปข้อความศิลป์บทที่  6  การแทรกรูปข้อความศิลป์
บทที่ 6 การแทรกรูปข้อความศิลป์Amnuay
 
บทที่ 5 การาตกแต่งเอกสาร
บทที่  5  การาตกแต่งเอกสารบทที่  5  การาตกแต่งเอกสาร
บทที่ 5 การาตกแต่งเอกสารAmnuay
 

More from Amnuay (20)

Cs6 ch11 การใช้มัลติมีเดีย show
Cs6 ch11 การใช้มัลติมีเดีย showCs6 ch11 การใช้มัลติมีเดีย show
Cs6 ch11 การใช้มัลติมีเดีย show
 
Cs6 ch08 การสร้างแฟรมเซต show
Cs6 ch08 การสร้างแฟรมเซต showCs6 ch08 การสร้างแฟรมเซต show
Cs6 ch08 การสร้างแฟรมเซต show
 
Cs6 ch06 การเชื่อมโยง show
Cs6 ch06 การเชื่อมโยง showCs6 ch06 การเชื่อมโยง show
Cs6 ch06 การเชื่อมโยง show
 
Cs6 ch05 การใส่ตาราง show
Cs6 ch05 การใส่ตาราง showCs6 ch05 การใส่ตาราง show
Cs6 ch05 การใส่ตาราง show
 
คำชี้แจง
คำชี้แจงคำชี้แจง
คำชี้แจง
 
ใบงานหน่วยที่3
ใบงานหน่วยที่3ใบงานหน่วยที่3
ใบงานหน่วยที่3
 
ใบงานหน่วยที่9
ใบงานหน่วยที่9ใบงานหน่วยที่9
ใบงานหน่วยที่9
 
ใบงานหน่วยที่8
ใบงานหน่วยที่8ใบงานหน่วยที่8
ใบงานหน่วยที่8
 
ใบงานหน่วยที่7
ใบงานหน่วยที่7ใบงานหน่วยที่7
ใบงานหน่วยที่7
 
ใบงานหน่วยที่6
ใบงานหน่วยที่6ใบงานหน่วยที่6
ใบงานหน่วยที่6
 
ใบงานหน่วยที่5
ใบงานหน่วยที่5ใบงานหน่วยที่5
ใบงานหน่วยที่5
 
ใบงานหน่วยที่4
ใบงานหน่วยที่4ใบงานหน่วยที่4
ใบงานหน่วยที่4
 
ใบงานหน่วยที่3
ใบงานหน่วยที่3ใบงานหน่วยที่3
ใบงานหน่วยที่3
 
ใบงานหน่วยที่2
ใบงานหน่วยที่2ใบงานหน่วยที่2
ใบงานหน่วยที่2
 
ใบงานหน่วยที่10
ใบงานหน่วยที่10ใบงานหน่วยที่10
ใบงานหน่วยที่10
 
บทที่ 7 การทำงานเกี่ยวกับตาราง
บทที่  7  การทำงานเกี่ยวกับตารางบทที่  7  การทำงานเกี่ยวกับตาราง
บทที่ 7 การทำงานเกี่ยวกับตาราง
 
บทที่ 4 การจัดวางข้อความในเอกสาร
บทที่  4 การจัดวางข้อความในเอกสารบทที่  4 การจัดวางข้อความในเอกสาร
บทที่ 4 การจัดวางข้อความในเอกสาร
 
บทที่ 2 miceosoft word 2007
บทที่  2 miceosoft word 2007บทที่  2 miceosoft word 2007
บทที่ 2 miceosoft word 2007
 
บทที่ 6 การแทรกรูปข้อความศิลป์
บทที่  6  การแทรกรูปข้อความศิลป์บทที่  6  การแทรกรูปข้อความศิลป์
บทที่ 6 การแทรกรูปข้อความศิลป์
 
บทที่ 5 การาตกแต่งเอกสาร
บทที่  5  การาตกแต่งเอกสารบทที่  5  การาตกแต่งเอกสาร
บทที่ 5 การาตกแต่งเอกสาร
 

Cs6 ch09 การสร้างฟอร์ม show