HTML Tips cgi tips

การสร้าง Forms และ Guestbooks บนเว็ปเพจ

การสร้าง guestbook และ form บนเว็ปเพจเป็นงานง่ายๆ, แต่ does require some work from you, the client. Forms สามารถทำงานได้โดยอาศัยการทำงานของสคริปร์ CGI (common gateway interface) เป็นตัวกลาง ซึ้งเป็นโปรแกรมปกติที่จำเป็นต้องมีบนเซฟเวอร์ และเมื่อมีการเรียก ใช้ CGI ก็จะเริ่มทำงานทันที ในที่นี้จะยกต้วอย่าง แบบฟอมร์ E-Mail. เมื่อ user พิมพ์ข้อความลงไป โปรแกรมนี้จะทำงานโดยจะ นำข้อมูลไปเก็บไว้ในรูป text file, และทำการอีเมล์ text file นั้นไปยัง ไปยัง email address เป้าหมายซึ่งกำหนดไว้ ในที่นี้จะสำมุติให้เป็น email address ของผู้บริหารเว็ป เพจ หรือคุณนั้นเอง. โดยมีขั้นตอนที่จำเป็น 3 ขั้นตอนเพื่อทำให้ form นี้ทำงาน คือ:

path จำเป็นต้องบอก browser ว่า CGI program located อยู่ที่ไหน & text file อยู่ที่ไหน. เมื่อคุณรู้แน่ว่า ISP ของคุณใหับริการ CGI-Email program, คุณจำเป็นต้องขอ path นั้นมา. เพี่อใช้ในขั้นตอนต่อไป. ตังอย่างเช่น: /cgi-bin/cgiemail/guestbok.txt
ต้องมีโค๊ต HTML ซึ่งเป็นองค์ประกอบอยู่บนเพจของคุณ.
จะต้องสร้าง text page ขึ้น, ซึ้งทั้งสองขั้นตอนจะต้องตอบสนอง กับ user ผู้กรอกแบบฟอมร์และ ขัอมูลของที่ถูกกรอกซึ่งจะถูกอีเมล์กลับไปให้คุณ.

1. ขั้นตอนแรกต้องตัดสินใจว่า คุณต้องการ input boxes ชนิดใด หรือข้อมูลอะไรบ้างให้ปรากฏใน form ของคุณ. นี่คือตัวอย่างของ form:

2. ตอนนี้เป็นขั้นตอนการเขียน begin your HTML code สำหรับ form ของคุณ เพื่อเซ็ตให้ form สามารถเรียก CGI ให้ทำงานได้.
โดยเริ่มต้นด้วยบรรทัดนี้: <FORM METHOD="POST" FORM ACTION=" [......PATH......] " > หรือ ตัวอย่างการกำหนด path เช่น <FORM METHOD="POST" FORM ACTION=" http://cgi.fortunecity.com/user-cgi/FormMail.pl" >

นี้คือตัวอย่างการโปรแกรมหลายๆ แบบ ของ input fields.

	<INPUT NAME="blank" TYPE="text" SIZE="20">
	<SELECT NAME="pulldown"> <OPTION SELECTED&gtSelect Here...<OPTION&gt#1<OPTION&gt#2<OPTION&gt#3</SELECT>
Here: Or Here:	Here:<INPUT NAME="circle" TYPE="radio" VALUE="1" checked> Or Here:<INPUT NAME="circle" TYPE="radio" VALUE="2">
Click Here: And Here:	Click Here:<INPUT TYPE="checkbox" NAME="box" value="1st"> And Here:<INPUT TYPE="checkbox" NAME="box" value="2nd">
	<TEXTAREA NAME="comments" ROWS="4" COLS="40"></TEXTAREA>

ตอนนี้คุณคงจะเข้าใจ code บ้างแล้ว นี้คือคือต้วอย่างความหมายบางตัวของ code ซึ่งอาจช่วยให้คุณ เข้าใจได้มากขึ้น:

NAME คือชื่อสำหรับ input field และสามารถเป็นได้ทุกอย่างที่คุณต้องการให้เป็น. ซึ่งต้องเป็นชื่อเดียวกับชื่อที่คุณเขียนไว้ใน text file ซึ่งกำลังจะอธิบายในขั้นตอนต่อไป.
SIZE บอกขนาดของไฟล์ text input field.
TYPE คือชนิดของ input field. ซึ่งสามารถเป็น text, radio, หรือcheckbox.
SELECT ต้องมีการเปิด และปิด tag ด้วยคำสั่ง SELECT เสมอ. ตัวเลือกต่างๆ ของ options จะแยกแยะด้วย OPTION tag.
TEXT AREA ต้องมีการเปิด และปิด tag ด้วยคำสั่ง TEXT AREA เสมอ. แล้วก็ใช้ROWS & COLS tag ในการกำหนดขนาด size ของไดอะลอกล์ box.
VALUE คือสิ่งที่จะถูกพิมพ์ลงบน e-mail. กำหนดค่าให้เหมือนกับ text ข้อความที่คุณเขียน ไว้ข้างๆ มัน.

สิ่งสุดท้ายที่ต้องทำคือการเขียนโค๊ตสำหรับปุ่ม SUBMIT button และปุ่ม CLEAR button ใน HTML ของคุณ และทำการสั่ง ปิดการทำงานของฟอร์ม หรือ closing form tag. ปุ่มนั้นจะสร้างขึ้นเองโดย อัตโนมัติ หลังจากคุณพิมพ์ text คำสั่ง ดังตัวอย่างด้านล่างลงบน HTML tag ของคุณ:

	<INPUT NAME="name" TYPE="submit" VALUE="Submit This Thing">
	<INPUT NAME="name" TYPE="reset" VALUE="Wipe it Clean"></FORM>

3. ตอนนี้คุณก็จำเป็นจะต้องสร้าง text file. โปรแกรม CGI จะอ่าน input จาก HTML page แล้วนำ ข้อมูลที่กรอกใน input นั้นมาเขียนลงใน text file นี้ แล้วทำการอีเมล์. ต้วอย่างการสร้าง text file นี้ หนัวข้อ topics อย่างเช่น Name, Address, etc...นั้นไม่จำเป็นต้องมีเสมอไปน๊ะครับ, แต่ถ้าคุณใช้มันก็ให้ใส่มันลงไป ก่อนแล้วจึงตามด้วยตัวอื่นๆ โดยให้อยุ่ใน brackets หรือเครื่องหมาย [ ]. ทำการ save text file โดยใช้ชื่อให้เหมือนกับที่คุณเขียนไว้ในส่วนต้นของ FORM tag. นี้คือตัวอย่างครับ:

First Name: [Name1]
Last Name: [Name2]
Address: [Address]
Your E-Mail: [Email]

ถ้าคุณยังงงงอยู่, table ข้างล่างจะแลดง Guestbook text file จริงๆของผู้เขียนครับ.


From: [Name]<[email]>
To: tron@xforce.com
Subject: GUESTBOOK  ENTRY

[Name]
[email]

[url]
[hometown]
[browser] [browser2]
[times]
[timespent]
[computer]
[monitor]
[how]  ([specify])
[more]
[maillist]
[guest]
[comments]

ตอนนี้คุณคงจะได้ความรู้ พื้นฐานในการสร้าง guestbook หรือ form บนเว็ปเพจบ้างแล้วน๊ะครับ. ไม่มาก ก็น้อย อย่าไปเครียดว่าต้อง สามารถเข้าใจหรือ สร้างใช้งานได้ทันทีน๊ะครับ สำหรับผู้เริ่มต้น พยายาม เข้าใจการทำงานของมัน ลองคลิกปุ่มต้วอย่างประกอบการอ่าน ลองเขียนสคริปร์ตามตัวอย่างลงบน HTML page ของคุณ แล้วลอง รันดู ว่าได้ความเปลี่ยนแปลงอย่างไรบ้าง ก็จะทำให้เข้าใจได้ง่ายขึ้น แลัวหลังจากอ่านบทต่อๆ คุณจะค่อยๆ ซึมความรู้อย่างกว้างภาพรวมการเขียนเว็ปไปเอง และในปัจจุบน editor ต่างๆ พัฒนาขึ้น มากจนไม่ต้องเขียน HTML tage สร้าง ปุ่มหรือฟอร์มเองแล้ว แต่ถึงยังไงคุณก็ควรจะเข้าใจการ ทำงานของมันเพื่อเป็นพื้นฐานในการประยุกค์ใช้งาน editor เหล่านั้นอยู่ดี. ถ้ายังมีข้อสงสัย ก็ถามฝ่าย tech support ของ ISP ที่คุณใช้อยู่ได้ครับ.

April 20, 2000 last update!


	All Artwork & Design ฉ 1997-1999 Krit Spooker

Fill in the blank:
Pull-Down Menus
radio buttons:	Check Here: Or Here: Or Here:
Check boxes:	Click Here: And Here: And Here:
Text Areas: