<input> ได้ แอตทริบิวต์ value
<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="ส่ง">
</form>
แอตทริบิวต์ readonly
ทำให้ช่องอินพุต อ่านได้อย่างเดียว (read-only) ผู้ใช้สามารถคัดลอกข้อความได้ แต่ไม่สามารถแก้ไขได้ ค่าในช่องนี้ จะถูกส่งไปกับฟอร์มด้วย
<input type="text" value="John" readonly>
แอตทริบิวต์ disabled
ทำให้ช่องอินพุต ไม่สามารถใช้งานได้ (ไม่คลิกหรือพิมพ์ได้) ค่าในช่องนี้ จะไม่ถูกส่ง เมื่อส่งฟอร์ม
<input type="text" value="John" disabled>
แอตทริบิวต์ size
20 ใช้ได้กับประเภท: text, search, tel, url, email, password
<input type="text" name="fname" size="50">
แอตทริบิวต์ maxlength
<input type="text" name="pin" maxlength="4" size="4">
แอตทริบิวต์ min และ max
กำหนดค่าต่ำสุดและค่าสูงสุดที่อนุญาต
ใช้ได้กับประเภท: number, range, date, datetime-local, month, time, week
<input type="number" min="1" max="5">
<input type="date" min="2000-01-01" max="2025-12-31">
แอตทริบิวต์ multiple
อนุญาตให้ผู้ใช้เลือกหรือกรอกได้มากกว่าหนึ่งค่า ใช้ได้กับประเภท email และ file
เช่น type="file" สามารถอัปโหลดหลายไฟล์ได้
หรือ type="email" กรอกหลายอีเมลคั่นด้วยเครื่องหมายจุลภาค (,)
<input type="file" name="files" multiple>
แอตทริบิวต์ pattern
ใช้กำหนด รูปแบบข้อมูล (Regular Expression) ที่ต้องตรวจสอบก่อนส่งฟอร์ม
ใช้ได้กับประเภท: text, search, url, tel, email, password
<input type="text" pattern="[A-Za-z]{3}" title="Three letter country code">
แอตทริบิวต์ placeholder
<input type="tel" placeholder="123-45-678">
แอตทริบิวต์ required
<input type="text" name="username" required>
แอตทริบิวต์ step
min และ max ได้
<input type="number" step="3">
แอตทริบิวต์ autofocus
<input type="text" name="fname" autofocus>
แอตทริบิวต์ height และ width
<input type="image"> ควรกำหนดทั้งความสูงและความกว้างเพื่อป้องกันการขยับของหน้าเว็บระหว่างโหลด
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
แอตทริบิวต์ list
<datalist> เพื่อให้แสดงตัวเลือกอัตโนมัติในช่องอินพุต
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
</datalist>
แอตทริบิวต์ autocomplete
เปิดหรือปิดฟังก์ชัน กรอกอัตโนมัติ (autocomplete)
เมื่อเปิดใช้งาน เบราว์เซอร์จะเสนอค่าที่เคยกรอกมาก่อน
<form> และอินพุตประเภท: text, search, url, tel, email, password, date, range, color
<form action="/action_page.php" autocomplete="on">
<input type="text" id="fname" name="fname">
<input type="email" id="email" name="email" autocomplete="off">
</form>
autocomplete="off" เพื่อป้องกันการบันทึกข้อมูลโดยไม่ตั้งใจ สรุปแอตทริบิวต์สำคัญของ <input>
| แท็ก | คำอธิบาย |
|---|---|
<form> | สร้างแบบฟอร์ม HTML สำหรับรับข้อมูลจากผู้ใช้ |
<input> | ใช้สร้างช่องกรอกข้อมูลหรือปุ่มต่าง ๆ |