การสร้างฟอร์ม

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

แบบฟอร์ม : ลักษณะการใช้งานและประโยชน์  

 

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

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

วิธีการที่ใช้รับข้อมูลในแบบฟอร์มนั้นก็มีอยู่ด้วยกันหลายวิธีโดยขึ้นอยู่กับวัตถุประสงค์ของผู้สร้างแบบฟอร์มรวมทั้งข้อมูลที่เป็นไป

สร้างแบบฟอร์มใช้ในเว็บเพจ           
 
                     แบบฟอร์มถือว่าเป็นหัวใจสำคัญที่จะถูกใช้เมื่อเราต้องการข้อมูลจากผู้ใช้งานเว็บเพจ ไม่ว่าเว็บไซต์ไหนถ้าต้อง
การข้อมูลจากผู้ใช้ต่างก็ใช้แบบฟอร์มกันทั้งนั้น ซึ่งรูปแบบในการรับข้อมูลจากผู้ใช้ก็มีหลากหลายเช่นเดียวกับแบบฟอร์มในรูป
แบบของกระดาษที่เราใช้กันอยู่เป็นประจำนั้นเอง  เราจะได้ศึกษากันว่ามีรูปแบบใดในการรับข้อมูลจากผู้ใช้ได้บ้างและมีวิธีการ
นำข้อมูลที่ได้รับมาไปใช้ได้อย่างไร
 
แบบฟอร์ม : ลักษณะการใช้งานและประโยชน์       
                         ตั้งแต่เราเกิดมาก็คุ้นเคยดีกับการกรอกข้อมูลลงในแบบฟอร์มต่างๆ ไม่ว่าจะเป็นการกรอกข้อมูลส่วนตัวเวลา
เข้าเรียนหรือทำงานในที่ใหม่  หรือจะเป็นการกรอกข้อมูลเพื่อสมัครใช้บริการหรือติดต่อกับสถานที่ราชกาลต่างๆ  จนกล่าวได้ว่า
ทุกคนต้องเคยกรอกแบบฟอร์มกันมาแล้วอย่างน้อยไม่ต่ำกว่า  10 ครั้ง  ลักษณะของแบบฟอร์มจะแตกต่างกันไปขึ้นอยู่กับ
สไตล์ของผู้ที่จัดทำแบบฟอร์มขึ้น โดยสิ่งที่ผู้จัดทำแบบฟอร์มได้รับก็คือ  ข้อมูลส่วนตัวหรือความคิดเห็นของผู้กรอกแบบฟอร์ม
นั่นเอง
                        รูปแบบการรับข้อมูลในเว็บเพจก็มีลักษณะเช่นเดียวกับรูปแบบการรับข้อมูลในชีวิตจริง  ซึ่งจะเห็นได้จากเว็บ
ไซต์ที่มีการรับสมัครสมาชิกเพื่อใช้บริการของเว็บไซต์  หรือเว็บไซต์ที่เปิดโอกาสให้ผู้ใช้ได้แสดงความคิดเห็นต่าง ๆ  ก็จะมีแบบ
ฟอร์มรับข้อมูลจากผู้ใช้เช่นกัน โดยเราสามารถตกแต่งหน้าตาของแบบฟอร์มได้ตามที่ต้องการโดยใช้ข้อความรูปภาพ หรือตาราง
ตามที่ได้ศึกษากันมาเป็นอย่างดีแล้ววิธีการที่ใช้รับข้อมูลในแบบฟอร์มนั้นก็มีอยู่ด้วยกันหลายวิธีโดยขึ้นอยู่กับวัตถุประสงค์ของผู้สร้าง
แบบฟอร์มรวมทั้งข้อมูลที่เป็นไปได้ อย่างเช่น  จากภาพตัวอย่างคือ ช่องรับข้อมูล  2ช่อง  โดยช่องแรกด้านบนมีไว้สำหรับรับชื่อผู้ใช้
ส่วนช่องที่สองด้านล่างมีไว้รับรหัสผ่านของผู้ใช้ซึ่งได้กรอกไว้ในช่องแรก  สาเหตุที่ผู้สร้างแบบฟอร์มเลือกใช้ช่องรับข้อมูลลักษณะ
เช่นนี้ก็เนื่องมาจากชื่อผู้ใช้และรหัสผ่านมีโอกาสที่จะเป็นอะไรก็ได้ การเลือกใช้ช่องรับข้อมูลประเภทนี้จึงเหมาะสม
 
 ช่องรับข้อมูลประเภทต่างๆ  
 
                        ในแบบฟอร์มหนึ่ง ๆ  จะมีช่องรับข้อมูลอยู่อย่างน้อย 1 ประเภท  โดยที่เห็นกันเป็นประจำก็คือ ช่องรับข้อ
มูลประเภท  Text การสร้างช่องรับข้อมูลนั้นส่วนใหญ่จะเกิดจากการใช้งาน  <INPUT>แล้วกำหนดประเภทช่องรับข้อมูล
ให้เป็นแบบที่ต้องการโดยใช้แอตทริบิวต์ของ <INPUT>ตัวอย่างการสร้างช่องรับข้อมูลประเภทต่าง ๆ เป็นดังนี้
 
 ช่องรับข้อมูลประเภท   Text
 
                        ช่องรับข้อมูลประเภท  Text จะมีลักษณะเป็นช่องรับข้อมูลขนาดบรรทัดเดียว  โดยที่ผู้ใช้สามรถพิมพ์
ตัวอักษรเข้าไปได้ไม่จำกัด (ถ้าผู้สร้างแบบฟอร์มไม่ได้จำกัดไว้)
 
 สร้างช่องรับข้อมูลประเภท  Text
 
                        ก่อนที่เราจะสร้างช่องรับข้อมูลใด ๆ  นั้นเราจะต้องกำหนดขอบเขตของแบบฟอร์มด้วย <FORM>ซึ่งมี
รูปแบบการใช้งานดังนี้
 
 ชื่อแท็ก:         FORM
 รูปแบบ:         <FORM> ช่องรับข้อมูลประเภทต่าง ๆ </FORM>
 ตัวอย่างการใช้:      <form><input…></form>
 ตำแหน่งที่ใช้:       ระหว่าง   <BODY>…</BODY>
 
เมื่อกำหนดขอบเขตของแบบฟอร์มเป็นที่เรียบร้อยแล้วก็เริ่มสร้างช่องรับข้อมูลที่ต้องการโดยใช้    <INPUT>   
 
 ชื่อแท็ก:          INPUT
 ชื่อแอตทริบิวต์:      TYPE
 รูปแบบ:          <INPUT  TYPE=”ชนิดของช่องรับข้อมูล”>
 ตัวอย่างการใช้:       <input type=”text”>
 ตำแหน่งที่ใช้ :        <INPUT> ถูกใช้ระหว่าง    <FORM>…</FORM>
 
                        ตัวอย่างแรกนี้คือ  ขั้นตอนที่ใช้สร้างช่องรับข้อมูลประเภท   text   โดยใช้  <INPUT>
ที่มีแอตทริบิวต์    TYPE   เป็น   TEXT 
             1.เพิ่ม    <FORM>  เข้าไว้ในเว็บเพจ
             2.สร้างช่องรับข้อมูลประเภท    text ด้วย   <INPUT>   
 
กำหนดขนาดของข้อมูลที่สามรถรับได้  
 
                        นอกจากขนาดของช่องที่เราสามารถกำหนดได้แล้ว  ขนาดของข้อมูลก็สามารถกำหนดได้โดยมีวิธีกำหนดเป็น
จำนวนตัวอักษรเช่นกัน   ประโยชน์ของการกำหนดขนาดของข้อมูลก็คือ  ใช้สำหรับจำกัดข้อมูลที่ผู้ใช้ป้อนมาไม่ให้เกินความ
ต้องการของเรา  เช่น ชื่อ  Username(เป็นภาษาอังกฤษ)ที่บางเว็บไซต์จะจำกัดไว้ให้กำหนดได้ไม่เกิน 8 ตัวอักษร 
(กรอกได้ตั้งแต่   1-8   ตัวอักษร)
             รูปแบบการใช้งานแอตทริบิวต์  MAXLENGTH   เพื่อจำกัดข้อมูลที่สามรถรับได้เป็นดังนี้
 
 ชื่อแอตทริบิวต์:    MAXLENGTH  
 รูปแบบ:        <INPUT   MAXLENGTH=”ขนาด”>
 ตัวอย่างการใช้:     <input    maxlength=”8”>
 ตำแหน่งที่ใช้:      ภายในแท็กเปิดของ   <INPUT>   
 
                        เมื่อต้องการจำกัดขนาดของข้อมูลไว้ที่  8 ตัวอักษรให้เราทำตามขั้นตอนดังต่อไปนี้
 1.กำหนดจำนวนข้อมูลที่ต้องการจำกัดให้กับแอตทริบิวต์  MAXLENGTH ในตัวอย่างได้กำหนดไว้ที่  8 ตัวอักษร

แสดงชื่อไว้หน้าช่องรับข้อมูล         
 
                        โดยหลักการแล้วเมื่อต้องการจะกำหนดชื่อหน้าช่องให้กำหนดด้วยการใช้  <LABEL> โดยกำหนดให้
<LABEL> คร่อม   <INPUT>แล้วพิมพ์ชื่อของช่องไว้หน้า  <INPUT>   
 
 ชื่อแท็ก :       LABEL
 รูปแบบ:       <LABEL>ชื่อที่ต้องการให้ปรากฏหน้าช่องรับข้อมูล</LABEL>
 ตัวอย่างการใช้:    <label>username:<input…</lable>
 ตำแหน่งที่ใช้:     <LABEL>จะใช้คร่อม    <LABEL>   
 
 ข้อควรจำ
 การกำหนดชื่อหน้าช่องรับข้อมูลยังสามารถทำได้อีกวิธีหนึ่งคือ  การเพิ่ม   <LABEL> ไว้หน้า  <INPUT>
 แล้วกำหนดค่าแอตทริบิวต์  FOR ของ   <LABEL> และแอตทริบิวต์   ID ของ  <INPUT>ให้มีค่าเป็นชื่อเดียวกันดังนี้
<label for=”anyname”>Username:</label><input id=”anyname”type=”text”>
 
 เราจะมากำหนดชื่อให้ช่องรับข้อมูลประเภท   Text ซึ่งได้สร้างไว้แล้วในตัวอย่างที่ผ่านมา  โดยกำหนดให้มีชื่อว่า
“ Username:” เนื่องจากต้องการให้ช่องดังกล่าวใช้รับชื่อผู้ใช้งาน
        1.เพิ่ม    <LABEL> คร่อม     <INPUT>   
        2.กำหนดชื่อที่ต้องการไว้ระหว่าง   <LABEL>…</LABEL>

 ช่องรับข้อมูลประเภท    Hidden
 
                        ผู้ใช้ทั่วไปจะไม่สามารถมองเห็นช่องรับข้อมูลประเภทนี้ได้  เพราะช่องรับข้อมูลประเภทนี้จะถูกซ่อนไว้
(ไม่ปรากฏบนเว็บเพจ)โดยถ้าเราต้องการใช้ภาษา    HTML เพื่อสร้างเว็บเพจขึ้นมาเท่านั้นก็คงจะไม่ได้ใช้ประโยชน์จาก
ช่องรับข้อมูลประเภทนี้แต่อย่างใด เนื่องจากช่องรับข้อมูลประเภทนี้มักใช้สำหรับส่งข้อมูลบางอย่างไปให้สคริปต์ที่ประมวลผล
ข้อมูลจากแบบฟอร์มนั้นๆ
 
สร้างช่องรับข้อมูลประเภทนี้   Hidden
 
                        นอกจากเราจะต้องเปลี่ยนค่าของแอตทริบิวต์    TYPE ให้เป็น   HIDDEN แล้วเรายังจะต้องใช้แอตทริบิวต์อีก 2  ตัวคือ NAME
 และ VALUE   เพื่อกำหนดชื่อของข้อมูลสำหรับใช้อ้างถึงในสคริปต์  และกำหนดข้อมูลที่ต้องการส่งไปให้สคริปต์ด้วยเนื่องจากเราไม่สามารถ
รับข้อมูลจากผู้ใช้ได้เหมือนช่องรับข้อมูลประเภทอื่น
 
สำหรับคนที่เคยเขียนโปรแกรมมาบ้างแล้วจะเห็นได้ว่าเราสามารถเปรียบแอตทริบิวต์  NAME ได้กับชื่อตัวแปร  ส่วนแอตทริบิวต์
VALUE ก็คือ  ค่าของตัวแปรนั่นเอง
 
รูปแบบที่ใช้สร้างช่องรับข้อมูลประเภท    Hidden เป็นดังนี้
 
 ชื่อแอตทริบิวต์:      NAME,VALUE
 รูปแบบ :         <INPUT  TYPE=”HIDDEN” NAME=”ชื่อสำหรับอ้างถึง”VALUE=”ข้อมูล
                                                              ที่เป็นได้ทั้ง     ข้อความ    ตัวอักษร  หรือตัวเลข”>
 ตัวอย่างการใช้:      <input type=”hidden” name=”hidden_data”value=”14”>
 ตำแหน่งที่ใช้:          ภายในแท็กเปิดของ  <INPUT>
 
                        เมื่อต้องการส่งข้อมูลที่เป็นตัวอักษรแทนตัวเลข   14 ให้ทำตามตัวอย่างต่อไปนี้ โดยเราจะกำหนดให้อ้างถึงข้อมูลตัวนี้ด้วยชื่อ  
HIDDEN_DATA
         1.กำหนดค่าแอตทริบิวต์   TYPE ให้เป็น    HIDDEN   
         2.ตั้งชื่อสำหรับอ้างถึงข้อมูลที่จะส่งไป
         3.กำหนดค่าของข้อมูลเป็น  14 ตามที่ต้องการ
 

เปลี่ยนชื่อที่ปรากฏของปุ่ม   Submit      
 
                        ชื่อของปุ่ม   Submit ที่ผู้ใช้เห็นโดยปกติ   “Submit Query”แต่เพื่อให้มีความยืดหยุ่นและ
เป็นการช่วยให้ผู้ใช้งานฟอร์มของเราใช้งานฟอร์มได้ง่ายยิ่งขึ้นเราควรจะเปลี่ยนชื่อของปุ่มดังกล่าวด้วยแอตทริบิวต์   VALUE
 ซึ่งมีรูปแบบที่ใช้งานดังนี้
 
 ชื่อแอตทริบิวต์:     VALUE  
 รูปแบบ:         <INPUT TYPE=” SUBMIT” VALUE=”ชื่อที่ต้องการให้ผู้ใช้เห็น”>
 ตัวอย่างการใช้:      <input type=” Submit”  value=”คลิกเพื่อล็อกอิน”>
 ตำแหน่งที่ใช้:        ภายในแท็กเปิดของ      <INPUT>
 
                         เนื่องจากตัวอย่างที่ผ่านมาเป็นการสร้างปุ่ม   Submit สำหรบให้ผู้ใช้ส่งชื่อผู้ใช้และรหัสผ่านเพื่อล็อกอินเข้าสู่ระบบ   ดังนั้นเรา
จึงจะเปลี่ยนชื่อของปุ่ม Submit จากชื่อปกติเป็น   “คลิกเพื่อล็อกอิน”
             1.  เพิ่มแอตทริบิวต์  VALUE โดยกำหนดค่าเป็น    “คลิกเพื่อล็อกอิน”
 
 

flower03

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: