Learning Step by Step to build your home by Easyhome in Thailand

当広告について : Sponsor Links

Wait to Order

Step by Step

Getting Organized!

HTML Editors

FTP to your site

Search Engine

HTML (TAG)

RGB to HEX Color

CGI Forms

Frames Tutorial

JavaScript

HTML Q&A

Creating Forms and Guestbooks

การเพิ่มสมุดเยี่ยมหรือแบบฟอร์มสำหรับกรอกแสดงความคิดเห็นที่มีต่อเว็บไซต์ของคุณเป็นสิ่งที่ดี การทำงานของระบบโต้ตอบจะอาศัย CGI (common gateway interface) Scripts ซึ่งเป็นโปรแกรมเล็กๆ ที่ทำงานในฝั่งเซิร์ฟเวอร์ คอยรับการเรียกจากหน้าเว็บเพจ แล้วนำข้อมูลที่กรอกผ่านแบบฟอร์มนั้นส่งให้คุณผ่านทาง E-mail ซึ่งมีส่วนประกอบสำคัญ 3 ส่วนเพื่อให้การทำงานถูกต้อง

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

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

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 :

2. นี่คือตัวอย่าง HTML code ที่คุณจะใส่ลงในหน้าเว็บเพจในตำแหน่งที่ต้องการ

เริ่มต้นแบบฟอร์มด้วยบรรทัดนี้ :
<FORM METHOD="POST" FORM ACTION=" [......PATH......] " >

และตามด้วยคำสั่งสำหรับการกำหนดรูปแบบการเลือกและฟอร์มกรอกข้อความดังตัวอย่าง

	<INPUT NAME="blank" TYPE="text" SIZE="20">
	<SELECT NAME="pulldown"> <OPTION SELECTED>Select Here...</OPTION> <OPTION>#1</OPTION> <OPTION>#2</OPTION> <OPTION>#3</OPTION> </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>

ความหมายของคำสั่งที่ปรากฏ :

NAME คือ ชื่อของส่วนรับข้อมูลในตำแหน่งนั้น สามารถเปลี่ยนให้ตรงกับชนิดของข้อมูลที่ต้องการรับได้
SIZE คือ การกำหนดขนาดช่องรับข้อมูล
TYPE คือ ชนิดฃองส่วนรับข้อมูล เช่น text, radio หรือ checkbox
SELECT คือ การกำหนดให้มีตัวเลือกหลายตัว ในระหว่างคำสั่งนี้จะมีตัวเลือกซึ่งอยู่ภายในคำสั่ง OPTION อีกชั้นหนึ่ง
TEXT AREA ช่องกรอกข้อความในแบบฟอร์ม ซึ่งจะต้องระบุจำนวนบรรทัดและคอลัมน์ด้วยคำสั่ง ROWS & COLS เพื่อกำหนดขนาดช่องกรอกข้อความ
VALUE คือ ค่าที่จะถูกส่งไปหาคุณว่าผู้ชมเลือกข้อใดตามที่ออกแบบไว้

อันดับสุดท้ายคุฯต้องใส่ปุ่มสำหรับให้ผู้ชมกดยืนยันเพื่อส่งข้อความ SUBMIT หรือปุ่มยกเลิกข้อความหรือการเลือกต่างๆ ที่ได้ทำไว้ CLEAR ปุ่มจะถูกสร้างขึ้นโดยอัตโนมัติเมื่อเราระบุค่าใน VALUE ตามตัวอย่าง

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

3. ขั้นสุดท้ายก็เป็นการออกแบบไฟล์ข้อความที่จะรับข้อมูล ซึ่งโปรแกรม CGI จะอ่านจากเว็บเพจที่ผู้ชมได้กรอกข้อความหรือเลือกตัวเลือกต่างๆ และส่งผ่านไปยังอีเมล์ต่อไป เช่น Name, Address เป็นต้น ให้มีความสัมพันธ์กับแบบฟอร์มในเพจโดยให้ตัวแปรอยู่ภายในเครื่องหมาย [ ตัวแปร ] และจัดเก็บลงในไฟล์ข้อความ text file โดยตั้งชื่อให้ตรงกับที่กำหนดไว้ในส่วนหัวของฟอร์ม ดังตัวอย่าง

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

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

From: [Name] <[email]>
To: webmaster@easyhome.in.th
Subject: GUESTBOOK ENTRY

[Name]
[email]

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

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