HTML Input form* Attributes

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

บทนี้อธิบายความแตกต่างของ form* attributes  สำหรับ <input> element

 form Attribute

input form attribute ใช้ระบุรูปแบบ<input> element

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

ตัวอย่าง

ช่องป้อนข้อมูลที่อยู่นอกฟอร์ม HTML (แต่ยังคงเป็นส่วนหนึ่งของฟอร์ม):

<!DOCTYPE html>
<html>
<body>

<h1>The input form attribute</h1>

<p>แอตทริบิวต์ของแบบฟอร์มระบุรูปแบบที่เป็นขององค์ประกอบอินพุต</p>

<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>

<p>ช่อง "นามสกุล" ด้านล่างอยู่นอกองค์ประกอบฟอร์ม แต่ยังคงเป็นส่วนหนึ่งของฟอร์ม</p>

<label for="lname">นามสกุล:</label>
<input type="text" id="lname" name="lname" form="form1">

</body>
</html>

The input form attribute


แอตทริบิวต์ของแบบฟอร์มระบุรูปแบบที่เป็นขององค์ประกอบอินพุต






ช่อง “นามสกุล” ด้านล่างอยู่นอกองค์ประกอบฟอร์ม แต่ยังคงเป็นส่วนหนึ่งของฟอร์ม


formaction Attribute

 input formaction attribute ระบุ URL ของไฟล์ที่จะประมวลผลอินพุตเมื่อกดส่งแบบฟอร์ม

หมายเหตุattributeนี้แทนที่ action attributeของ<form> element

formaction ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ

ตัวอย่าง

แบบฟอร์ม HTML ที่มีปุ่มส่ง 2 ปุ่ม โดยมีการทำงานที่ต่างกัน:

<!DOCTYPE html>
<html>
<body>

<h1>The input formaction attribute</h1>

<p> formaction attribute ใช้ระบุ URL ของไฟล์ที่จะประมวลผลอินพุตเมื่อส่งแบบฟอร์ม</p>

<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>

</body>
</html>

The input formaction attribute


formaction attribute ใช้ระบุ URL ของไฟล์ที่จะประมวลผลอินพุตเมื่อส่งแบบฟอร์ม






formenctype Attribute

input formenctype attribute ระบุว่าควรเข้ารหัสข้อมูลแบบฟอร์มอย่างไรเมื่อส่ง (สำหรับแบบฟอร์มที่มี method=”post” เท่านั้น)

หมายเหตุ:แอตทริบิวต์นี้แทนที่แอตทริบิวต์ enctype ของ<form> element

แอตทริบิวต์ formenctype ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>

<h1>The input formenctype attribute</h1>

<p>แอตทริบิวต์ formenctype ระบุว่าควรเข้ารหัสข้อมูลแบบฟอร์มอย่างไรเมื่อส่ง</p>

<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>

</body>
</html>

The input formenctype attribute


แอตทริบิวต์ formenctype ระบุว่าควรเข้ารหัสข้อมูลแบบฟอร์มอย่างไรเมื่อส่ง




formmethod Attribute

 อินพุต formmethod กำหนดเมธอด HTTP สำหรับการส่งข้อมูลฟอร์มไปยัง URL การดำเนินการ

หมายเหตุ:แอตทริบิวต์นี้แทนที่แอตทริบิวต์เมธอดของ <form> element

 formmethod แอตทริบิวต์ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ

ข้อมูลแบบฟอร์มสามารถส่งเป็นตัวแปร URL (method=”get”) หรือเป็น HTTP post transaction (method=”post”)

การใช้งาน “get” :

  • วิธีการนี้ผนวกข้อมูลแบบฟอร์มเข้ากับ URL ในชื่อ/คู่ค่า
  • วิธีนี้มีประโยชน์สำหรับการส่งแบบฟอร์มที่ผู้ใช้ต้องการบุ๊กมาร์กผลลัพธ์
  • มีการจำกัดจำนวนข้อมูลที่คุณสามารถวางใน URL ได้ (แตกต่างกันไปตามเบราว์เซอร์) ดังนั้นคุณจึงไม่สามารถมั่นใจได้ว่าข้อมูลในแบบฟอร์มทั้งหมดจะถูกถ่ายโอนอย่างถูกต้อง
  • อย่าใช้วิธี “get” เพื่อส่งข้อมูลที่ละเอียดอ่อน! (รหัสผ่านหรือข้อมูลที่ละเอียดอ่อนอื่นๆ เพราะจะมองเห็นได้ในแถบ browser address bar)

การใช้งาน “post”:

  • วิธีนี้ส่งข้อมูลแบบฟอร์มเป็นธุรกรรมหลัง HTTP
  • การส่งแบบฟอร์มด้วยวิธี “post” ไม่สามารถบุ๊กมาร์กได้
  • วิธีการ “post” นั้นแข็งแกร่งและปลอดภัยกว่า “get” และ “post” ไม่มีข้อจำกัดด้านขนาด

formtarget Attribute

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

หมายเหตุ:  แอตทริบิวต์นี้แทนที่ target แอตทริบิวต์ของ <form> element.

 formtarget attribute ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ

ตัวอย่าง

แบบฟอร์มที่มีปุ่มส่งสองปุ่ม โดยมีหน้าต่างเป้าหมายต่างกัน:

<!DOCTYPE html>
<html>
<body>

<h1> input formtarget attribute</h1>

<p> formtarget ระบุชื่อหรือคำสำคัญที่ระบุตำแหน่งที่จะแสดงคำตอบที่ได้รับหลังจากส่งแบบฟอร์ม</p>

<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>

</body>
</html>

input formtarget attribute


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






formnovalidate Attribute

formnovalidate แอตทริบิวต์ระบุว่าองค์ประกอบ <input> ไม่ควรตรวจสอบเมื่อส่ง

หมายเหตุ:แอตทริบิวต์นี้แทนที่แอตทริบิวต์ novalidate ของ<form> element

formnovalidateทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่ง

ตัวอย่าง

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

<!DOCTYPE html>
<html>
<body>

<h1> input formnovalidate attribute</h1>

<form action="/action_page.php">
  <label for="email">กรอกอีเมล์ของคุณ:</label>
  <input type="email" id="email" name="email" required><br><br>
  <input type="submit" value="ส่ง">
  <input type="submit" formnovalidate="formnovalidate" value="ส่งโดยไม่มีการตรวจสอบ">
</form>

<p><strong>สำคัญ:</strong>  formnovalidate ไม่รองรับใน Safari 10 (หรือเวอร์ชันก่อนหน้า).</p>

</body>
</html>

input formnovalidate attribute





สำคัญ: formnovalidate ไม่รองรับใน Safari 10 (หรือเวอร์ชันก่อนหน้า).

novalidate Attribute

novalidateคือ<form>แอตทริบิวต์

novalidate ระบุว่าข้อมูลแบบฟอร์มทั้งหมดไม่ควรถูกตรวจสอบเมื่อส่ง

ตัวอย่าง

ระบุว่าไม่ควรตรวจสอบข้อมูลแบบฟอร์มเมื่อส่ง:

<!DOCTYPE html>
<html>
<body>

<h1>form novalidate attribute</h1>
<br>
<p>แอตทริบิวต์ novalidate ระบุว่าไม่ควรตรวจสอบข้อมูลในแบบฟอร์มเมื่อส่ง</p>
<br>
<form action="/action_page.php" novalidate>
  <label for="email">กรอกอีเมล์ของคุณ:</label>
  <input type="email" id="email" name="email" required><br><br>
  <input type="submit" value="ส่ง">
</form>
<br>
<p><strong>หมายเหตุ:</strong> ไม่รองรับแอตทริบิวต์ novalidate ของแท็กแบบฟอร์มในเว็บเบราว์เซอร์ Safari 10 (หรือเวอร์ชันก่อนหน้า)</p>

</body>
</html>

form novalidate attribute


แอตทริบิวต์ novalidate ระบุว่าไม่ควรตรวจสอบข้อมูลในแบบฟอร์มเมื่อส่ง





หมายเหตุ: ไม่รองรับแอตทริบิวต์ novalidate ของแท็กแบบฟอร์มในเว็บเบราว์เซอร์ Safari 10 (หรือเวอร์ชันก่อนหน้า)

HTML Form and Input Elements

Tagคำอธิบาย
<form>ใช้ระบุ HTML form สำหรับ user input
<input>ใช้ระบุ input control
< บทเรียนก่อนหน้า
บทเรียนถัดไป >