HTML FORM

HTML Form ใช้สำหรับรวบรวมข้อมูลจากผู้ใช้ ด้วยการให้กรอกข้อมูลลงในฟอร์ม และเมื่อกดปุ่มส่งข้อมูลมักจะถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล เข่น

โดยรูปแบบโครงสร้างของ Tag form ใน HTML เป็นดังนี้

<form>
  ...
  form elements
  ...
</form>

แท็ก <form>เป็นตัวครอบ (container) ขององค์ประกอบต่าง ๆ เช่น กล่องข้อความ (text field) ปุ่มตัวเลือก (radio button) ช่องเลือก (checkbox) ปุ่มส่งข้อมูล (submit button) ปุ่มทั่วไป (button) โดยภายใน Tag form อาจจะมี Tag อื่นประกอบ เช่น

Tag <lable>

ใช้กำหนดข้อความกำกับ (label) ให้กับองค์ประกอบในฟอร์มแจ้งข้อมูลที่ต้องการ หรือเกี่ยวข้องให้ผู้ใช้งานได้เห็นเป็นข้อความ ดังลักษณะตัวอย่าง

โดยสามารถเขียนได้จากโค้ดตัวอย่าง

 <!DOCTYPE html>
 <html>
 <body>

 <h2>กรุณาป้อนชื่อ นามสกุล </h2>

 <form >
   <label for="fname" <ชื่อ: </label>         
   <input type="text" id="fname" name="fname" value=""> <br>
   <label for="lname" <นามสกุล: </label>
   <input type="text" id="lname" name="lname" value="">
 </form>

 </body>
 </html>

กรุณาป้อนชื่อ นามสกุล

เมื่อรันโค้ดแล้วจะได้ผลลัพธ์ดังด้านล่าง

for ในแท็ก <label> คือแอตทริบิวต์ (Attribute) ที่ใช้เชื่อมโยงข้อความอธิบาย เข้ากับช่องกรอกข้อมูล (เช่น <input>) อย่างเจาะจง โดยค่าของ for จะต้องตรงกับ id ของช่องกรอกข้อมูลนั้นเป๊ะๆ

Tag <input>

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

ตัวอย่างการให้ผู้ใช้งานกรอกชื่อ username และ password

<!DOCTYPE html>
<html>
<body>

<h2>ป้อนชื่อและพาสเวิร์ดเพื่อ Login</h2>

<form action="login_page.php">
  <label for="username">ชื่อผู้ใช้:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">รหัสผ่าน:</label><br>
  <input type="password" id="pwd" name="pwd"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

ผลการรันจะได้

หรือกรอกข้อมูลรูปแบบของวัน และเวลา

• <!DOCTYPE html> ระบุว่าเอกสารนี้เป็นเอกสาร HTML5
• <html> คือองค์ประกอบหลักของหน้า Webpage และจะมีการระบุจุดสิ้นสุดขอบเขตโปรแกรมไว้ที่ท้ายโปรแกรมด้วย </html>
• <head> ตือข้อมูลส่วนหัวโปรแกรมที่จะกำหนดคุณสมบัติต่างเกี่ยวกับหน้า Webpage
• <title> ใช้กำหนดชื่อเรื่องสำหรับหน้า Webpage (ซึ่งจะแสดงอยู่ที่แถบชื่อเรื่องของเบราว์เซอร์หรือบนแท็บของหน้า Webpage)
• <body> ทำหน้าที่กำหนดส่วนเนื้อหาของเอกสาร และเป็นภาชนะที่บรรจุเนื้อหาทั้งหมดที่จะแสดงผลให้มองเห็นได้ทางหน้า Webpage เช่น หัวข้อ ย่อหน้า รูปภาพ ไฮเปอร์ลิงก์ ตาราง รายการ ฯลฯ
• <h1> กำหนดหัวข้อขนาดใหญ่
• <p>ใช้กำหนดส่วนที่เป็นย่อหน้า