HTML <form> แบบตัวอย่าง

  • หน้าก่อนหน้า <footer>
  • หน้าต่อไป <frame>

การใช้งานและการประกาศ

<form> ตามีชื่อเอกสารเพื่อสร้างฟอร์ม HTML ที่รับการบันทึกข้อมูลจากผู้ใช้

<form> ตัวแทนอิเล็กทรอนิกส์สามารถมีองค์ประกอบฟอร์มหนึ่งหรือหลายอย่าง

ดูเพิ่มเติมที่:

HTML Tutorial:HTML Forms and Inputs

HTML DOM Reference Manual:Object Form

CSS Tutorial: ตั้งรูปแบบฟอร์ม

ตัวอย่าง

ตัวอย่าง 1

ฟอร์ม HTML ที่มีสองช่องบันทึกและปุ่มส่ง

<form action="/action_page.php" method="get">
  <label for="fname">ชื่อ：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">สกุล：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="ส่ง">
</form>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ฟอร์ม HTML ที่มีตัวเลือก

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1">ฉันมีจักรยาน</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2">ฉันมีรถยนต์</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3">ฉันมีเรือ</label><br><br>
  <input type="submit" value="ส่ง">
</form>

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ตัวอย่างที่ 3

<form action="/action_page.php" method="get">
  <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" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="ส่ง">
</form>

ทดลองด้วยตัวเอง

attribute

attribute value รายละเอียด
accept-charset encoding กำหนดรหัสจำลองที่จะใช้ในการส่งฟอร์ม
action URL กำหนดที่จะส่งข้อมูลฟอร์มเมื่อส่งฟอร์ม
autocomplete
  • on
  • off
 กำหนดว่าฟอร์มควรใช้การทำงานโดยตัวใช้ตัวเองหรือไม่
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 กำหนดวิธีที่จะเข้ารหัสข้อมูลฟอร์มขณะส่งข้อมูลไปยังเซิร์ฟเวอร์
method
  • get
  • post
 กำหนดวิธีที่จะใช้ HTTP ขณะส่งข้อมูลฟอร์ม
name text กำหนดชื่อของฟอร์ม
novalidate novalidate กำหนดว่าฟอร์มไม่ควรรับการตรวจสอบ
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 กำหนดความสัมพันธ์ระหว่างแหล่งข้อมูลที่กำหนดและเอกสารปัจจุบัน
target
  • _blank
  • _self
  • _parent
  • _top
 กำหนดที่จะแสดงคำตอบที่ได้รับหลังจากส่งฟอร์ม

รายละเอียดความเกี่ยวข้องกับทั่วไป

<form> ตารางหน้ายังสนับสนุน รายละเอียดความเกี่ยวข้องกับทั่วไปใน HTML。

รายละเอียดความเกี่ยวข้องกับเหตุการณ์

<form> ตารางหน้ายังสนับสนุน รายละเอียดความเกี่ยวข้องกับเหตุการณ์ใน HTML。

การตั้งค่า CSS โดยมาตรฐาน

โดยทั่วไป โปรแกรมบราวเซอร์ส่วนใหญ่จะแสดงค่าเริ่มต้นตามต่อไปนี้ <form> องค์ประกอบ:

form {
  display: block;
  margin-top: 0em;
}

ทดลองด้วยตัวเอง

การสนับสนุนโดยเบราเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อนหน้า <footer>
  • หน้าต่อไป <frame>