HTML5 รูปแบบการใส่

รูปแบบการใส่ HTML5 ใหม่

HTML5 มีหลายรูปแบบการใส่รูปแบบใหม่ คุณสมบัติใหม่เหล่านี้ให้การควบคุมที่ดีกว่าการป้อนข้อมูลและการตรวจสอบ

บทนี้จะอธิบายครอบคลุมประเภทป้อนข้อมูลใหม่เหล่านี้:

• สี
• วันที่
• วันที่และเวลา
• วันที่และเวลาท้องถิ่น
• อีเมล
• เดือน
• จำนวน
• พิสัย
• ค้นหา
• โทร
• เวลา
• URL
• สัปดาห์

หมายเหตุ: ไม่ทั้งหมดของเบราว์เซอร์หลักที่สนับสนุนรูปแบบการใส่ใหม่ แต่คุณอยู่แล้วสามารถใช้พวกเขาในเบราว์เซอร์ที่สำคัญทั้งหมดถ้าไม่ได้รับการสนับสนุนก็ยังสามารถปรากฏเป็นช่องข้อความปกติ

ประเภทขาเข้า: สี

สีที่ใช้ในประเภทช่องใส่ส่วนใหญ่จะใช้เพื่อเลือกสีที่ดังต่อไปนี้:

ตัวอย่าง

เลือกสีที่เลือกสีนี้:

选择你喜欢的颜色: <input type="color" name="favcolor">

ลอง»

ประเภทขาเข้า: วัน

ประเภทวันที่ช่วยให้คุณสามารถเลือกวันที่จากตัวเลือกวันที่

ตัวอย่าง

กำหนดตัวควบคุมเวลา:

生日: <input type="date" name="bday">

ลอง»

ประเภทขาเข้า: วันที่และเวลา

ประเภท datetime ช่วยให้คุณสามารถเลือกวันที่ (เวลา UTC)

ตัวอย่าง

กำหนดวันที่และควบคุมเวลา (เวลาท้องถิ่น):

生日 (日期和时间): <input type="datetime" name="bdaytime">

ลอง»

ประเภทขาเข้า: วันที่และเวลาท้องถิ่น

ประเภทวันที่และเวลาท้องถิ่นช่วยให้คุณสามารถเลือกวันและเวลา (โซนเวลา)

ตัวอย่าง

กำหนดวันที่และเวลา (โซนเวลา No):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

ลอง»

ประเภทขาเข้าอีเมลล์

พิมพ์อีเมลที่ใช้สำหรับช่องใส่ควรมีที่อยู่อีเมล

ตัวอย่าง

เมื่อส่งแบบฟอร์มก็จะตรวจสอบโดยอัตโนมัติว่าโดเมนอีเมลที่ถูกต้องค่า:

E-mail: <input type="email" name="email">

ลอง»

เคล็ดลับ: iPhone ในเบราว์เซอร์ซาฟารีสนับสนุนชนิดใส่อีเมล์ของท่านและโดยการเปลี่ยนแป้นพิมพ์หน้าจอสัมผัสเพื่อให้ตรงกับมัน (เพิ่ม @ .com และตัวเลือก)

ประเภทขาเข้า: เดือน

เดือนประเภทช่วยให้คุณสามารถเลือกเดือน

ตัวอย่าง

เดือนที่กำหนดไว้และในปี (โซนเวลา No):

生日 (月和年): <input type="month" name="bdaymonth">

ลอง»

ประเภทขาเข้า: หมายเลข

ประเภทหมายเลขที่ใช้สำหรับช่องใส่ควรมีค่า

นอกจากนี้คุณยังสามารถตั้งค่าที่จะยอมรับจำนวน จำกัด :

ตัวอย่าง

กำหนดช่องใส่ตัวเลข ( จำกัด ):

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

ลอง»

ใช้คุณสมบัติต่อไปนี้เพื่อระบุชนิดของดิจิตอล จำกัด :

• สูงสุดที่ได้รับอนุญาตตามกฎระเบียบ max-
• นาที - ต่ำสุดที่ได้รับอนุญาตตามกฎระเบียบ
• ขั้นตอน - ระบุช่วงเวลาที่จำนวนตามกฎหมาย (ถ้าขั้นตอน = "3" ตัวเลขทางกฎหมายอาจจะ -3,0,3,6 ฯลฯ )
• คุ้มค่า - ค่าเริ่มต้นที่ระบุไว้

ลองตัวอย่างที่มีคุณลักษณะที่กำหนดไว้ทั้งหมด ลอง

ประเภทขาเข้า: ช่วง

ประเภทช่วงที่ใช้สำหรับช่องใส่ควรมีช่วงของค่าตัวเลข

ประเภทช่วงจะปรากฏเป็นแถบเลื่อน

ตัวอย่าง

คุณไม่จำเป็นต้องกำหนดค่าที่แม่นยำมาก (เช่นการควบคุมเลื่อน):

<input type="range" name="points" min="1" max="10">

ลอง»

กรุณาใช้แอตทริบิวต์ต่อไปนี้เพื่อระบุชนิดของดิจิตอล จำกัด :

• แม็กซ์ - สูงสุดที่อนุญาตตามระเบียบ
• นาที - ต่ำสุดที่ได้รับอนุญาตตามกฎระเบียบ
• ขั้นตอน - ระบุช่วงเวลาที่จำนวนตามกฎหมาย
• คุ้มค่า - ค่าเริ่มต้นที่ระบุไว้

ประเภทขาเข้า: การค้นหา

ประเภทการค้นหาสำหรับช่องค้นหาเช่นการค้นหาไซต์หรือการค้นหาของ Google

ตัวอย่าง

กำหนดช่องค้นหา (คล้ายกับการค้นหาไซต์หรือการค้นหาของ Google):

Search Google: <input type="search" name="googlesearch">

ลอง»

ประเภทขาเข้าโทร

ตัวอย่าง

ใส่โทรศัพท์ฟิลด์หมายเลขที่ถูกกำหนด:

电话号码: <input type="tel" name="usrtel">

ลอง»

ประเภทขาเข้า: เวลา

ประเภทเวลาจะช่วยให้คุณสามารถเลือกเวลา

ตัวอย่าง

กำหนดควบคุมเวลาการป้อนข้อมูล (โซนเวลา No):

选择时间: <input type="time" name="usr_time">

ลอง»

ประเภทขาเข้า: URL

พิมพ์ URL ที่ใช้สำหรับช่องใส่ควรมีที่อยู่ URL ที่

เมื่อส่งแบบฟอร์มโดยอัตโนมัติจะตรวจสอบค่าของฟิลด์ URL ที่

ตัวอย่าง

กำหนดช่องใส่ URL นี้:

添加您的主页: <input type="url" name="homepage">

ลอง»

เคล็ดลับ: iPhone ในเบราว์เซอร์ซาฟารีสนับสนุนประเภทการป้อน URL และโดยการเปลี่ยนแป้นพิมพ์หน้าจอสัมผัสเพื่อให้ตรงกับมัน (เพิ่มตัวเลือก .com)

ประเภทขาเข้า: สัปดาห์

สัปดาห์ที่ช่วยให้คุณสามารถเลือกประเภทของสัปดาห์และปี

ตัวอย่าง

คำจำกัดความสัปดาห์และในปี (โซนเวลา No):

选择周: <input type="week" name="week_year">

ลอง»

HTML5 <input> แท็ก