top of page

การสร้างฟิลด์ข้อมูลด้วยแท็กคำสั่ง <input>

แท็ก <input> เป็นคำสั่งที่ใช้ในการสร้างฟิลด์เพื่อรับข้อมูลจากผู้ใช้ โดยสามารถกำหนดรูปแบบของชนิดข้อมูลที่จะนำเข้าในแบบฟอร์มได้ ซึ่งมีรูปแบบดังนี้ 

รูปเบบ <input type=”ชนิดของข้อมูล”คำสั่งเสริม>

โดยที่

ชนิดของข้อมูล เป็นการกำหนดชนิดของข้อมูลที่จะให้ผู้ใช้กรอกลงในฟิลด์ ซึ่งอาจเป็น

   Text เป็นรูปแบบข้อมูลในลักษณะข้อความ

   Password เป็นรูปแบบข้อมูลในลักษณะรหัส

   Email เป็นข้อมูลที่อยู่ในรูปแบบของที่อยู่อีเมล (Email address)

   url เป็นข้อมูลที่อยู่ในรูปแบบของที่อยู่เว็บไซต์(Wed addreess)

   redio เป็นรูปแบบของข้อมูลในลักษณะของทางเลือก โดยจะแสดงgป็นรูปวงกลมโปร่งไว้ให้ผู้เลือกทางใดทางหนึ่ง

   checkbkox เป็นรูปแบบของข้อมูลในลักษณะของทางเลือก โดยจะแสดงเป็นรูปสี่เหลี่ยมโปร่งไว้ให้ผู้ใช้เลือกทางใดทางหนึ่ง

   number เป็นรูปแบบข้อมูลแบบตัวเลข โดยจะแสดงออกมาในลักษณะของกรอบที่ปรับค่าได้(spin box)

   range เป็นรูปแบบข้อมูลแบบตัวเลข โดยจะแสดงิกมาในลักษณะของแกนเลื่อนปรับค่า(slider) เพื่อให้ผู้เลื่อนเพื่อเลือกค่าในช่วงที่กำหนด

   วัน-เวลา เป็นรูปแบบข้อมูลแบบวันที่-เวลา มีด้วยกัน 6 แบบ คือ date , time , datetime , datetime-local,month ,  และ week

   Color จะใช้ในเก็บค่าสีโดยแสดงตารางสีให้ผู้ใช้คลิกเลือกได้โดยตรง

   File เป็นการสร้างปุ่มเพื่อให้ผู้ใช้คลิกเพื่อไปเลือกไฟล์

 

   Submit เป็นการสร้างปุ่ม Submit เพื่อส่งข้อมูลทั้งหมดในแบบฟอร์มไปยังเซิร์ฟเวอร์

   Reset เป็นการสร้างปุ่ม Reset เพื่อล้างข้อมูลทั้งหมดในแบบฟอร์ม

   สำสั่งเสริม  เป็นคำสั่งที่ช่วยกำหนดค่าให้กับข้อมูลแต่ละชนิดนั้น ซึ่งอาจเป็น

   Size =  “ขนาด”

    เป็นการกำหนดขนาดของช่องรับข้อมูล

 

   Name = “ชื่อของข้อมูล” เป็นการกำหนดชื่อของข้อมูลที่ใช้เก็บข้อมูลแต่ละรายการเพื่อส่งให้โปรแกรม CGI ในเซิร์ฟเวอร์ มักจะเรียกว่า “ชื่อฟิลด์” หรือ “ชื่อตัวแปร” 

                ตัวอย่างเช่น

     <input type = “text” name = “age”>

          ถ้าผู้ใช้ป้อนข้อมูล 25 ลงในช่องนี้ เมื่อฟอร์มถูกส่งไปยังเซิร์ฟเวอร์ข้อมูลที่ถูกส่งคือ age=25        ทำให้รู้ว่าเป็นข้อมูลอะไร

     Maxlength = “ความยาวสูงสุด”

เป้นการกำหนดความยาวสูงสุดของข้อมูลที่สามารถรับเข้ามาได้

    Value= “ค่าเริ่มต้น”

เป็นการกำหนดค่าเริ่มต้นให้กับข้อมูล (Default Value) ซึ่งอาจเป็น ข้อความ, ตัวเลข, ข้อความตัวเลือก, หรือข้อความบนปุ่ม, แล้วแต่ชนิดของข้อมูล

   Placeholder= “ตัวอย่างข้อมูล”

เป็นการกำหนดข้อมูลที่จะให้แสดงในช่องรับข้อมูลเพื่อเป็นต้วอย่างให้ผู้ใช้ได้ทราบว่าต้องกรอกข้อมูลในรูปแบบใด โดยจะแสดงข้อมูลเป็นสีจางๆ

นอกจากนี้ ยังมีคำสั่งเสริมอีกบางส่วนซึ่งจะใช้กับข้อมูลแต่ละชนิดโดยเฉพาะโปรดดูในการสร้างฟิลด์ข้อมูลนั้นๆ

bottom of page