HTML <input> แบบบันทึก

  • หน้าก่อน <img>
  • หน้าต่อไป <ins>

การกำหนดและการใช้งาน

<input> แท็กก์นี้กำหนดช่องข้อมูลที่ผู้ใช้สามารถใส่ข้อมูลได้

<input> องค์ประกอบเป็นองค์ประกอบที่สำคัญที่สุดของฟอร์ม

<input> องค์ประกอบสามารถแสดงข้อมูลในหลายวิธี คุณสมบัติ type.

นี่คือรูปแบบการเข้าข้อมูลต่าง ๆ

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(ค่าเริ่มต้น)
  • <input type="time">
  • <input type="url">
  • <input type="week">

ดู คุณสมบัติ typeเพื่อดูตัวอย่างของรูปแบบการเข้าข้อมูลทุกชนิด!

ตัวอย่าง

ฟอร์ม HTML ที่มีสามส่วนของควบคุมนำเข้าข้อมูล; สองส่วนของข้อความและปุ่มส่ง

<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="ส่ง">
</form>

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

คำเตือนและหมายเหตุ

คำเตือน：ใช้แท็ก <label> เสริมสำหรับส่วนที่กำหนดด้านล่างเสมอ

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

รูปแบบ

รูปแบบ ค่า คำอธิบาย
accept
  • การขยายชื่อแบบไฟล์
  • audio/*
  • video/*
  • image/*
  • ประเภทสื่อ

กำหนดประเภทแบบไฟล์ที่จะส่งผ่านการโหลดไฟล์

กำหนดประเภทแบบไฟล์ที่ผู้ใช้สามารถเลือกได้จากกล่องโหลดไฟล์ (เหมาะสำหรับ type="file" แค่)
alt ข้อความ กำหนดข้อความที่แทนรูปภาพ (เหมาะสำหรับ type="image" แค่)
autocomplete
  • on
  • off
 กำหนดว่าควบคุม <input> ควรใช้ระบบแบบที่แน่นอนหรือไม่
autofocus autofocus กำหนดว่าควบคุม <input> ควรได้รับความสนใจอัตโนมัติเมื่อหน้าจอโหลด
checked checked กำหนดว่าควบคุม <input> ควรถูกเลือกก่อนที่หน้าจอจะโหลด (เหมาะสำหรับ type="checkbox" หรือ type="radio")
dirname inputname.dir กำหนดทิศทางของข้อความที่จะส่ง
disabled disabled กำหนดว่าควบคุม <input> ควรหยุดใช้งาน
form id ของฟอร์ม กำหนดฟอร์มที่อยู่ในองค์ประกอบของส่วนที่มี <input> อยู่
formaction URL กำหนด URL ที่จะจัดการกับแบบแพทย์ของควบคุมนำเข้าข้อมูล (เหมาะสำหรับ type="submit" และ type="image")
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 กำหนดวิธีการที่จะเข้ารหัสข้อมูลฟอร์มก่อนที่จะส่งไปยังเซิร์ฟเวอร์ (ใช้เฉพาะ type="submit" และ type="image" แค่นี้)
formmethod
  • get
  • post
 กำหนดวิธีการที่จะส่งข้อมูลไปยัง URL ที่กำหนดใน action (ใช้เฉพาะ type="submit" และ type="image" แค่นี้)
formnovalidate formnovalidate กำหนดว่าไม่ควรทำการตรวจสอบในองค์ประกอบฟอร์มเมื่อส่งฟอร์ม
formtarget
  • _blank
  • _self
  • _parent
  • _top
ชื่อโค้ช 		กำหนดที่ไหนที่จะแสดงคำตอบที่ได้รับหลังจากส่งฟอร์ม (ใช้เฉพาะ type="submit" และ type="image" แค่นี้)
height พิกเซล กำหนดความสูงขององค์ประกอบ <input> (ใช้เฉพาะ type="image" แค่นี้)
list id ของ datalist อ้างอิงองค์ประกอบ <datalist> ที่มีตัวเลือกประกอบและระบุโดย <input> (ใช้เฉพาะ type="image" แค่นี้)
max
  • ตัวเลข
  • วันที่
 กำหนดค่าตัวอักษรขององค์ประกอบ <input> ที่เป็นค่าสูงสุด
maxlength ตัวเลข กำหนดจำนวนตัวอักษรที่อนุญาตให้องค์ประกอบ <input> สามารถใช้ได้
min
  • ตัวเลข
  • วันที่
 กำหนดค่าตัวอักษรขององค์ประกอบ <input> ที่เป็นค่าต่ำสุด
minlength ตัวเลข กำหนดจำนวนตัวอักษรของตัวอักษรที่ต้องการใช้สำหรับองค์ประกอบ <input>
multiple multiple กำหนดว่าผู้ใช้สามารถกรอกค่าหลายค่าในองค์ประกอบ <input>
name ข้อความ กำหนดชื่อขององค์ประกอบ <input>
pattern ประมาณที่ใช้สำหรับการตรวจสอบตัวแปรปริมาณ กำหนดเป็นรูปแบบประมาณของการตรวจสอบค่าขององค์ประกอบ <input>
placeholder ข้อความ กำหนดคำขวัญที่เป็นการชี้แจงค่าที่คาดว่าจะมีขององค์ประกอบ <input>
popovertarget id ขององค์ประกอบ กำหนดองค์ประกอบป๊อปอเปอร์ที่จะเรียกใช้ (ใช้เฉพาะ type="button" แค่นี้)
popovertargetaction
  • hide
  • show
  • toggle
 กำหนดสิ่งที่จะเกิดขึ้นเมื่อคลิกปุ่ม (ใช้เฉพาะ type="button" แค่นี้)
readonly readonly กำหนดให้ช่องกรอกเข้าข้อมูลเป็นการอ่านแค่
required required กำหนดว่าต้องกรอกข้อมูลในช่องกรอกเข้าข้อมูลก่อนที่จะส่งฟอร์ม
size ตัวเลข กำหนดความกว้างขององค์ประกอบ <input> (ใช้ตัวเลขตัวอักษรเป็นหน่วย)
src URL URL ที่ใช้เป็นรูปภาพปุ่มส่ง (ใช้เฉพาะ type="image" แค่นี้)
step
  • ตัวเลข
  • any
 กำหนดช่องว่างระหว่างตัวเลขที่ถูกต้องในช่องบันทึกข้อมูล
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 กำหนดชนิดขององค์ประกอบ <input> ที่ต้องการแสดง
value ข้อความ กำหนดค่าขององค์ประกอบ <input>
width พิกเซล กำหนดความกว้างขององค์ประกอบ <input> ซึ่งเป็นแบบที่ type="image" มีผลเท่านั้น

คุณสมบัติโลก

<input> แท็กนี้ยังสนับสนุน คุณสมบัติโลกแบบ HTML.

คุณสมบัติเหตุการณ์

<input> แท็กนี้ยังสนับสนุน คุณสมบัติเหตุการณ์ใน HTML.

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

ไม่มี

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน

หน้าที่เกี่ยวข้อง

การเรียนรู้ HTML:

คู่มืออ้างอิง HTML DOM:

  • หน้าก่อน <img>
  • หน้าต่อไป <ins>