HTML Forms

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

ตัวอย่าง

แท็ก `<form>`

ใช้สร้างฟอร์มสำหรับรับข้อมูลจากผู้ใช้

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

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

อ่านเพิ่มเติม HTML Form Elements

แท็ก `<input>`

เป็นองค์ประกอบที่ใช้บ่อยที่สุดในฟอร์ม รูปแบบการแสดงผลขึ้นอยู่กับค่าของแอตทริบิวต์ type

Type	คำอธิบาย
text	ช่องกรอกข้อความบรรทัดเดียว
radio	ปุ่มตัวเลือก (เลือกได้เพียงตัวเดียว)
checkbox	ช่องเลือก (เลือกได้หลายตัว)
submit	ปุ่มส่งข้อมูลฟอร์ม
button	ปุ่มคลิกทั่วไป

อ่านเพิ่มเติม HTML Input Types

ช่องกรอกข้อความ (Text Fields)

<input type="text"> ใช้สร้างช่องกรอกข้อความ

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

แท็ก `<label>`

ใช้กำหนดข้อความกำกับ (label) ให้กับองค์ประกอบในฟอร์ม

ช่วยให้โปรแกรมอ่านหน้าจอ (screen reader) อ่านชื่อฟิลด์ออกเสียงได้
ผู้ใช้สามารถคลิกที่ข้อความใน <label> เพื่อเลือกช่องหรือปุ่มที่เกี่ยวข้องได้
ค่าใน for ของ <label> ต้องตรงกับ id ของ <input>

ปุ่มตัวเลือก (Radio Buttons)

<input type="radio"> ใช้สำหรับเลือก 1 ตัวเลือก จากหลายตัว

				
					<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

ช่องเลือก (Checkboxes)

<input type="checkbox"> ใช้สำหรับเลือกได้ ศูนย์ตัวหรือมากกว่าหนึ่งตัวเลือก

				
					<form action="action_page.php">
  <input type="checkbox" id="eat" name="eat" value="eat">
  <label for="eat">ฉันชอบกิน</label><br>
  <input type="checkbox" id="travel" name="travel" value="travel">
  <label for="travel">ฉันชอบเที่ยว</label><br>
  <input type="checkbox" id="sleep" name="sleep" value="sleep">
  <label for="sleep">ฉันชอบนอน</label><br><br>
  <input type="submit" value="ส่ง">
</form>

ปุ่มส่งข้อมูล (Submit Button)

<input type="submit"> ใช้สำหรับส่งข้อมูลในฟอร์มไปยัง ตัวจัดการฟอร์ม (form handler) โดยทั่วไปคือไฟล์ PHP หรือสคริปต์บนเซิร์ฟเวอร์ เช่น action_page.php ในตัวอย่าง

				
					<form action="action_page.php">
  <label for="fname">ชื่อจริง:</label><br>
  <input type="text" id="fname" name="fname" value="เด่น"><br>
  <label for="lname">นามสกุล:</label><br>
  <input type="text" id="lname" name="lname" value="ดี"><br><br>
  <input type="submit" value="Submit">
</form>

แอตทริบิวต์ name ของ `<input>`

ทุกช่องกรอกในฟอร์ม ต้องมีชื่อ (name) หากไม่มี name ข้อมูลในช่องนั้นจะ ไม่ถูกส่ง

ตัวอย่าง (ผิด) : “ชื่อ” จะไม่ถูกส่งไปเพราะไม่มี name

				
					<form action="action_page.php">
  <label for="fname">ชื่อ:</label><br>
  <input type="text" id="fname" value="เด่น"><br><br>
  <input type="submit" value="ส่ง">
</form>

HTML Forms

แท็ก <form>

แท็ก <input>