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

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]

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