การเขียนโปรแกรมเว็บด้วยภาษา HTML สำหรับนักศึกษา ปวส.1/10 สาขา เทคโนโลยีสารสนเทศ

 สื่อการเรียนรู้่ การโปรแกรมเว็บด้วยภาษา HTMLชื่อหน่วย การตกแต่งเว็บเพจแผนการเรียนรู้ที่3 การสร้างแบบฟอร์ม

จุดประสงค์รายวิชา 

1. เพื่อให้มีความรู้ความเข้าใจเกี่ยวกับการทำงานของฟอร์ม

2. เพื่อให้มีความรู้ความเข้าใจเกี่ยวกับแท็กต่างๆที่ใช้สร้างฟอร์ม

3. เพื่อให้มีความรู้ความเข้าใจเกี่ยวกับการส่ง และล้าง ค่าข้อมูลในฟอร์ม

รายละเอียดเนื้อหารายวิชา

การสร้างแบบฟอร์ม <form>

เราสามารถใช้แท็ก form เพื่อสร้างแบบฟอร์มในเว็บเพจ ซึ่งมีรูปแบบดังนี้

รูปแบบของแท็ก            
<form method=”วิธีส่งข้อมูล” action=”ตำแหน่งโปรแกรม”>..</form>

ค่าที่กำหนดให้ใช้ 

method คือ วิธีการส่งข้อมูลของ CGI มี 2 รูปแบบ

1. post คือ การส่งข้อมูลภายในฟอร์มทีละบรรทัด
2. get คือ การส่งข้อมูลภายในฟอร์มต่อกันเป็นประโยคเดียว

คำสั่งสำหรับการสร้างฟอร์ม

1. การรับข้อมูล <input>

รูปแบบของแท็ก

<input type=”ชนิดอุปกรณ์” name=”ชื่อของอุปกรณ์” />

       2. การสร้างปุ่ม

          ในฟอร์มปกติจะต้องมีปุ่มให้กด ซึ่งปุ่มในฟอร์ม html จะมี 3 ลักษณะ คือ

• ปุ่ม submit เมื่อกดปุ่มนี้ ข้อมูลในฟอร์มทั้งหมดจะถูกส่งไปให้ CGI Script หรือ CGI Program ที่เรากำหนดไว้ในแอตทริบิวต์ action ของแท็ก form
• ปุ่ม reset เมื่อกดปุ่มนี้อุปกรณ์ในฟอร์มทั้งหมดจะกลับคืนค่าเริ่มต้น ก่อนที่จะพิมพ์ข้อมูลใด  ลงฟอร์ม
• ปุ่ม button เป็นปุ่มที่สร้างขึ้นมาเพื่อทำงานใด ๆ โดยไปเรียก JavaScript หรือ VBScript ขึ้นมาทำงาน

รูปแบบของแท็ก    
< input type=”อุปกรณ์” value=”ค่าใด ๆ” />

3. ตัวเลือกแบบให้เลือกหลายข้อ (checkbok)

          เซ็กบ็อกซ์ จะเป็นอุปกรณ์ที่มีลักษณะ 2 สถานะ คือ ใช่หรือไม่ เลือกหรือไม่เลือก เราสามารถใช้งานเซ็กบ็อกซ์ในกรณีที่ต้องการให้ผู้กรอกฟอร์มเลือกได้หลาย ๆ ตัวเลือกพร้อมกัน เช่น ประเภทกิจกรรมที่ชอบ เช่น

         <input type=”checkbox” value=”catoon” />หนังสือการ์ตูน<br />

4. ตัวเลือกแบบให้เลือกข้อเดียว (radio button)

จะตรงข้ามกับเซ็กบ็อกซ์ เพราะเรดิโอบัตทอน (radio button) จะให้ผู้ใช้เลือกเพียงข้อเดียวจากตัวเลือกทั้งหมด

ตัวเลือกประเภทนี้ เรามักจะเห็นในการใช้งานทำแบบทดสอบ หรือแบบประเมินผลสิ่งใดสิ่งหนึ่ง เช่น

          <input type=”radio” name=”age” value=”15″ />0 – 15 ปี<br />

5. ตัวเลือกรายการ <select>,<option>

          ตัวเลือกรายการ หรือการใช้ select เป็นอุปกรณ์ที่ใช้แสดงข้อมูลให้ผู้ใช้เลือกเพียง 1 ข้อมูลจากข้อมูลทั้งหมด คล้ายเรดิโอบัตทอนแต่จะประหยัดพื้นที่ในการแสดงผลมากกว่า

รูปแบบของแท็ก

    <select name=”ชื่อรายการ”>             
<option value=”ค่าตัวเลือกที่ 1″>ชื่อตัวเลือก1</option>

<option value=”ค่าตัวเลือกที่ 2″>ชื่อตัวเลือก2</option>

</select>

ค่าที่กำหนดให้ใช้ 

ค่าตัวเลือก คือ ค่าที่จะถูกส่งไปให้เซิร์ฟเวอร์ เมื่อคลิกปุ่ม
ชื่อตัวเลือก คือ ชื่อที่จะแสดงผลเป็นตัวเลือกในฟอร์ม html

ใบงานก่อนนเรียน เรื่องการสร้างแบบฟอร์ม ให้นักศึกษาทดลองสร้างฟอร์มตามรูปแบบที่กำหนดแล้วส่งตัวอย่างการแสดงผลลัพธ์ให้ตรวจสอบพร้อมระบุชื่อ - สกุลเลขที่ ห้อง ของนักศึกษาศึกษาด้วย