คัมภีร์พื้นฐานลมปราณ HTML คำสั่งจัดการเกี่ยวกับการสร้างฟอร์มรับข้อมูล 1. <Form>.....</Form> เป็นแท็กคำสั่งสำหรับสร้างแบบฟอร์ม โดยมี Attribute ดังต่อไปนี้ ACTION ใช้กำหนดปลายทางของข้อมูล เพื่อบอกว่าข้อมูลจะถูกส่งไปปฏิบัติการที่ใหน โดยปกติจะเป็น URL ของ CGI สคริปต์ หรือสามารถส่งไปยังที่อยู่อีเมล์ได้โดยการเพิ่มคำสั่ง Mailto: เข้าไป รูปแบบ (ACTION="mailto:[email protected]") METHOD เป็น Attribute ที่ใช้กำหนดให้Browserแสดงผลด้วยFONTที่กำหนด มีรูปแบบคำสั่งดังนี้ <Font FACE="ชื่อฟอนต์"> ตัวอย่างการใช้งาน <FORM ACTION="mailto:[email protected]" METHOD="POST"></FORM> 2. <INPUT TYPE> ใช้เพื่อเติมฟิลด์รับข้อมูล กำหนดชนิดของข้อมูลในฟอร์ม มีรูปแบบดังนี้ <INPUT TYPE="ชนิดข้อมูล" NAME="ชื่อข้อมูล " VALUE="ค่าเริ่มต้นของข้อมูล"> ชนิดของข้อมูล 2.1 Text เป็นข้อมูลในรูปแบบที่เป็นข้อความ สามารถกรอกข้อความที่ไม่ยาวนักลงในช่องข้อมูลลักษณะนี้ได้ ตัวอย่างการใช้งาน <FORM ACTION="mailto:[email protected]" METHOD="POST"> ชื่อเล่น : <INPUT TYPE="text" NAME="nickname" ></FORM> ซึ่งจะแสดงผลหน้าจอดังนี้ ชื่อเล่น : 2.2 Redio botton เป็นปุ่มกลม ๆ ที่สามารถเลือกได้เพียงหนึ่งรายการเท่านั้น ตัวอย่างการใช้งาน <FORM ACTION="mailto:[email protected]" METHOD="POST"> <INPUT TYPE="radio" NAME="Sex" VALUE="ชาย" > ชาย <BR> <INPUT TYPE="radio" NAME="Sex" VALUE="ชาย" > หญิง <BR></FORM> ระบุเพศของคุณ <BR> ซึ่งจะแสดงผลหน้าจอดังนี้ ชาย หญิง ระบุเพศของคุณ 2.3 Check box เป็นช่องสี่เหลี่ยมจตุรัสเล็ก ๆ ที่สามารถเลือกได้มากกว่า 1 รายการ ตัวอย่างการใช้งาน <FORM ACTION="mailto:[email protected]" METHOD="POST"> <h3> ผู้หญิงน่ารักในหัวใจคุณ </h3> <INPUT TYPE="Checkbox" NAME="pik"> น้องปิ๊ก <BR> <INPUT TYPE="Checkbox" NAME="coach"> น้องโค๊ช <BR> <INPUT TYPE="Checkbox" NAME="keaw"> น้องแก้ว <BR> <INPUT TYPE="Checkbox" NAME="ann"> น้องต้อง <BR> </FORM> เลือกคนที่คุณคิดว่าน่ารัก (กี่คนก็ได้ที่น่ารัก)<BR> ซึ่งจะแสดงผลหน้าจอดังนี้ ผู้หญิงน่ารักในหัวใจคุณ น้องปิ๊ก น้องโค๊ช น้องแก้ว น้องต้อง เลือกคนที่คุณคิดว่าน่ารัก (กี่คนก็ได้ที่น่ารัก) 2.4 Selection เป็นแถบเลื่อนลิสต์รายการให้เลือกเหมือนการเลือกฟอนต์ในการใช้การโปรแกรมประมวลผลคำ อย่าง Word ต่าง ๆ ตัวอย่างการใช้งาน <Select name="mov"> <OPTION> Back To The Future<BR> <OPTION> Star Wars <BR> <OPTION> Scream <BR> <OPTION> The Lost of The Rings <BR> </Select> เลือกเพียง 1 ไตรภาคยอดเยี่ยมในหัวใจคุณ<BR> ซึ่งจะแสดงผลหน้าจอดังนี้ Back To The Future Star Wars Scream The Lost of The Rings เลือกเพียง 1 ไตรภาคยอดเยี่ยมในหัวใจคุณ คำสั่งเพิ่มเติม MULTIPLE คำสั่งนี้จะนำเอารายการทั้งหมดขึ้นค้างบนหน้าจอไว้ คล้ายกับการคลิกเมาส์ปุ่มขวา SIZE เพิ่มเข้าไปในคำสั่ง MULTIPLE เพื่อกำหนดขนาดการแสดงผลว่าจะแสดงผลกี่ตัวเลือกขึ้นหน้าจอ ตัวอย่างการใช้งาน <Select name="Siries" Multiple Size=3> <OPTION> Macgyver<BR> <OPTION> Star Gate SG-1 <BR> <OPTION> The X-Files <BR> <OPTION> The Visitor<BR> <OPTION> Time Track <BR> <OPTION> Slider <BR> <OPTION> Babylon 5 <BR> </Select> เลือกเพียง 1 มินิซีรีส์ประจำใจคุณ<BR> ซึ่งจะแสดงผลหน้าจอดังนี้ Macgyver Star Gate SG-1 The X-Files The Visitor Time Track Slider Babylon 5 เลือกเพียง 1 มินิซีรีส์ประจำใจคุณ 2.5 TextArea เป็นกรอบป้อนข้อความแบบหลายบรรทัด ขนาดของกรอบกำหนดได้ด้วยคำสั่ง ROWS ใช้กำหนดจำนวนแถว COLS ใช้กำหนดจำนวนคอลัมน์ในแต่ละแถว มีรูปแบบการใช้ดังนี้ <TextArea Name="note" row=5 Cols=45></Texaria> 2.6 SUBMIT ใช้สำหรับส่งข้อมูล หรือแบบฟอร์มที่กำหนดไว้ มีรูปแบบการใช้ดังนี้ <INPUT TYPE="Submit" NAME="ชื่อข้อมูล" VALUE="ค่าประจำข้อมูล"> ตัวอย่างการใช้ <INPUT TYPE="Submit" NAME="send" VALUE="ส่งข้อมูล"> 2.7 RESET ใช้สำหรับเคลียร์ข้อมูลทั้งหมดเพื่อเริ่มต้นป้อนข้อมูลใหม่ มีรูปแบบการใช้ดังนี้ <INPUT TYPE="reset" NAME="ชื่อข้อมูล" VALUE="ค่าประจำข้อมูล"> ตัวอย่างการใช้ <INPUT TYPE="reset" NAME="clear" VALUE="ลบข้อมูล"> เมื่อนำทั้งหมดมารวมกันเราสามารถสร้างแบบฟอร์มได้ <h2> แบบสอบถามความคิดเห็น </h2> <FORM ACTION="mailto:[email protected]" METHOD="POST"> ชื่อเล่น : <INPUT TYPE="text" NAME="nickname" ><BR> ระบุเพศของคุณ <BR> <INPUT TYPE="radio" NAME="Sex" VALUE="ชาย" > ชาย <BR> <INPUT TYPE="radio" NAME="Sex" VALUE="ชาย" > หญิง <BR> <h3> งานอดิเรกของคุณ </h3> <INPUT TYPE="Checkbox" NAME="pik"> ชมภาพยนตร์ <BR> <INPUT TYPE="Checkbox" NAME="coach"> อ่านหนังสือ <BR> <INPUT TYPE="Checkbox" NAME="keaw"> ฟังเพลง <BR> <INPUT TYPE="Checkbox" NAME="ann"> เล่นกีฬา <BR> <Select name="mov"> <OPTION> Back To The Future<BR> <OPTION> Star Wars <BR> <OPTION> Scream <BR> <OPTION> The Lost of The Rings <BR> </Select> เลือกเพียง 1 ไตรภาคยอดเยี่ยมในหัวใจคุณ<BR> <Select name="Siries" Multiple Size=3> <OPTION> Macgyver<BR> <OPTION> Star Gate SG-1 <BR> <OPTION> The X-Files <BR> <OPTION> The Visitor<BR> <OPTION> Time Track <BR> <OPTION> Slider <BR> <OPTION> Babylon 5 <BR> </Select> เลือกเพียง 1 มินิซีรีส์ประจำใจคุณ<BR> <TextArea Name="note" rows=5 Cols=45></Textarea> </FORM> <INPUT TYPE="Submit" NAME="send" VALUE="ส่งข้อมูล"> <INPUT TYPE="reset" NAME="clear" VALUE="ลบข้อมูล"> ซึ่งจะแสดงผลหน้าจอภาพดังนี้ แบบสอบถามความคิดเห็น ชื่อเล่น : ระบุเพศของคุณ ชาย หญิง งานอดิเรกของคุณ ชมภาพยนตร์ อ่านหนังสือ ฟังเพลง เล่นกีฬา Back To The Future Star Wars Scream The Lost of The Rings เลือกเพียง 1 ไตรภาคยอดเยี่ยมในหัวใจคุณ Macgyver Star Gate SG-1 The X-Files The Visitor Time Track Slider Babylon 5 เลือกเพียง 1 มินิซีรีส์ประจำใจคุณ พื้นฐาน HTML ตอนที่ 6 ขอพลังจงอยู่กับท่าน :+: ขอพลังที่สร้างสรรค์จงอยู่กับท่านตลอดไป :+: ขอพลังจงอยู่กับท่าน