HTML Input Types

บทนี้อธิบายชนิด (type) ต่าง ๆ ของแท็ก <input> ใน HTML

รายการชนิดของ `<input>`

คุณสามารถใช้ชนิดต่อไปนี้ใน HTML ได้:

<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 คือ "text"

Input Type text

<input type="text"> สร้างช่องกรอกข้อความแบบบรรทัดเดียว

				
					<form>
  <label for="fname">ชื่อ:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">นามสกุล:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Input Type password

<input type="password"> สร้างช่องกรอกรหัสผ่าน ตัวอักษรในช่องรหัสผ่านจะถูกปิดบัง (แสดงเป็นดอกจันหรือวงกลม)

				
					<form>
  <label for="username">ชื่อผู้ใช้:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">รหัสผ่าน:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Input Type submit

<input type="submit"> สร้างปุ่มสำหรับส่งข้อมูลฟอร์มไปยัง form-handler ปลายทาง (form-handler) ระบุด้วยแอตทริบิวต์ action ของ <form>

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

ถ้าไม่ใส่ value ปุ่มจะใช้ข้อความเริ่มต้นอัตโนมัติ:

				
					<input type="submit">

Input Type reset

<input type="reset"> สร้างปุ่มรีเซ็ต เพื่อคืนค่าฟอร์มทั้งหมดเป็นค่าเริ่มต้น

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

Input Type radio

<input type="radio"> สร้างปุ่มตัวเลือก ให้ผู้ใช้เลือก ได้เพียงหนึ่ง ตัวเลือกภายในกลุ่มเดียวกัน (ระบุด้วย name เดียวกัน)

				
					<form>
  <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">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Input Type checkbox

<input type="checkbox"> สร้างช่องเลือก ให้ผู้ใช้เลือกได้ ศูนย์ตัว หรือหลายตัวเลือก

				
					<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> ฉันมีจักรยาน</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> ฉันมีรถ</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> ฉันมีเรือ</label><br><br>
  <input type="submit" value="Submit">
</form>

Input Type button

<input type="button"> สร้างปุ่มทั่วไป (ต้องผูกพฤติกรรมด้วย JS เอง)

				
					<input type="button" onclick="alert('สวัสดี!')" value="คลิกที่นี่!">

Input Type color

<input type="color"> ใช้สำหรับเลือกสี (จะแสดง color picker หากเบราว์เซอร์รองรับ)

				
					<form>
  <label for="favcolor">เลือกสีที่ชอบ:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Input Type date

<input type="date"> ใช้เลือกวันที่ (มี date picker หากรองรับ)

				
					<form>
  <label for="birthday">วันเกิดของคุณคือ:</label>
  <input type="date" id="birthday" name="birthday">
</form>

สามารถกำหนดช่วงด้วย min และ max

				
					<form>
  <label for="datemin">ใส่วันตั้งแต่ 2000-01-01 เป็นต้นไป:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-01">
  <label for="datemax">ใส่วันก่อน 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31">
</form>

Input Type datetime-local

<input type="datetime-local"> ใช้เลือกวันที่และเวลา โดยไม่มีเขตเวลา

				
					<form>
  <label for="birthdaytime">วันเกิด (วันและเวลา):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Input Type email

<input type="email"> ใช้รับอีเมล (บางเบราว์เซอร์ตรวจสอบรูปแบบอัตโนมัติเมื่อส่ง) สมาร์ตโฟนบางรุ่นจะปรับคีย์บอร์ดให้เหมาะกับการพิมพ์อีเมล

				
					<form>
  <label for="email">ใส่อีเมลของคุณ:</label>
  <input type="email" id="email" name="email">
</form>

Input Type image

<input type="image"> ใช้ภาพเป็นปุ่มส่งฟอร์ม ระบุพาธภาพใน src

				
					<form>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

Input Type file

<input type="file"> สร้างช่องเลือกไฟล์และปุ่ม “Browse/Choose File” สำหรับอัปโหลด

				
					<form action="action_page.php">
  <input type="file" name="myfile">
</form>

Input Type hidden

<input type="hidden"> สร้างฟิลด์ที่ไม่แสดงให้ผู้ใช้เห็น มักใช้เก็บข้อมูลที่ต้องส่งไปด้วยตอน submit (เช่น ไอดีเรกคอร์ด)

ค่าของ hidden ไม่แสดงบนหน้าแต่สามารถดูหรือแก้ไขได้ผ่าน DevTools หรือ View Source จึงไม่ควรใช้เพื่อความปลอดภัย

				
					<form>
  <label for="fname">ชื่อ:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

Input Type month

<input type="month"> ใช้เลือก “เดือนและปี”

				
					<form>
  <label for="bdaymonth">วันเกิด (เลือกเดือนและปี):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

Input Type number

<input type="number"> ใช้รับตัวเลข กำหนดข้อจำกัดได้ เช่น min, max, step

ตัวอย่าง (1–5):

				
					<form>
  <label for="quantity">ใส่จำนวนตัวเลข (ใส่ได้ตั้งแต่ 1 ถึง 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

ข้อจำกัดของช่องกรอกข้อมูล

ด้านล่างนี้คือรายการแอตทริบิวต์ทั่วไปที่ใช้กำหนดข้อจำกัดให้กับ <input>:

checked ทำให้ถูกเลือกไว้ล่วงหน้า (ใช้กับ checkbox / radio)
disabled ปิดการใช้งานช่องกรอกข้อมูล
max ค่าสูงสุด
maxlength จำนวนอักขระสูงสุด
min จำนวนค่าต่ำสุด
pattern ตรวจสอบค่าด้วย Regex
readonly อ่านได้อย่างเดียว
required บังคับให้กรอก
size ความกว้างของช่อง (หน่วยเป็นจำนวนตัวอักษร)
step ระยะห่างของค่า
value ค่าเริ่มต้น

ตัวอย่าง (0–100, step 10, ค่าเริ่มต้น 30):

				
					<form>
  <label for="quantity">จำนวน:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>

Input Type range

<input type="range"> สร้างตัวเลื่อนสำหรับเลือกค่าประมาณ (ค่าแน่นอนไม่สำคัญ) ค่าเริ่มต้นช่วงคือ 0–100 และปรับได้ด้วย min, max, step

				
					<form>
  <label for="vol">ปริมาณ (ให้ใส่ระหว่าง 0 ถึง 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Input Type search

<input type="search"> ใช้สำหรับช่องค้นหา (พฤติกรรมคล้าย text)

				
					<form>
  <label for="gsearch">การค้นหาบน Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

Input Type tel

<input type="tel"> ใช้รับเบอร์โทรศัพท์ มักใช้ร่วมกับ pattern เพื่อกำหนดรูปแบบ

				
					<form>
  <label for="phone">กรุณาใส่เบอร์โทรศัพท์:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Input Type time

<input type="time"> ใช้เลือกเวลา (ไม่มีเขตเวลา) ขึ้นอยู่กับเบราว์เซอร์ว่ารองรับการใส่ข้อมูล time หรือไม่

				
					<form>
  <label for="appt">เลือกเวลา:</label>
  <input type="time" id="appt" name="appt">
</form>

Input Type url

<input type="url"> ใช้รับที่อยู่ URL (บางเบราว์เซอร์ตรวจสอบรูปแบบตอนส่ง) สมาร์ตโฟนบางรุ่นจะเพิ่มปุ่ม “.com” บนคีย์บอร์ด

				
					<form>
  <label for="homepage">กรุณาใส่เว็บไซต์:</label>
  <input type="url" id="homepage" name="homepage">
</form>

Input Type week

<input type="week"> ใช้เลือก “สัปดาห์และปี” ทั้งนี้ก็ขึ้นอยู่กับเบราว์เซอร์ว่าจะรองรับการใช่งานฟิลด์นี้หรือไม่

				
					<form>
  <label for="week">เลือกสัปดาห์:</label>
  <input type="week" id="week" name="week">
</form>