HTML Form : เรียนรู้ข้อมูลแบบฟอร์ม HTML ก่อนนำไปใช้งานจริง

       ในการสร้างเว็บไซต์สำหรับรับข้อมูล สิ่งที่จำเป็นจะต้งเรียนรู้ไม่แพ้ PHP เลยนั่นก็คือภาษา HTML อันที่จริงแล้วจะบอกว่าการสร้างเว็บเพจทุกหน้าจะแสดงผลด้วย HTML ถึงจะถูก แต่ในส่วนที่จะกล่าวถึงต่อไปนี้คือส่วนของแบบฟอร์มรับข้อมูล (HTML Form) ซึ่งจะประกอบด้วยช่องรับข้อมูลอยู่หลายชนิดด้วยกัน ดังนี้

       1. ช่องรับข้อมูลแบบป้อนข้อความลงไปในช่องว่าง
         1.1 Text Fields ช่องรับข้อมูลแบบบรรทัดเดียว <input type="text/password"/>
         1.2 Textarea ช่องรับข้อมูลแบบหลายบรรทัด <textarea></textarea>

   2. ช่องรับข้อมูลแบบตัวเลือก เลือกได้อย่างเดียว
   2.1 Radio Button <input type="radio"/>
   2.2 Select Option <select>...option...</select>
   3. ช่องรับข้อมูลแบบตัวเลือก ที่สามารถเลือกได้หลายตัวเลือก
   3.1 Checkbox <input type="checkbox"/>
   3.2 Multi Select Option <select multiple>...option...</select>
   4. ช่องรับข้อมูลแบบซ่อน จะไม่แสดงให้เห็นบนหน้าเว็บเพจ <input type="hidden"/>


       มาดูซอร์สโค๊ดและหน้าตา html form กันทีละหัวข้อกันเลยครับ เริ่มจากการสร้างแท็กแบบฟอร์มสำหรับป้อนข้อมูลเพื่อส่งไปบันทึกข้อมูลลงในฐานข้อมูล

       <form method="POST" action="php-save-data.php">
          .... ตัวเลือกรับข้อมูลต่างๆจะอยู่ในนี้
       </form>

ในกรณีที่แบบฟอร์มของเราใช้อัพโหลดข้อมูลด้วย จะต้องมีการเพิ่มแอดตทริบิวต์ที่สำคัญอีกตัวเข้าไปในแท็ก <form> ด้วยนั่นก็คือ enctype="multipart/form-data"

       <form method="POST" action="php-save-data.php" enctype="multipart/form-data">
          .... ตัวเลือกรับข้อมูลต่างๆจะอยู่ในนี้
       </form>

1. ช่องรับข้อมูลแบบป้อนข้อความลงไปในช่องว่าง

ในส่วนนี้จะมีอินพุตอยู่ 2 ตัวที่ใช้รับค่านี้นั่นก็คือ Type ที่เป็นแบบ Text,Password และตัวรับค่าที่เป็น TextArea

1.1 ช่องรับข้อมูลแบบบรรทัดเดียว Text Fields จะมีอยู่ 2 ชนิดคือ type="text" และ type="password"

<!DOCTYPE html>
<html>
<body>
    <form action="php-login-form.php">
        <table>
            <tr>
                <td>ชื่อล็อกอิน : </td>
                <td><input type="text" name="txt_uname" value=""></td>
            </tr>
            <tr>
                <td>รหัสผ่าน : </td>
                <td><input type="text" name="txt_upass" value=""></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="ล็อกอิน"></td>
            </tr>
        </table>
    </form>
</body>
</html>

2. ช่องรับข้อมูลแบบหลายบรรทัด Textarea

<!DOCTYPE html>
<html>
<body>     <form action="php-save-data.php">
        <h4>ช่องรับข้อมูลแบบหลายบรรทัด</h4>
        <textarea rows="4" cols="50">
พีเอชพี (PHP) คือ ภาษาคอมพิวเตอร์ในลักษณะเซิร์ฟเวอร์-ไซด์ สคริปต์ โดยลิขสิทธิ์อยู่ในลักษณะโอเพนซอร์ส ภาษาพีเอชพีใช้สำหรับจัดทำเว็บไซต์ และแสดงผลออกมาในรูปแบบ HTML โดยมีรากฐานโครงสร้างคำสั่งมาจากภาษา ภาษาซี ภาษาจาวา และ ภาษาเพิร์ล ซึ่ง ภาษาพีเอชพี นั้นง่ายต่อการเรียนรู้ ซึ่งเป้าหมายหลักของภาษานี้ คือให้นักพัฒนาเว็บไซต์สามารถเขียน เว็บเพจ ที่มีความตอบโต้ได้อย่างรวดเร็ว
      </textarea>
    </form>
</body>
</html>

ติดตามหัวข้อต่อไปได้ที่ "ช่องรับข้อมูลแบบตัวเลือก เลือกได้อย่างเดียว"

PHP วิถีเริ่มต้นของโปรแกรมเมอร์ รับทำเว็บไซต์

ค้นหาบล็อกนี้