การสร้างฟอร์ม
เข้าใจรูปแบบการทำงานของฟอร์มและ CGI
CGI ย่อมาจาก Common Gateway Interfaces เป็นสิ่งที่ใช้กำหนดวิธีการจัดการข้อมูลระหว่าง Web server และ Web browser ซึ่ง CGI เป็นวิธีการมาตรฐานสำหรับ Web server เพื่อที่จะส่งคำร้องขอ จากผู้ใช้ (Web browser) ไปยังโปรแกรม (บน Web server) ให้โปรแกรมทำการประมวลผลข้อมูลเหล่านั้น จากนั้น Web server ก็จะรับข้อมูลส่งกลับไปให้ผู้ใช้ แต่โดยส่วนใหญ่จะให้ความหมายของ ‘CGI’ ว่าเป็นโปรแกรมที่ทำงานอยู่บน Web server เพื่อทำหน้าที่โต้ตอบ (interact) กับ web browser CGI program จะถูกสั่งให้ทำงานขณะมีการเรียกใช้งานนั้น ดังนั้นจึงทำให้มันสามารถ แสดงข้อมูลผลลัพธ์ในลักษณะของ Dynamic information ได้
CGI program จำเป็นจะต้องถูกติดตั้งไว้ใน Directory เพื่อให้ Web server รู้ว่าควรจะต้อง Execute โปรแกรมแทนการแสดงข้อมูลไปยัง Browser เท่านั้น ซึ่ง Directory ที่กล่าวถึงนี้ขึ้นอยู่ภายใต้การควบคุมของ web master เพื่อเป็นการป้องกันบุคคลทั่วไปสามารถสร้าง CGI program ได้
การสร้างแบบฟอร์ม <form>
เราต้องใช้แท็ก form เพื่อสร้างแบบฟอร์มในเว็บเพจ ซึ่งมีรูปแบบดังนี้
ชื่อแท็ก form
ตำแหน่งของแท็ก อยู่ภายในแท็ก <body>...</body>
รูปแบบ <form method="วิธีส่งข้อมูล" action="ตำแหน่งโปรแกรม">...<form>
ค่าที่กำหนดให้ใช้ method คือ วิธีการส่งข้อมูลของ CGI มี 2 แบบ
1. post คือการส่งข้อมูลภายในฟอร์มทีละบรรทัด
2. get คือการส่งข้อมูลภายในฟอร์มต่อกันเป็นประโยคเดียว
action คือ ตำแหน่งของโปรแกรม
ช่องในการรับข้อมูล <input>
การสร้างช่องรับข้อมูล จะเขียนอยู่ภายในแท็ก form โดยใช้แท็ก input ซึ่งมีรูปแบบการเขียนทั่วไป ดังนี้
ชื่อแท็ก input
ตำแหน่งของแท็ก อยู่ภายในแท็ก <form>...</form>
รูปแบบ <input type="ชนิดของช่องรับข้อมูล" name="ชื่อของช่องรับข้อมูล">
Input Types Attributes
<input type="button"> กำหนด input เป็นปุ่ม
<input type="checkbox"> กำหนด input ตัวเลือกที่สามารถเลือกได้มากกว่า 1 รายการ
<input type="color"> กำหนด input value ให้เป็นที่ใส่ ข้อมูล ของค่าสี เช่น #FF00F0 เป็นต้น
<input type="date"> กำหนด input value ให้เป็นที่ใส่ ข้อมูลวันที่
<input type="datetime-local"> กำหนด input value ให้เป็นที่ใส่ ข้อมูล local date/time
<input type="email"> กำหนด input value ให้เป็นที่ใส่ ข้อมูล Email Address
<input type="file"> กำหนด input value ให้เป็นที่ใส่ ข้อมูลประเภทไฟล์
<input type="hidden"> กำหนด input ซ่อนการแสดงผล
<input type="image"> กำหนด input เป็นปุ่ม submit ที่แสดงเป็นรูปภาพ
<input type="month"> กำหนด input value ให้เป็นที่ใส่ ข้อมูล เดือน
<input type="number"> กำหนด input value ให้เป็นที่ใส่ ข้อมูล ชนิดตัวเลข
<input type="password"> กำหนด input value แสดงข้อมูลที่กรอกเป็น •
<input type="radio"> กำหนด input เป็นตัวเลือกที่สามารถเลือกได้ 1 รายการเท่านั้น
<input type="range"> กำหนด input value ให้เป็นที่ใส่ ข้อมุล ที่สามารถกำหนดช่วงของข้อมูลได้
<input type="reset"> กำหนด input เป็น ปุ่มที่ใช้สำหรับรีเซ็ตค่าฟอร์มทั้งหมดกลับสู่ค่าเริ่มต้น
<input type="search"> กำหนด input เป็น Search field
<input type="submit"> กำหนด input เป็น ปุ่มที่ใช้สำหรับการส่งข้อมูลในฟอร์ม
<input type="tel"> กำหนด input value ให้เป็นที่ใส่ ข้อมูล หมายเลข โทรศัพท์
<input type="text"> กำหนด input value ให้เป็นที่ใส่ ข้อมูลข้อความ
<input type="time"> กำหนด input value ให้เป็นที่ใส่ ข้อมูลเวลา
<input type="url"> กำหนด input value ให้เป็นที่ใส่ ข้อมูล URL Address
<input type="week"> กำหนด input value ให้เป็นที่ใส่ ข้อมูล สัปดาห์
ช่องรับข้อความแบบหลายบรรทัด <textarea>
ในกรณีที่มีข้อมูลที่ต้องป้อนในฟอร์มมากกว่า 1 บรรทัด สามารถใช้แท็ก textarea ได้ โดยที่ใช้รูปแบบดังนี้
ชื่อแท็ก textarea
ชื่อแอททริบิวท์ cols, rows
ตำแหน่งของแท็ก อยู่ภายในแท็ก <form>...</formt>
รูปแบบ <textarea rows="จำนวนแถว" cols="จำนวนตัวอักษรใน 1 แถว">....</textarea>
<body>
<h1>The textarea element</h1>
<form action="/action_page.php">
<label for="w3review">Review of W3Schools:</label>
<textarea id="w3review" name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>
</form>
</body>
ตัวเลือกรายการ <select> , <option>
ตัวเลือกรายการ หรือการใช้ selection เป็นรายการที่ใช้สำหรับการแสดงข้อมูลให้ผู้เลือกใช้เพียง 1 ข้อมูลจากข้อมูลทั้งหมด ลักษณะคล้ายกับ radio แต่จะประหยัดพื้นที่ในการแสดงผลมากกว่า
ชื่อแท็ก select, option
ตำแหน่งของแท็ก อยู่ภายในแท็ก <form>...</formt>
รูปแบบ <select name="ชื่อรายการ" >
<option value="ค่าตัวเลือก 1"> ชื่อตัวเลือก1</option>
</select>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</form
</body>
ตัวเลือกรายการแบบจัดกลุ่ม <optgroup>
ในกรณีที่ตัวเลือกมีจำนวนมาก การแบ่งกลุ่มตัวเลือกจะช่วยให้ไม่สับสนในการเลือกข้อมูลและทำให้มีความเป็นระเบียบเรียบร้อย
ชื่อแท็ก optgroup (Option Grouping)
ชื่อแอททริบิวท์ label
ตำแหน่งของแท็ก อยู่ภายในแท็ก <select>...</select>
รูปแบบ <select name="ชื่อรายการ" >
<optgroup label="ชื่อกลุ่ม">
...
</optgroup>
</select>
<body>
<h1>The optgroup element</h1>
<p>The optgroup tag is used to group related options in a drop-down list:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</form>
</body>
การจัดแบ่งแบบฟอร์ม <fieldset>
ชื่อแท็ก <fieldset>
<legend>
<label>
ตำแหน่งของแท็ก อยู่ภายในแท็ก <fieldset>...</fieldset>
รูปแบบ <fieldset>
<legend>ชื่อแสดงที่กรอบ</legend>
<label>ชื่อรายการ</label>
</fieldset>
<body>
<h1>The fieldset element</h1>
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>