Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีใช้ปุ่ม Submit ในฟอร์ม HTML

ปุ่ม Submit (ส่งข้อมูล) จะส่งฟอร์มอัตโนมัติเมื่อคลิก ใช้แท็ก <form> รับข้อมูลผู้ใช้ โดยเพิ่ม form elements ต่างๆ เช่น text input, radio button, submit button

ปุ่ม Submit สร้างด้วยแท็ก <input> ตั้งแอตทริบิวต์ type="submit"

ตัวอย่างฟอร์มพร้อม Submit และ Reset

<!DOCTYPE html> <html>
  <body>
    <form action="/new.php" method="post">
      Student Name:<br>
      <input type="text" name="sname"><br>
      Student Subject:<br>
      <input type="text" name="ssubject"><br>
      <input type="submit" value="Submit">
      <input type="reset" value="Reset">
    </form>
  </body>
</html>

แอตทริบิวต์สำคัญของ <form>

  • action – URL ไฟล์ backend ที่ประมวลผลข้อมูล (เช่น PHP, Node.js)
  • method – GET (เพิ่มใน URL) หรือ POST (ส่งใน body, ปลอดภัยกว่า)
  • enctype – application/x-www-form-urlencoded (default) หรือ multipart/form-data (สำหรับ upload ไฟล์)
  • target – เป้าหมายการแสดงผล (_self, _blank, _parent)

แท็ก <button> แทน <input type="submit">

<button type="submit">Submit</button>
<button type="reset">Reset</button>

<button> ยืดหยุ่นกว่า (ใส่ HTML ได้ภายใน, สไตล์ง่ายกว่า)