1 การสร้างเว็บไซต์ 1
2 การสร้างเว็บไซต์ 2 หน่วยที่ 10 การสร้างแบบฟอร์ม เว็บไซต์ทั่วไปมักจะมีแบบฟอร์มเพื่อสอบถามหรือให้กรอกข้อมูลต่าง ๆ เช่น แบบฟอร์มสั่งซื้อ แบบฟอร์ม การชำระเงินเมื่อซื้อสินค้า แบบฟอร์มการสอบถามความคิดเห็น หรือการลงทะเบียนเข้าสู่เว็บไซค์ รวมถึง แบบฟอร์มสมุดเยี่ยมชมเว็บไซค์ต่าง ( โดยแต่ละแบบฟอร์มจะให้กรอกข้อมูลลงในช่องที่กำหนดไว้ หรือ การเลือกตัวเลือกในหัวข้อต่าง ๆ สิ่งเหล่านี้เราจะเรียกว่าฟอร์ม (Form) แบบฟอร์มเป็นรูปแบบการรับข้อมูลบนหน้าเว็บเพจไม่ว่าจะเป็นการค้นหาข้อมูลจากอินเทอร์เน็ต การแสดงความคิดเห็น การกรอกข้อมูลในการสมัคร การซื้อสินค้า Online การตอบหรือตั้งกระทู้ ตลอดจน การกรอกแบบสอบถามต่าง ๆ ล้วนแต่เป็นการรับข้อมูลโดยการกรอกข้อมูลผ่านฟอร์มทั้งสิ้น เพียงแต่หน้าตา พ่อร์บแต่ละฟอมของแต่ละเว็บไซจะแตกต่างกันไปตามแต่จุดประสงค์และการออกแบบแบบฟอร์มจะมืองค์ ประกอบต่าง ๆ เช่น ช่องกรอกข้อความ ปุ่มตัวเลือก เพื่อใช้ในการรับข้อมูลจากผู้ใช้ 10.1 วิธีสร้างแบบฟอร์ม การสร้างแบบฟอร์ม (Form) เพื่อใช้ในการรับชัมูดเป็นวิธีการหนึ่งที่นิยมทำกันในเว็บไชค์ทั่วไป เพราะ การสร้างแบบฟอร์มจะทำให้กรอกข้อมูลได้ง่ายเป็นระเบียบสวยงามและเป็นสัดส่วน การออกแบบฟอร์มให้มี ลักษณะต่าง ๆ ขึ้นอยู่กับประโยชนในการใช้งาน โดยทั่วไปแบบฟอร์มจะถูกนำมาใช้กับเว็บไซค์ประเภท Dynamic Web ที่มีการส่งข้อมูลไปใช้ในการ ประมวลผลฝั่ง Server ส่วนเนื้อหาในหน่วยนี้จะกล่าวถึงพื้นฐานการสร้างแบบฟอร์มด้วยภาษา HTML เท่านั้น การสร้างแบบฟอร์มจะเริ่มตันด้วยแท็ก <form> และปิดท้ายด้วยแท็ก </form> ซึ่งมีรูปแบบของฟอร์มคังนี้ <form name="ซื่อของ form* method='post/get" action="URL> ...ส่วนประกอบของฟอร์ม… </form> หรือ <form> ...ส่วนประกอบของฟอร์ม… </form>
3 การสร้างเว็บไซต์ 3 โดยที่ name ชื่อของฟอร์ม Method เป็นรูปแบบของวิธีในการส่งข้อมูล ซึ่งจะประกอบไปด้วย - get เป็นตัวรับส่งข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร - post เป็นตัวรับส่งข้อมูลไม่จำกัดจาก Server Action เป็นตำแหน่ง URL ปลายทางในเว็บเชิร์ฟเวอร์ที่จะส่งข้อมูลไปประมวลผล ตัวอย่างที่ 10.1 <!DOCTYPE html> <html> <head> <title> การสร้างแบบฟอร์มc/title> <meta charset=”UTF8”> </head> <body> <form> <input type=text'> </form> </body> <html> 10.2 การเพิ่มสวนรับข้อมูล ส่วนรับข้อมูลในแบบฟอร์ม เป็นส่วนที่จะนำข้อมูลต่าง ๆ ส่งไปประมวลผลยัง Server ประกอบด้วย อุปกรณ์ต่าง ๆ ที่จะต้องเขียนอยู่ภายในแท็ก <form>...</form>
4 การสร้างเว็บไซต์ 4 10.2.1 การสร้างช่องรับข้อมูลชนิด Text Box ช่องรับข้อมูลชนิด Text Box เป็นกรอบสำหรับให้ผู้เข้าเว็บไซต์กรอกข้อมูลลงไป สักษณะข้อง ที่กรอกลงไปจะเป็นข้อความหนึ่งบรรทัดซึ่งมีรูปแบบดังนี้ <input type=”text” name=”ชื่อของช่องรับข้อความ” value="ค่าเริ่มต้น” Size="ความกว้างของช่องรับข้อความ" maxlength=”จำนวนตัวอักษรสูงสุดที่ป้อนได้”> Type ชนิดของช่องรับข้อมูลเป็นแบบ text Name ชื่อของช่องรับข้อความ Value ค่าเริ่มตัน ที่เรากำหนด ผู้ใช้สามารถแก้ไขได้ Size ความกว้างของช่องรับข้อความ maxlength จำนวนตัวอักษรสูงสุดที่ป้อนได้ ตัวอย่างที่ 10.2 <!DOCTYPE html> <html> <head> <title>การสร้างแบบฟอร์ม</title> <meta charset="UTF-8"> </head> </body> <form> ชื่อ : <input type="text" name="name" size="20" maxlength="15"> นามสกุล : <input type="text" name="lastname" size="30" maxlength= "20" > </form> </body> </html>
5 การสร้างเว็บไซต์ 5 10.2.2 การสร้างช่องรับชัอมูลชนิด Password ช่องรับขัอมูลชนิด Password เป็นช่องสำหรับกรอกชัอมูลลงไปแบบหนึ่งบรรทัดเหมือนกับ ช่องรับข้อมูลชนิด Text box โดยเมื่อไส่ขัอมูลเข้าไปในช่องแล้วจะมองเห็นเป็นเครื่องหมาย ㆍ จะไม่สามารถ มองเห็นข้อมูลจริง ๆ ที่ใส่เข้าไปได้มีรูปแบบดังนี้ <input type=”password" name=”ชื่อของ password" Value=”ค่าเริ่มต้น”> size=”ขนาด password” maxlength=”จำนวนสูงสุด”> Type ชนิดของช่องรับข้อมูลเป็นแบบ password Name ชื่อของpassword Value ค่าเริ่มต้น Size ขนาด Password maxlength จำนวนตัวอักษรสูงสุดที่ป้อนได้ ตัวอย่างที่ 103 <!DOCTYPE html> <head> <title>การสร้างแบบฟอร์ม</title> <Meta charset=”UTF-8”> </head> <body> <Form> ชื่อ : <input type=”text” name=”name” size=”20” maxlength=”15”> นามสกุล : <input type=”text” name=”lastname” size=”30” maxlength=”20”><br> รหัสผ่าน : <input type=”password" name=”password” size=”15” maxlength=”8”> </form> </body> </html>
6 การสร้างเว็บไซต์ 6 10.2.3 การสร้างช่องรับข้อมูลชนิด Text Area ช่องรับข้อมูลชนิด Text Area เป็นการรับข้อมูลที่มีความยาวมาก ๆ ส่วนใหญ่จะใช้กับข้อมูล ที่เป็นการแสดงความคิดเห็น (Comment) หรือจะเห็นได้บ่อยในการรับข้อมูลจากกระดานถามตอบหรือกระทู้ ต่าง ๆ มีรูปแบบคำสั่งดังนี้ <textarea name=”ชื่อ TextArea” cols="จำนวนตัวอักษรในแต่ละแถว" rows=”จำนวนแถว”> ...ค่าเริ่มต้นของแท็กมีหรือไม่มีกี่ได้.../textarea> ตัวอย่างที่ 10.4 <!DOCTYPE html> <html> <head> <title> การสร้างแบบฟอร์ม</title> <meta charset='UTF-8'> </head> <body> <form> ชื่อ : <input type=”text" name=”username" size=”20" maxlength=”15”> นามสกุล : <Input type=”text” name=”lastname” size=”30” maxlength=”20”><br> รหัสผ่าน : <Input type=”password" name=”password” size=”15” maxlengthe=”8”><br> ที่อยู่ : <br><textarea name=”address” cols=”90”rows=”5” >กรอกที่อยู่ของคุณลงในช่องนี้ </textarea> </form> </body> <html> 10.2.4 การสว้างช่องรับข้อมูลชนิด Check Box เป็นการรับข้อมูลจากการคลิกเลือกข้อมูลที่กำหนดมาให้ โดยสามารถเลือกได้ มากกว่าหนึ่งหัวข้อ เช่นการเลือกโปรแกรมที่นักเรียนต้องการเรียน อาหารที่ชอบวิชาที่ชอบเรียนมากที่สุด เป็นต้นรูปแบบคำสั่ง HTML ในการสร้างช่องรับข้อมูลชนิด Check Box มีดังนี้ <input type=”checkbox” name=”ชื่อของ checkbox” value="ค่เริ่มต้นของ Checkbox”>
7 การสร้างเว็บไซต์ 7 ตัวอย่างที่ 10.5 <!DOCTYPE html> <html> <head> <title>การสร้างแบบฟอร์ม</title> <meta charset=”UTF-8"> </head> <body> <form> ชื่อ : <input type=”text" name=”username" size="20" maxlength=”15”> นามสกุล : <input type=”text" name="lastname" size= "30* maxlength=”20”><br> รหัสผ่าน : <input type=”password" name=”password" size="20” maxlength="8"><br> ที่อยู่ : <br>textarea name= 'address' cols=*90" rows='5 >กรอกที่อยู่ของคุณลงในช่องนี้ </textarea><br> วิชาที่ชอบเรียน : <input type=”checkbox" name="subject" value=”program”>Programmimg <input type=”checkbox" name=”subject"' value=”network”>Networking <input type=”checkbox" name=”subject" value=”db”>Database<br> </form> </body> </html>
8 การสร้างเว็บไซต์ 8 10.2.5 การสร้างช่องรับข้อมูลชนิด Radio Button การสร้างช่องรับชัอมูลชนิต Radio Button เป็นการรับข้มูถจากหัวข้อที่กำหนดมาให้ โดย สามารถเลือกได้เพียงหัวขัอเดียวเท่านั้น เช่น เพศ ช่วงอายุ วุฒิการศึกษาสูงสุด เงินเดือน อาชีพ เป็นต้นรูปแบบ คำสั่ง HTML ในการสร้างช่องรับข้อมูลชนิด Radio Buttonมีดังนี้ <input type=radio* name="ชื่อของ Radio* value=*ค่าซองRadio> ตัวอย่างที่ 10.6 <!DOCTYPE html> <html> <head> <title> การสร้างแบบฟอร์ม</title> <meta charset='UTF-8> </head> <body> <form> ชื่อ : <input type=”text" name=”username" size="20" maxlengthe="15”> นามสกุล : <input type=”text" name=”lastname” size=”30” maxtength=”20”><br รหัสผ่าน : <input type=”password" name=”password" size="20”maxlength=”8”><bp> อายุ : <input type=”radio” name=”age” value="0”>15-20 ปี : <input type=”radio" name=”age” value="1”>20-25ปี <input type=”radio” name=”age" value=”1”>25ปีขึ้นไป<br> ที่อยู่ : <br><textarea name=”address” cols=”90” rows="5” >กรอกที่อยู่ของคุณลงในช่องนี้ <textarea><br>
9 การสร้างเว็บไซต์ 9 วิชาที่ชอบเรียน : <input type=”checkbox”name=”subject” value=”program”>Programmimg nbsp; <input type=”checkbox”name="subject” value="network”>Networking nbsp; <input type=”checkbox”name=“subject” value=”db”>Database<br> </form> </body> </html> 10.2.6 การสร้างช่องรับข้อมูลชนิด Selection Box การสร้าง Selection Box หรือ Drop Down List หรือ List Box คือการรับข้อมูลจากรายกร ข้อมูลที่มีให้เลือกโดยสามารถเลือกได้เพียงแค่หนี่งรายการ ใช้กรณีที่มีรายการให้เลือกมาก ๆ เช่น ปวะเท หรือจังหวัดที่เป็นภูมิลำเนาเพื่อประหยัดเนื้อที่ในการแสดงข้อมูลและสามารถกำหนดจำนวนบรรทัค ในกร แสดง Selection Box ได้รูปแบบคำสั่ง HTML ในการสร้างช่องรับข้อมูลประเภท Selection Box มีดังนี้ <select name="SelectionBox" size="จำนวนรายการ”> <option value="ค่าของรายการที่ 1">รายการที่ 1 </option> . . . </select> Size จำนวนตัวเลือกที่ให้มองเห็น Multiple ให้ผู้ใช้งานเลือกหลายตัวเลือกได้ โดยกดปุ่ม Ctrl
10 การสร้างเว็บไซต์ 10 ตัวอย่างที่ 10.7 <IDOCTYPE html> <html> <head> <title> การสร้างแบบฟอร์ม<title> <meta charset=”UTF-8”> </head> <body> <form> ชื่อ : <input type=”text” name=“username” size=”20” maxlength=”15”> นามสกุล : <input type=”text" name=”lastname” size="30” maxlength=”20”><bp> รหัสผ่าน : <input type=”password" name=”password" size=”20” maxlength=”8”><bp> อายุ : <input type”radio” name=”age” value=”0” >15-20 ปี  . . <input type”radio” name=”age” value=”1”>20-25ปี  . <input type=”radio” name=”age” value=”1” >25ปีขึ้นไป<br> ที่อยู่ : <br><textarea name=”address” cols=”90” rows=”5”>กรอกที่อยู่ของคุณลงในช่องนี้ </textarea><br> วิชาที่ชอบเรียน : <input type=”checkbox” name=”subject” value=”program” >Programmimg <input type=”checkbox" name=”subject” value=”network” >Networking <input type=”checkbox” name=”subject"' yalue=”db” >Database<br>
11 การสร้างเว็บไซต์ 11 เลือกแผนกวิชาที่ต้องการสมัคร <select name=”dept" size="1”> <option value=”1” >เทคโนโลยีสารสนเทศ<br> <option value=”2” >คอมหิวเตอร์ธุรกิจ<br> <option value="3” >อิเล็กทรอนิกส์<br> <option value="4”>ไฟฟ้ากำลัง<br> <option value=”5”>เครื่องกล<br> <option value=”6“>ก่อสร้าง<br> <option value=”7”>สถาปัตยกรรม<br> </select> </form> </body> </html> 10.2.7 การสร้างปุ้ม (Button) การสร้างปัมหรือ Button ในฟอร์มสามารถสร้างได้ทั้งปุ่มส่งข้อมูลหรือสั่งให้ทำงานที่เรียกว่า Submit และปุ่มยกเลิกการทำงานหรือ Reset Submit คำสั่งนี้จะทำหน้าที่ส่งข้อมูลในแบบฟอร์มไปยังเชอร์ฟเวอร์เพื่อทำการประมวลผล ข้อมูล การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการกำหนดค่าที่จะแสดงบนปัมที value Reset คำสั่งนี้จะทำหน้าที่ในการยกเลิกข้อมูลต่าง ๆ ที่ทำการป้อนลงในแบบฟอร์ม เป็นคำสั่ง ที่ใช้ในการลบข้อมูลในแบบฟอร์มทั้งหมด เพื่อทำการป้อนข้อมูลลงในแบบฟอร์มใหม่ การแสดงผลในคำสั่งนี้ จะแสดงผลเป็นลักษณะปุ่ม โคยมีการกำหนดค่ที่จะแสดงบนปูมที่ value
12 การสร้างเว็บไซต์ 12 <form> <input type=”button” name="ซื่อbutton" value="ค่าข้อมูล”> </form> โดยที่ type ของ button มี 2 รูปแบบคือ submit การส่งค่า reset การรีเช็ต name เป็นการกำหนดชื่อข้อมูลเพื่อส่งไปประมวลผล <Input type="submit" name="data" value="ส่งข้อมูล"> <Input type="reset" name="data" value="ล้างข้อมูส”> สรุปสาระสำคัญ แบบฟอร์มเป็นรูปแบบการรับข้อมูลบนหน้าเว็บเพจ เพื่อใช้คันหาข้อมูลจากยินเทอร์เน็ต แสดงความคิดเห็ การกรอกข้อมูลในการสมัคร การซื้อสินค้ Online การตอบหรือตั้งกระทู้ ตลอดจนการกรอกแบบสอบถามต่ง ๆ 1. การสร้างแบบฟอร์มด้วยภาษา HTML จะเริ่มต้นด้วยแท็ก <form> และจะปิดท้า </form> ซึ่งมีรูปแบบของ ฟอร์ม ตังนี้ <form name="ชื่อของform* method="post/get" action="URL'> ...ส่วนประกอบของฟอร์ม...</form> หรือ <form>...ส่วนประกอบของฟอร์ม... </form> 2 การเพิ่มส่วนรับข้อมูล ส่วนรับข้อมูลในแบบฟอร์ม เป็นส่วนที่จะนำข้อมูลต่าง ( ส่งไปประมวลผลยัง Server ประกอบด้วย อุปกรณ์ต่าง ๆ ที่จะต้องเขียนอยู่ภายในแท็ก <form>.../form>
13 การสร้างเว็บไซต์ 13 (1) การสร้างช่องรับข้อมูลชนิด Text Box ช่องรับข้อมูลชนิด Text Box เป็นช่องกรอกข้อมูลแบบบรรทัดเดียวซึ่งมีรูปแบบดังนี้ <input type=”text" name=”ชื่อของช่องรับข้อความ” value=”ค่าเริมต้น" size="ความกว้างของช่องรับข้อความ” maxlength ="จำนวนตัวอักษรสูงสุดที่ป้อนได้” > (2) การสร้างช่องรับข้อมูลชนิด Password ช่องรับข้อมูลชนิด Passwordเป็นกรอบสำหรับกรอกข้อมูลลงไปแบบข้อความหนีงบรรทัด เหมือนกับช่องรับข้อมูลชนิด Text Bor โดยเมื่อคีย์ข้อมูลเข้าไปในช่องแล้ว เราจะมองเห็นเป็นเครื่องหมาย ㆍ จะไม่สามารถมองเห็นข้อมูลจริง ๆ ที่เราคีย์เข้าไปได้มีรูปแบบดังนี้ <input type=”password" name="ชื่อของ password" value=”ค่าเริ่มต้น” size=”ขนาดPassword" maxlength="จำนวนสูงสุด"> (3) การสร้างช่องรับข้อมูลชนิด Text Area ช่องรับข้อมูลชนิด Text Area เป็นการรับข้อมูลที่มีความยาวมาก ๆ ส่วนใหญ่จะใช้กับข้อมูล ที่เป็นการแสดงความคิดเห็น มีรูปแบบดังนี้ <textarea name=”ชื่อ TextArea” clos=”จำนวนตัวอักษรในแต่ละแถว" rows="จำนวนแถว”> ...ค่าเริ่มต้นของแท็กมีหรือไม่มีก็ได้...</textarea> (4) การสร้างช่องรับข้อมูลชนิด Check Box Check Box เป็นการรับข้อมูลจากการให้คลิกเลือกข้อมูลที่กำหนดมาให้ โดยสามารถเลือกได้ มากกว่าหนี่งหัวขัย check box จะนิยมนำมาใช้กับการรับขัยมูลชนิตที่สามารถเลือกได้หลายข้อ มีรูปแบบดังนี้ <input type=”checkbox” name="ชื่อของ checkbox” value="ค่าเริ่มต้นของ checkbox”> (5) การสร้างช่องรับข้อมูลชนิด Radio Button การสร้างช่องรับข้อมูลชนิด Radio Button เป็นการรับข้อมูลจากหัวข้อที่กำหนดมาให้ โดย สามารถเลือกได้เพียงหัวข้อเตียวเท่านั้น มีรูปแบบคังนี้ <input type=”radio” name="ชื่อของ Radio” value=”ค่าของRadio”>
14 การสร้างเว็บไซต์ 14 (6) การสร้างช่องรับข้อมูลชนิด Selection Box การสร้าง Selection Box หรือ Drop Down List หรือList Box คือการรับข้อมูลจาก List รายการที่มีให้เลือกโดยสามารถลือกได้เพียงแค่หนึ่งรายการ จะใช้กรณีที่มีรายการให้เลือกมาก ๆ เพื่อประหยัด เนื้อที่ในการแสดงข้อมูล มีรูปแบบดังนี้ <select name="SelectionBox” size=”จำนวนรายการ"> <option value="ค่าของรายการที่ 1">รายการที่ 1 </option> . . . </selects> (7) การสร้างปุ่ม (Button) การสร้างกุมหรือ Button ในฟอร์มสามารถสร้างได้ทั้งปุ่มส่งข้อมูลหรือสั่งให้ทำงานที่เรียกว่า Submit และปุมยกเลิกการทำงานหรือ Reset การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการ กำหนดค่าที่จะแสดงบนปุ่มที่ value ซึ่งมีรูปแบบดังนี้ <form> <input type="button” name="ชื่อ button” value="ค่าข้อมูล”> </form> 3. การจัดกลุ่มรายการ <optgroup> เป็นการกำหนดกลุ่มของตัวเลือก (Options) ที่เกี่ยวข้องในรายการ โดยใช้แท็กคำสั่ง optgroup จัดกลุ่มให้กับตัวเลือกแบบรายการเลือนลง ซึ่งมีรูปแบบดังนี้ <select name=”selectName”> <optgroup label="ชื่อ Group”> <option value=”ค่าของตัวเลือก 1” >ข้อความที่ต้องการแสดง</option> <option value=”ค่าของตัวเลือก2”>ข้อความที่ต้องการแสดง</option>
15 การสร้างเว็บไซต์ 15 <option value=”ค่าของตัวเลือกก">ข้อความที่ต้องการแสดง</option> </optgroup> <optgroup label=”ชื่อ Group” > <option value="ค่าของตัวเลือก1”>ข้อความที่ต้องการแสดง</option> <option value="ค่าของตัวเลือก2">ข้อความที่ต้องการแสดง</option> <option value="ค่าของตัวเลือกn”>ข้อความที่ต้องการแสดง</option> </optgroup> </select> 4. การจัดแบ่งแบบฟอร์ม <fieldset> การจัดกลุ่มพิลด์ป้อนข้อมูลในฟอร์มที่มีความสัมพันธ์กัน จะทำให้ฟอร์มมีความเป็นระเบียบสวยงาม และผู้ใช้งานสามารถเข้าใจและป้อนข้อมูลได้สะดวกมากขึ้นโดยมีรูปแบบดังนี้ <form> <fieldset> <legend>ชื่อกลุ่มข้อมูล<legend> ส่วนประกอบของฟอร์ม </fieldset> <fieldset> <legend>ชื่อกลุ่มข้อมูล<legend> ส่วนประกอบของฟอร์ม </fieldset> </form>