HTML <input> ประเภทแอตทริบิวต์
ตัวอย่าง
แบบฟอร์ม HTML ที่มีช่องป้อนข้อมูลสองช่อง หนึ่งฟิลด์ข้อความและหนึ่งปุ่มส่ง:
<form action="/action_page.php">
<label for="username">Username: </label>
<input type="text"
id="username" name="username"><br>
<input type="submit" value="Submit">
</form>
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
แอตทริบิวต์typeระบุประเภทของ
<input>องค์ประกอบที่จะแสดง
หากtypeไม่ได้ระบุแอตทริบิวต์ ประเภทเริ่มต้นคือ "ข้อความ"
รองรับเบราว์เซอร์
| Attribute | |||||
|---|---|---|---|---|---|
| type | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
<input type="value">
ค่าแอตทริบิวต์
| Value | Description |
|---|---|
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| color | Defines a color picker |
| date | Defines a date control (year, month, day (no time)) |
| datetime-local | Defines a date and time control (year, month, day, time (no timezone) |
| Defines a field for an e-mail address | |
| file | Defines a file-select field and a "Browse" button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| month | Defines a month and year control (no timezone) |
| number | Defines a field for entering a number |
| password | Defines a password field |
| radio | Defines a radio button |
| range | Defines a range control (like a slider control) |
| reset | Defines a reset button |
| search | Defines a text field for entering a search string |
| submit | Defines a submit button |
| tel | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field |
| time | Defines a control for entering a time (no timezone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no timezone) |
ตัวอย่างเพิ่มเติม
ประเภทอินพุต: ปุ่ม
ปุ่มกดที่เปิดใช้งาน JavaScript เมื่อมีการคลิก:
<input type="button" value="Click me" onclick="msg()">
ประเภทอินพุต: ช่องทำเครื่องหมาย
ช่องทำเครื่องหมายให้ผู้ใช้เลือกหนึ่งตัวเลือกหรือมากกว่าจากตัวเลือกที่จำกัด:
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
ประเภทอินพุต: สี
เลือกสีจากตัวเลือกสี:
<label for="favcolor">Select your favorite color:</label>
<input type="color"
id="favcolor" name="favcolor">
ประเภทอินพุต: วันที่
กำหนดการควบคุมวันที่:
<label for="birthday">Birthday:</label>
<input type="date"
id="birthday" name="birthday">
ประเภทอินพุต: datetime-local
กำหนดการควบคุมวันที่และเวลา (ไม่มีโซนเวลา):
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local"
id="birthdaytime" name="birthdaytime">
ประเภทอินพุต: อีเมล
กำหนดฟิลด์สำหรับที่อยู่อีเมล (จะได้รับการตรวจสอบโดยอัตโนมัติเมื่อส่ง):
<label for="email">Enter your email:</label>
<input type="email"
id="email" name="email">
ประเภทอินพุต: file
กำหนดช่องเลือกไฟล์และปุ่ม "เรียกดู..." (สำหรับการอัปโหลดไฟล์):
<label for="myfile">Select a file:</label>
<input type="file"
id="myfile" name="myfile">
ประเภทอินพุต: ซ่อน
กำหนดฟิลด์ที่ซ่อนอยู่ (ผู้ใช้ไม่สามารถมองเห็นได้)
ฟิลด์ที่ซ่อนอยู่มักจะเก็บบันทึกฐานข้อมูลที่จำเป็นต้องปรับปรุงเมื่อส่งแบบฟอร์ม:
<input type="hidden" id="custId" name="custId" value="3487">
ประเภทอินพุต: ภาพ
กำหนดรูปภาพเป็นปุ่มส่ง:
<input type="image" src="img_submit.gif" alt="Submit">
ประเภทอินพุต: เดือน
กำหนดการควบคุมเดือนและปี (ไม่มีเขตเวลา):
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month"
id="bdaymonth" name="bdaymonth">
ประเภทอินพุต: ตัวเลข
กำหนดฟิลด์สำหรับการป้อนตัวเลข (คุณยังสามารถกำหนดข้อจำกัดว่าหมายเลขใดที่ยอมรับได้):
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number"
id="quantity" name="quantity" min="1" max="5">
ใช้แอตทริบิวต์ต่อไปนี้เพื่อระบุข้อจำกัด:
- max - ระบุค่าสูงสุดที่อนุญาต
- min - ระบุค่าต่ำสุดที่อนุญาต
- ขั้นตอน - ระบุช่วงตัวเลขทางกฎหมาย
- ค่า - ระบุค่าเริ่มต้น
ประเภทอินพุต: รหัสผ่าน
กำหนดฟิลด์รหัสผ่าน (อักขระถูกปิดบัง):
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
ประเภทอินพุต: วิทยุ
ปุ่มตัวเลือกให้ผู้ใช้เลือกได้เพียงตัวเลือกเดียวเท่านั้น:
<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>
ประเภทอินพุต: ช่วง
กำหนดตัวควบคุมสำหรับการป้อนตัวเลขที่มีค่าที่แน่นอนไม่สำคัญ (เช่น ตัวควบคุมตัวเลื่อน) ช่วงเริ่มต้นคือ 0 ถึง 100 อย่างไรก็ตาม คุณสามารถตั้งค่าข้อจำกัดเกี่ยวกับจำนวนที่ยอมรับด้วยแอตทริบิวต์ min, max และ step ได้:
<label for="vol">Volume (between 0 and 50):</label>
<input type="range"
id="vol" name="vol" min="0" max="50">
ใช้แอตทริบิวต์ต่อไปนี้เพื่อระบุข้อจำกัด:
- max - ระบุค่าสูงสุดที่อนุญาต
- min - ระบุค่าต่ำสุดที่อนุญาต
- ขั้นตอน - ระบุช่วงตัวเลขทางกฎหมาย
- ค่า - ระบุค่าเริ่มต้น
ประเภทอินพุต: รีเซ็ต
กำหนดปุ่มรีเซ็ต (รีเซ็ตค่าแบบฟอร์มทั้งหมดเป็นค่าเริ่มต้น):
<input type="reset">
เคล็ดลับ:ใช้ปุ่มรีเซ็ตอย่างระมัดระวัง! อาจสร้างความรำคาญให้กับผู้ใช้ที่เปิดใช้งานปุ่มรีเซ็ตโดยไม่ตั้งใจ
ประเภทอินพุต: ค้นหา
กำหนดช่องค้นหา (เช่น การค้นหาไซต์ หรือการค้นหาโดย Google):
<label for="gsearch">Search Google:</label>
<input type="search"
id="gsearch" name="gsearch">
ประเภทอินพุต: ส่ง
กำหนดปุ่มส่ง:
<input type="submit">
ประเภทอินพุต: tel
กำหนดฟิลด์สำหรับการป้อนหมายเลขโทรศัพท์:
<label for="phone">Enter your phone number:</label>
<input type="tel"
id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
ประเภทอินพุต: ข้อความ
กำหนดฟิลด์ข้อความบรรทัดเดียวสองฟิลด์ที่ผู้ใช้สามารถป้อนข้อความลงใน:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text"
id="lname" name="lname"><br>
ประเภทอินพุต: เวลา
กำหนดการควบคุมสำหรับการป้อนเวลา (ไม่มีเขตเวลา):
<label for="appt">Select a time:</label>
<input type="time"
id="appt" name="appt">
ประเภทอินพุต: url
กำหนดฟิลด์สำหรับการป้อน URL:
<label for="homepage">Add your homepage:</label>
<input type="url"
id="homepage" name="homepage">
เคล็ดลับ: Safari บน iPhone รู้จักประเภทการป้อน URL และเปลี่ยนแป้นพิมพ์บนหน้าจอให้ตรงกัน (เพิ่มตัวเลือก .com)
ประเภทอินพุต: สัปดาห์
กำหนดการควบคุมสัปดาห์และปี (ไม่มีเขตเวลา):
<label for="week">Select a week:</label>
<input type="week"
id="week" name="week">
❮ แท็ก HTML <input>