Note: หรือถ้าลองทำแล้วไม่ work ให้เปลี่ยน &It ไปเป็นเครื่องหมายเปิดแทก "<" แทน ดู และให้ใช้กับ ทุกตัวอย่างในทุกบทเรียนเลยครับ.

เริ่มต้นเราจะเริ่มด้วยแทกฟอร์มพื้นฐานอย่างง่ายๆ กัน. คือ &ltform> </form>. ง่ายไหมครับ? ต่อไปก็บบอกฟอร์มว่าจะให้ทำอะไร.

&ltform method=POST action="mailto:username@domain.com">

มีสองวิธีคือ: POST และ GET. GET ใช้เพื่อบรรทึกข้อมูลจากเว็ปไซร์ลงหน่วยความจำ ไว้เป็น ฐานข้อมูล. ตัวอย่างเช่น:

&ltform method=GET action="index.html">
&ltinput type="submit" value="Click Here To Reload This Page">
</form> would result in

POST จะสามารถทำงานได้เกือบทุกอย่าง ที่คุณต้องการ. โดย action จะบอก form ว่า ต้องการให้ทำอะไร. ถ้าคุณต้องการให้ form ส่งอีเมล์ให้ผู้ชม, คุณสามารถทำได้โดยทำตาม ตัวอย่างแรกครับ. แต่คุณอาจะไม่ชอบผลที่ออกมาก็เป็นได้. โดยปกติจะได้ผลคล้ายๆ แบบนี้ครับ:

name+john&+henry&+address+p+o+box&...

เห็นได้ชัดน๊ะครับ, ผลลัพธ์ค่อนค่างอ่านยาก. เพราะฉะนั้นคุณสามารถพยายามเพิ่ม ENCTYPE="TEXT/PLAIN" แทก เพื่อกำจัดปัญหานี้ ถ้าคุณมีเบลาเซอร์ตัวใหม่. วิธีดีที่สุดและใช้ได้ผลคือคือใช้ CGI Scripts เพื่อกรองสิ่งที่ไม่ต้องการออกก่อน แล้วจึงอีเมล์ผล ตอบกลับมาให้คุณ.

หลังจากแทกฟอร์แรก, คุณก็จะได้ผลคล้ายๆ ข้างล่างนี้...

Text Box &ltinput type="text" name="first name" size=20>

แทกนี้ช่วยให้ผู้เยี่ยมสามารถพิมพ์บางอย่างลงไป. ในตัวอย่างนี้, จะเป็นชื่อ first name. ส่วน size จะบอกเบลาเซอร์ว่าช่อง box ควรจะกำหนดให้ใหญ่แค่ไหน. ส่วน name สามารถเป็นได้ทุกอย่างที่คุณต้องการกำหนด. มันแค่เป็นตัวกำหนดการควบคุม การตอบสนองคำตอบ. (ตัวอย่างเช่นกำหนด. name="first name" ก็จะตอบกลับเป็น first name=Answer)
= &ltinput type="text" size=30>

Hidden Box &ltinput type="hidden" name="whatever" value="whatever">

This is not seen by the user, but is sent to the owner with whatever="whatever" in the response. There's no need for size. Some CGI scripts require this, but more on that later.

Radio Buttons &ltinput type="radio" name="whatever" value="whatever">

แทกนี้จะสร้างช่องกลมว่างเล็กๆ radio butonหรือ little round button สามารถคลิกเพื่อที่จะเลือก ต้วเลือก ต่างๆ. เป็นเทคนิคที่ใช้เวลาคุณต้องการ ตัวเลือกให้ผู้เยี่ยมเลือก, อย่างเช่น Yes หรือ No. แต่มีข้อจำกัดเพียงแค่ ต้องเลือก ระหว่างช่องนี้และอีกช่องหนึ่งเท่านั้น แต่แก้ได้ ถ้าต้องการให้เลือก ได้มากกว่านี้ ให้ใส่โค๊ตคำว่า "multiple" ลงในบรรทัดแทก.
Example = &ltinput type="radio"> หรือลอง <input type="radio" value="V1" name="R1">

Checkbox's &ltinput type="checkbox" name="whatever" value="whatever">

แทนที่จะจะสร้างช่องกลมว่างเล็กๆ แทกนี้จะสร้างช่องสี่เหลี่ยมว่างเล็กแทน. ช่องชนิด สี่เหลี่ยม box นี้เหมาะถ้าคุณต้องการให้มีตัวเลือกมากๆ ส่วนช่องกลม radio button นั้นหมาะถ้าคุณต้องการให้เลือกได้เพียงตัวเดียว.
= &ltinput type="checkbox"> หรือลอง <input type="checkbox" name="C1" value="ON">

Password Box &ltinput type="password" name="whatever" value="whatever">

แทกนี้จะสร้าง ช่องให้ผู้เยี่ยมพิมพ์ต้วอักษรลงไป, แต่แทนี่จะแสดงผล input หรือตัวอักษรที่พิมพ์นั้นออกมา, มันจะแสดง ******* แทนตาจำนวนอักษรที่พิมพ์ ลงไป.
= &ltinput type="password" size=30>

Text Areas &lttextarea name="textarea" rows=3 cols=40>

แทกนี้จะสร้าง textarea ในส่วนสำหรับการตอบคำถามของผู้เยี่ยมi ซึ่ง require ให้คำตอบต้อง ยาวกว่าสองถึงสามคำ. คุณสามารถใส่ line wrap="virtual" เพื่อกำหนดปุ่ม bottom scroll buttons ด้านล่างให้หายไป.

&lttextarea rows=3 cols=40></textarea>

Drop Down Lists

แทกนี้ถ้าคุณต้องการให้เห็นการแสดงตัวเลือกเป็น list of choices, แต่ไม่ต้องการใช้ ปุ่ม radio หรือ checkbox. คุณสามารถเซ็ตตัวเลือกขึ้นมาได้ง่ายมากครับ. ตัวอย่างเช่น:

&ltselect name="select" size= 1>
&ltoption> Option #1
&ltoption> Option #2
&ltoption> Option #3
</select>

Option #1 Option #2 Option #3

เป็นแทกที่ใช้ง่ายๆ คุณสามารถปรับ size และกำหนดให้มีตัวเลือกได้มากเท่าที่คุณ ต้องการ. ผู้เขียนหนดไว้เพียง 1 เท่านั้น, แต่คุณสามารถปรับให้มากหรือ น้อยตาม พอใจ. และถ้าคุณต้องการให้มีมากกว่าหนึ่งตัวเลือก one selection, ก็เพียงแต่ใส่แทกนี้ ลงไปอีกครั้ง หลังจากนี้.

&ltinput type="submit" value="Submit!">

นี้คือปุ่ม ซึ่งผู้เยี่ยมจะคลิกเพื่อส่งฟอร์ม หรือ form in นั้นๆ ตามแต่วิธี set up ของคุณ. คุณสามารถปรับเปลี่ยน value ได้เองตามชอบใจ.

&ltinput type="reset" value="Clear This Form">

แทกทำงานตรงตามความหมายที่บอกไว้ - มันจะ resets ฟอร์ม. บางครั้งผู้เยี่ยมกรอก ฟอร์มแล้วอาจเปลี่ยนใจ หรืออาจเสียเวลามากไป ไว้ว่าจะเหตุจากอะไร, เขาจะ สามารถคลิกปุ่ม "Clear This Form" นี้แล้วทุกอย่างจะหายไป. คุณสามารถปรับเปลี่ยน value="" ได้เองตามชอบใจว่าต้องการให้เขียนว่าอะไรบนปุ่ม.

เป็นอันว่า คุณรู้จักคำสั่ง commands ต่างๆแล้ว, มาดูอีกอย่างหนึ่งกันlet's see one in action. คุณสามารถด sources ูโค๊ตฟอร์มนี้ได้โดยคลิกที่นี้ here. มาเริ่มกัน. โดยกรอกรายละเอียด ของฟอร์มต่อไปนี้:

What is your name?
What is your email address?
How old are you?
Where are you from? City: State:

How did you find my page?

a friend
a link from another page
a search engine
I have no clue!

How would you rate my page? 5 Stars (This is awesome!) 4 Stars (This is great!) 3 Stars (This site is above average!) 2 Stars (This site is alright, I guess.) 1 Star (This site should be demolished.)

What other pages of mine have you visited?

The main page
The Comics page
The Guitar page
The Cartoons page
None - I haven't been anywhere

ตอนนี้ คุณเดาออกหรือยังว่าเพจนี้คืออะไรครับ. (ใจเย็นๆ น๊ะครับ!)

หวังอย่างยิ่งว่า, คำตอบเหล่านี้ จะสามารถตอบคำถามที่คุณมีเกี่ยวกับฟอร์ม ได้บ้างไม่มาก ก็น้อย ยกเว้นคำถามที่ว่า ทำอย่างไรจะให้ได้ผลลัพธ์ที่สมบูรณ์ทีสุด? ตอนที่ผู้เขียนทำมัน ผู้เขียน ก็ได้ความรู้มากมายจากสิ่งที่ทำผิดพลาด ครั้งแล้วครั้งเล่านั้นแหละครับ.
คำตอบจึงเป็นว่า ไม่มีอะไร มันไม่ใ่ช่ความผิดของคุณ นั้นเป็นเพียงวิธีที่ mail program อ่านมันsees it. ุถ้าคุณต้องการให้ได้ผลงานดี nice output เหมือนอย่างผู้เขียน, คุณควรลอง สำรวจห้อง CGI section ต่างๆ ในไซร์นี้, หรือลองถามผู้ดูแลเซฟเวอร์ของคุณ local sysadmin ว่าพวกเขาเก็น cgi script เหล่านั้นไว้ที่ไหน บางทีเขาอาจอนุญาติให้คุณใช้ก็เป็นได้.

Return Home

All Artwork & Design ฉ 1997-1999 Krit Spooker