คุณสมบัติ form* Input HTML

บทที่นี้นำเสนอ HTML <input> องค์ประกอบภาษาไทย form* นิยาม

องค์ประกอบภาษาไทย

ของ input form องค์ประกอบภาษาไทย <input> ฟอร์มที่องค์ประกอบนี้เป็นส่วนหนึ่ง

ค่าขององค์ประกอบนี้จะต้องเท่ากับองค์ประกอบ id ของ <form> ที่มีองค์ประกอบนี้

ตัวอย่าง

จากช่องบันทึกที่อยู่นอกฟอร์ม (ยังเป็นส่วนหนึ่งของฟอร์ม):

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

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

formaction องค์ประกอบภาษาไทย

ของ input formaction องค์ประกอบภาษาไทย

หมายเหตุ:องค์ประกอบภาษาไทย <form> องค์ประกอบภาษาไทย action นิยาม

formaction สมบัตินี้นั้นมี效应对以下输入类型：submit และ image。

ตัวอย่าง

ฟอร์ม HTML ที่มีปุ่มส่งฟอร์มสองแบบ ซึ่งมีการปฏิบัติต่างกัน (action):

<form action="/action_page.php">
  <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="ส่ง">
  <input type="submit" formaction="/action_page2.php" value="บันทึกด้วยสิทธิ์การจัดการ">
</form>

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

formenctype องค์ประกอบภาษาไทย

ของ input formenctype องค์ประกอบภาษาไทย

หมายเหตุ:นิยามของนี้จะทำให้ลบล้าง <form> องค์ประกอบภาษาไทย

formenctype สมบัตินี้นั้นมี效应对以下输入类型：submit และ image。

ตัวอย่าง

ฟอร์มที่มีปุ่มส่งฟอร์มสองแบบ。ปุ่มแรกส่งข้อมูลฟอร์มด้วยการเข้ารหัสแบบปกติ，ปุ่มที่สองส่งข้อมูลฟอร์มด้วยการเข้ารหัส "multipart/form-data":

<form action="/action_page_binary.asp" method="post">
  <label for="fname">ชื่อ:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="ส่ง">
  <input type="submit" formenctype="multipart/form-data"
  value="บันทึกด้วยรูปแบบ Multipart/form-data"
</form>

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

formmethod องค์ประกอบภาษาไทย

ของ input formmethod องค์ประกอบภาษาไทย

หมายเหตุ:นิยามของนี้จะทำให้ลบล้าง <form> องค์ประกอบภาษาไทย

formmethod สมบัตินี้นั้นมี效应对以下输入类型：submit และ image。

ข้อมูลฟอร์มสามารถส่งได้ทั้งเป็นตัวแปรใน URL (method="get") และเป็นความต่างออกไปของ HTTP post ได้ (method="post")

คำเตือนเกี่ยวกับ GET:

  • แอนนาพนข้อมูลฟอร์มเป็นรูปแบบ name/value ไปที่ URL
  • ไม่ควรใช้ GET ส่งข้อมูลที่เป็นความลับ! (ข้อมูลฟอร์มที่ส่งแสดงใน URL)
  • ความยาวของ URL มีขอบเขต (2048 ตัวอักษร)
  • มีประโยชน์มากต่อการส่งฟอร์มที่ผู้ใช้ต้องการเพิ่มผลลัพธ์เข้าในทางเข้าเครื่องหรือเครื่องมือประมวลผล
  • GET มีประโยชน์สำหรับข้อมูลที่ไม่มีความปลอดภัย อย่างเช่น ของคำถามที่ใช้ Google

คำเตือนเกี่ยวกับ POST:

  • ใส่ข้อมูลฟอร์มในรายละเอียดของคำขอ HTTP แบบ text/plain (ไม่แสดงข้อมูลฟอร์มที่ส่งใน URL)
  • POST ไม่มีขอบเขตขนาดของข้อมูล และสามารถใช้ส่งข้อมูลมากมาย
  • การส่งฟอร์มที่มี POST ไม่สามารถใช้การทำทางเข้าเครื่องหรือเครื่องมือประมวลผลได้

คำเตือน：หากข้อมูลฟอร์มมีข้อมูลที่เป็นความลับหรือข้อมูลส่วนบุคคล กรุณาใช้ POST ต้องเป็นที่สำคัญ!

ตัวอย่าง

ฟอร์มที่มีปุ่มส่งข้อมูลสองแบบ แรกใช้ method="get" ส่งข้อมูลฟอร์ม และปุ่มที่สองใช้ method="post" ส่งข้อมูลฟอร์ม:

<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="ใช้ GET ส่งข้อมูล">
  <input type="submit" formmethod="post" value="ใช้ POST ส่งข้อมูล">
</form>

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

สมบัติ formtarget

ของ input formtarget สมบัตินี้กำหนดชื่อหรือคำถามที่ระบุที่ไหนที่จะแสดงคำตอบที่ได้รับหลังจากส่งฟอร์ม

หมายเหตุ:นิยามของนี้จะทำให้ลบล้าง <form> ของสมบัติ target ขององค์ประกอบ

formtarget สมบัตินี้นั้นมี效应对以下输入类型：submit และ image。

ตัวอย่าง

ฟอร์มที่มีปุ่มส่งข้อมูลสองแบบ และมีหน้าต่างเปิดเพื่อเปิดดู

<form action="/action_page.php">
  <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="ส่ง">
  <input type="submit" formtarget="_blank" value="ส่งไปยังหน้าแสดงผลใหม่/แทร็ก">
</form>

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

สมบัติ formnovalidate

ของ input formnovalidate นิยามนี้ระบุว่าในการส่งข้อมูล ไม่ควรตรวจสอบสมบัติของสิ่งที่มีความหมายของ <input> อยู่

หมายเหตุ:นิยามของนี้จะทำให้ลบล้าง <form> ขององค์ประกอบ novalidate

formnovalidate นิยามของทางเลือก สำหรับชนิดอย่างที่นี้ขององค์ประกอบ: submit

ตัวอย่าง

ฟอร์มที่มีปุ่มส่งสองปุ่ม (การตรวจสอบและไม่ตรวจสอบ)

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="ส่ง">
  <input type="submit" formnovalidate="formnovalidate"
  value="ส่งโดยไม่ตรวจสอบ"
</form>

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

นิยามของทางเลือก novalidate

novalidate นิยามของ <form> นิยาม

ถ้าได้กำหนด นิยามของทางเลือก novalidate กำหนดว่าในการส่งจะไม่ต้องตรวจสอบข้อมูลฟอร์มทั้งหมด

ตัวอย่าง

กำหนดว่าในการส่งจะไม่ต้องตรวจสอบข้อมูลฟอร์มใดๆ

<form action="/action_page.php" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="ส่ง">
</form>

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

องค์ประกอบ Form และ Input ของ HTML

แบตทิ้ง คำอธิบาย
<form> กำหนด HTML ฟอร์มสำหรับการเข้าข้อมูลของผู้ใช้
<input> กำหนดโครงการที่ใช้สำหรับการเข้าข้อมูล

ถ้าต้องการรายการแบตทิ้ง HTML ทั้งหมด โปรดเข้าชมเว็บไซต์ของเรา คู่มือสารสนเทศแบตทิ้ง HTML.