ตัวอย่าง
รูปแบบ HTML ที่มีสองประเภทการป้อนข้อมูลที่แตกต่างกัน ข้อความและส่ง:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
ลองตัวเอง» เพิ่มเติม "ลองตัวเอง" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
type แอตทริบิวต์ระบุชนิดของ <input> องค์ประกอบที่จะแสดง
พิมพ์เริ่มต้นคือ text
เคล็ดลับ: นี้ไม่ได้เป็นแอตทริบิวต์ที่จำเป็น แต่เราคิดว่าคุณควรรวมไว้
สนับสนุนเบราว์เซอร์
| คุณลักษณะ | |||||
|---|---|---|---|---|---|
| type | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
หมายเหตุ: type แอตทริบิวต์ทำงานในเบราว์เซอร์ที่สำคัญทั้งหมด แต่ไม่ทุกชนิดที่แตกต่างกันใส่ทำงานในเบราว์เซอร์ที่สำคัญทั้งหมด
ดูด้านล่างเพื่อดูการสนับสนุนเบราว์เซอร์สำหรับประเภทการป้อนข้อมูลแต่ละ
ความแตกต่างระหว่าง HTML 4.01 และ HTML5
HTML5 มีรูปแบบการใส่ใหม่ต่อไปนี้: color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel และ url
วากยสัมพันธ์
<input type="value">
ค่าแอตทริบิวต์
| ความคุ้มค่า | ลักษณะ |
|---|---|
| button | กำหนดปุ่มคลิกได้ (ส่วนใหญ่ใช้กับจาวาสคริปต์เพื่อเปิดใช้งานสคริปต์) |
| checkbox | กำหนดช่องทำเครื่องหมาย |
| color | กำหนดตัวเลือกสี |
| date | กำหนดควบคุมวันที่ (ปีเดือนและวัน (ไม่มีเวลา)) |
| datetime | ประเภทการป้อนข้อมูลวันที่และเวลาได้ถูกลบออกจากมาตรฐาน HTML ใช้วันที่และเวลาท้องถิ่นแทน |
| datetime-local | กำหนดวันที่และเวลาการควบคุม (ปีเดือนวันชั่วโมงนาทีวินาทีและเสี้ยววินาที (โซนเวลา) |
| กำหนดเขตข้อมูลที่อยู่อีเมล | |
| file | กำหนดข้อมูลไฟล์และเลือกปุ่ม "Browse ... " (สำหรับการอัปโหลดไฟล์) |
| hidden | กำหนดช่องใส่ที่ซ่อนอยู่ |
| image | กำหนดภาพเป็นปุ่มส่ง |
| month | กำหนดเดือนและปี Control (ไม่มีโซนเวลา) |
| number | กำหนดช่องสำหรับป้อนตัวเลข |
| password | กำหนดฟิลด์รหัสผ่าน (ตัวอักษรหน้ากาก) |
| radio | กำหนดปุ่ม |
| range | กำหนดควบคุมสำหรับการป้อนจำนวนที่มีค่าที่แน่นอนไม่ได้เป็นสิ่งที่สำคัญ (เช่นการควบคุมเลื่อน) |
| reset | กำหนดปุ่มรีเซ็ต (รีเซ็ตค่าทุกรูปแบบไปเป็นค่าเริ่มต้น) |
| search | กำหนดฟิลด์ข้อความสำหรับการป้อนสตริงการค้นหา |
| submit | กำหนดปุ่มส่ง |
| tel | กำหนดฟิลด์สำหรับป้อนหมายเลขโทรศัพท์ |
| text | ค่าเริ่มต้น. กำหนดฟิลด์ข้อความบรรทัดเดียว (กว้างเริ่มต้นคือ 20 ตัวอักษร) |
| time | กำหนดควบคุมสำหรับการป้อนเวลา (ไม่มีโซนเวลา) |
| url | กำหนดฟิลด์สำหรับป้อน URL ที่ |
| week | กำหนดสัปดาห์และปี Control (ไม่มีโซนเวลา) |
ตัวอย่าง
ประเภทขาเข้า: button
ตัวอย่าง
ปุ่มคลิกได้ที่เปิดใช้งานจาวาสคริเมื่อมีการคลิก:
<input type="button" value="Click me" onclick="msg()">
ลองตัวเอง» ประเภทขาเข้า: checkbox
ตัวอย่าง
ช่องทำเครื่องหมายให้ผู้ใช้เลือกหนึ่งหรือมากกว่าหนึ่งตัวเลือกของมีจำนวน จำกัด ของตัวเลือก:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
ลองตัวเอง» ประเภทขาเข้า: color
ตัวอย่าง
เลือกสีจากตัวเลือกสีที่:
Select your favorite color: <input type="color" name="favcolor"> ลองตัวเอง» ประเภทขาเข้า: date
ประเภทขาเข้า: datetime
ตัวอย่าง
กำหนดวันที่และเวลาการควบคุม (กับโซนเวลา):
Birthday (date and time): <input type="datetime" name="bdaytime"> ลองตัวเอง» ประเภทการป้อนข้อมูลวันที่และเวลาได้ถูกลบออกจากมาตรฐาน HTML ใช้วันที่และเวลาท้องถิ่นแทน
ประเภทขาเข้า: datetime-local
ตัวอย่าง
กำหนดวันและควบคุมเวลา (โซนเวลา No):
Birthday (date and time): <input type="datetime-local" name="bdaytime"> ลองตัวเอง» ประเภทขาเข้า: email
ตัวอย่าง
กำหนดเขตข้อมูลที่อยู่ E-mail (จะถูกตรวจสอบโดยอัตโนมัติเมื่อส่ง):
E-mail: <input type="email" name="usremail"> ลองตัวเอง» เคล็ดลับ: Safari บน iPhone ตระหนักพิมพ์อีเมลและการเปลี่ยนแปลงแป้นพิมพ์บนหน้าจอเพื่อให้ตรงกับมัน (เพิ่ม @ .com และตัวเลือก)
ประเภทขาเข้า: file
ตัวอย่าง
กำหนดข้อมูลไฟล์และเลือก "Browse ... " ปุ่ม (สำหรับการอัปโหลดไฟล์):
Select a file: <input type="file" name="img">
ลองตัวเอง» ประเภทขาเข้า: hidden
ตัวอย่าง
กำหนดเขตข้อมูลที่ซ่อน (ไม่สามารถมองเห็นให้กับผู้ใช้)
เขตข้อมูลที่ซ่อนมักจะเก็บค่าเริ่มต้นหรือสามารถมีความคุ้มค่าการเปลี่ยนแปลงโดย javascript:
<input type="hidden" name="country" value="Norway">
ลองตัวเอง» ประเภทขาเข้า: image
ประเภทขาเข้า: month
ตัวอย่าง
กำหนดเดือนและปีการควบคุม (โซนเวลา No):
Birthday (month and year): <input type="month" name="bdaymonth"> ลองตัวเอง» ประเภทขาเข้า: number
ตัวอย่าง
กำหนดเขตข้อมูลสำหรับการป้อนหมายเลข (คุณยังสามารถตั้งข้อ จำกัด เกี่ยวกับสิ่งที่ได้รับการยอมรับตัวเลข):
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5"> ลองตัวเอง» ใช้ following คุณสมบัติที่ระบุข้อ จำกัด :
- max - ระบุค่าสูงสุดที่อนุญาต
- min - ระบุค่าต่ำสุดที่ได้รับอนุญาต
- step - ระบุช่วงเวลาที่ถูกต้องตามกฎหมายจำนวน
- value - ระบุค่าเริ่มต้น
ประเภทขาเข้า: password
ประเภทขาเข้า: radio
ตัวอย่าง
ปุ่มให้ผู้ใช้เลือกได้เพียงหนึ่งในจำนวนที่ จำกัด ของตัวเลือก:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
ลองตัวเอง» ประเภทขาเข้า: range
ตัวอย่าง
กําหนดการควบคุมสำหรับการป้อนจำนวนที่มีค่าที่แน่นอนไม่สำคัญ (เช่นการควบคุมเลื่อน) นอกจากนี้คุณยังสามารถกำหนดข้อ จำกัด เกี่ยวกับสิ่งที่ได้รับการยอมรับตัวเลข:
<input type="range" name="points" min="0" max="10"> ลองตัวเอง» ใช้ following คุณสมบัติที่ระบุข้อ จำกัด :
- max - ระบุค่าสูงสุดที่อนุญาต
- min - ระบุค่าต่ำสุดที่ได้รับอนุญาต
- step - ระบุช่วงเวลาที่ถูกต้องตามกฎหมายจำนวน
- value - ระบุค่าเริ่มต้น
ประเภทขาเข้า: reset
เคล็ดลับ: ใช้ปุ่มรีเซ็ตอย่างระมัดระวัง!อาจจะน่ารำคาญสำหรับผู้ใช้ที่ไม่ได้ตั้งใจเปิดใช้งานปุ่มรีเซ็ต
ประเภทขาเข้า: search
ตัวอย่าง
กำหนดช่องค้นหา (เช่นการค้นหาไซต์หรือการค้นหาของ Google):
Search Google: <input type="search" name="googlesearch"> ลองตัวเอง» ประเภทขาเข้า: submit
ประเภทการป้อนข้อมูล: tel
ตัวอย่าง
กำหนดเขตข้อมูลสำหรับการป้อนหมายเลขโทรศัพท์:
Telephone: <input type="tel" name="usrtel"> ลองตัวเอง» ประเภทขาเข้า: text
ตัวอย่าง
กำหนดสองช่องข้อความบรรทัดเดียวที่ผู้ใช้สามารถป้อนข้อความลงใน:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
ลองตัวเอง» ประเภทขาเข้า: time
ตัวอย่าง
กําหนดการควบคุมสำหรับการป้อนเป็นเวลา (โซนเวลา) A:
Select a time: <input type="time" name="usr_time"> ลองตัวเอง» ประเภทขาเข้า: url
ตัวอย่าง
กำหนดเขตข้อมูลสำหรับการป้อน URL ที่:
Add your homepage: <input type="url" name="homepage"> ลองตัวเอง» เคล็ดลับ: Safari บน iPhone ตระหนักถึงประเภทขา URL และการเปลี่ยนแปลงแป้นพิมพ์บนหน้าจอเพื่อให้ตรงกับมัน (เพิ่มตัวเลือก .com)
ประเภทขาเข้า: week
ตัวอย่าง
กำหนดสัปดาห์และปีการควบคุม (โซนเวลา No):
Select a week: <input type="week" name="week_year"> ลองตัวเอง»