วิธีรับข้อมูลจากผู้ใช้ด้วย HTML Forms

ใช้แท็ก <form> รับข้อมูลผู้ใช้ โดยเพิ่ม form elements: text input, checkbox, radio, submit button ฯลฯ

แท็ก <input> ช่วยรับข้อมูลผ่านแอตทริบิวต์ type ใช้กับ form elements ต่างๆ

ตัวอย่างฟอร์มรับข้อมูลนักเรียน

<!DOCTYPE html> <html>
  <body>
    <head>
      <title>HTML Forms</title>
    </head>
    <p>Add your details:</p>
    <form>
      Student Name:<br> <input type="text" name="name"><br>
      Student Subject:<br> <input type="text" name="subject"><br>
      Rank:<br> <input type="text" name="rank">
    </form>
  </body>
</html>

แอตทริบิวต์พื้นฐานของ <input>

type – ประเภทคอนโทรล (text, password, email, number, checkbox, radio, date, file, ฯลฯ)
name – ชื่อคอนโทรล ส่งไป server เพื่อระบุและรับค่า
value – ค่าเริ่มต้น
placeholder – ข้อความแนะนำ (HTML5)
required – บังคับกรอก (HTML5)

Input Types ยอดนิยม (HTML5)

`email`	ตรวจสอบรูปแบบอีเมลอัตโนมัติ
`number`	ตัวเลข พร้อม spinner
`date`	เลือกวันที่ (date picker)
`tel`	เบอร์โทร (keyboard เหมาะสมบนมือถือ)
`url`	ตรวจสอบรูปแบบ URL