บทนำและตัวอย่างของคุณสมบัติใหม่ของรูปแบบ HTML5

1. คำนำ

ในความเป็นจริงลักษณะของรูปแบบของ HTML5 ได้รับการแนะนำในมาตรา 28 คุณสมบัติ HTML5 เคล็ดลับและเทคนิคที่คุณต้องรู้เมื่อปีที่แล้ว อย่างไรก็ตามมันเป็นเรื่องน่าเสียใจเล็กน้อยที่การแนะนำของส่วนนี้จะแสดงในรูปแบบของวิดีโอ อันที่จริงมันก็โอเคถ้าเป็นวิดีโอ กุญแจสำคัญคือวิดีโอ Toutube ซึ่งจำเป็นต้องมีการแหกคุกเพื่อดู พลเมืองที่ดีอย่างฉันที่เป็นเพียงคนที่พิถีพิถันนั้นขี้เกียจเกินกว่าจะถูกหลอกในสถานการณ์อื่น ๆ ยกเว้นผู้ดูแลเที่ยวบินดังนั้นเนื้อหาที่แสดงในส่วนนี้ของวิดีโอนั้นว่างเปล่าจริง ๆ

ดังนั้นนี่คือแพทช์เพื่อปรับปรุงส่วนนี้ของเนื้อหา เนื้อหาทั่วไปของบทความนี้คือ:

# <อินพุตประเภท = หมายเลข />

# <อินพุตประเภท = ช่วง />

# <อินพุตประเภท = วันที่ /> และการควบคุมตัวเลือกเวลาอื่น ๆ

# <ประเภทอินพุต = สี /> ตัวเลือกสี

# <อินพุตประเภท = ค้นหา />

# <ดาต้าลิสต์> แอตทริบิวต์องค์ประกอบและรายการ

# ความสัมพันธ์ที่คลุมเครือระหว่างการตรวจสอบแบบฟอร์ม HTML5 และ CSS3

2. ฟีเจอร์ใหม่ของรูปแบบ HTML5

องค์ประกอบฟอร์ม HTML ที่มีหมายเลข = หมายเลขช่วยให้คุณสามารถเปลี่ยนค่าในกล่องข้อความโดยกดปุ่ม เอฟเฟกต์นี้มักจะเห็นในระบบ Windows เช่น:

คนขี้เกียจอยากนอนบนเก้าอี้แล้วคลิกเมาส์มากกว่านั่งและกดแป้นพิมพ์ ดังนั้นเมื่อเทียบกับอินพุตแป้นพิมพ์ก็มีตลาดสำหรับการคลิกและอินพุต นี่คือเหตุผลที่มีการควบคุมการเลือกตัวเลขในรูปแบบ HTML5

รหัส HTML หยาบมีดังนี้:

 จำนวนคน: <ประเภทอินพุต = ค่าตัวเลข = 1 />

หากคุณเพิ่มขีดจำกัดความกว้างที่เหมาะสมสำหรับจุดต่างๆผลในโครเมียม (UI โดยประมาณนั้นเกี่ยวข้องกับธีมของระบบ) มีดังนี้:

เบราว์เซอร์ที่ได้รับการสนับสนุนในปัจจุบันคือ Opera 11 แต่ปุ่มที่เพิ่มและลบค่าภายใต้ Opera ดูคดเคี้ยวเล็กน้อยและมีสไตล์นามธรรม

คุณสามารถคลิกที่นี่ยาก: HTML5 แบบฟอร์ม Nubmer Demo Demo

ช่วงความหมายของช่วงความหมายของจีนและเอฟเฟกต์ประเภทนี้ก็เป็นเรื่องธรรมดาในระบบหน้าต่างดังแสดงในภาพหน้าจอต่อไปนี้:

มีการควบคุมอินพุตที่มีเอฟเฟกต์ที่คล้ายกันใน HTML5 เพียงกำหนดประเภทของมันเป็นช่วงง่ายมาก!

 ช่วงลาก: <อินพุตประเภท = ช่วงช่วง = 50 />

โดยค่าเริ่มต้นช่วงค่าคือ 0 ~ 100 ดังนั้นหากค่า = 50 แถบลากอยู่ตรงกลางของช่วงพื้นที่ ดังที่แสดงในรูปด้านล่าง:

Firefox ของฉันเป็นเวอร์ชัน 3.6 และคุณสมบัตินี้ยังไม่รองรับ อย่างไรก็ตาม Chrome, Opera และ Safari 4 ล้วนมีผลกระทบ แต่พวกเขาไม่ใช่พ่อคนเดียวกันดังนั้นจึงมีความแตกต่างบางอย่างในลักษณะที่ปรากฏดังนั้นความแตกต่างเหล่านี้จะไม่ปรากฏที่นี่

คุณสามารถคลิกที่นี่อย่างหนัก: ตัวอย่างแบบฟอร์ม HTML5

รายการสุดท้ายของคุณสมบัติ 28 HTML5 เทคนิคและเทคนิคที่กล่าวถึงในตอนต้นนั่นคือตัวอย่างเอฟเฟกต์ที่ยอดเยี่ยมของรายการที่ 28 คือเอฟเฟกต์ที่นำมาใช้ในการควบคุมช่วงซึ่งเกี่ยวข้องกับคุณลักษณะขั้นต่ำ, สูงสุดและคุณลักษณะขั้นตอน มันเป็นตัวอย่างที่คุ้มค่าที่จะสังเกตและเรียนรู้ เกี่ยวกับตัวอย่างนี้คุณสามารถคลิกที่นี่อย่างรุนแรง

นี่คือการควบคุมเวลาตัวเลือก หากคุณเลือกเป็นเวลานานอย่ากังวลกับปลั๊กอิน JS ใด ๆ เพียงแค่มีแอตทริบิวต์วันที่แล้วคุณสามารถสื่อสารกับหญิงชราที่กวาดพื้นถัดจากคุณในขณะที่กาแฟ ถ้าคุณไม่เชื่อลองดู:

 เลือกวันที่: <อินพุตประเภท = ค่าวันที่ = 2011-01-04 />

เป็นผลให้ภายใต้เบราว์เซอร์ที่รองรับเช่นโอเปร่าเอฟเฟกต์ต่อไปนี้มีอยู่:

นี่คือตัวเลือกเวลาที่ไม่มีชีวิต!

นอกเหนือจากการปรากฏตัวที่น่าเกลียดของเขาแล้วคนอื่น ๆ ก็ค่อนข้างน่ายินดี

พื้นที่คลาสเวลาไม่เพียง แต่ประเภทวันที่ แต่ยังประเภทเวลา แต่ยังรวมถึงวันที่สัปดาห์และเดือน

เห็นได้ชัดว่าชื่อหมายถึงประเภทวันที่คือการเลือกวันที่ประเภทเวลาคือการเลือกเวลาเวลาวันที่จะเลือกวันที่และเวลาและสัปดาห์คือการเลือกสัปดาห์และเดือนตระหนักถึงเดือน

คุณสามารถคลิกที่นี่อย่างหนัก: HTML5 แบบฟอร์มเวลาการสาธิตพื้นที่ชั้นเรียนชั้นเรียน

ฉันทดสอบและเพิ่งอัพเกรด Safari เป็นเวอร์ชัน 5.0 ฉันพบว่าในปัจจุบัน Opera Browser รองรับการควบคุมเวลาประเภทนี้ ผลกระทบมีดังนี้:

เมื่อ type = เวลาเอฟเฟกต์ค่อนข้างคล้ายกับ type = number คุณสามารถสลับกิจกรรมได้โดยคลิก โดยค่าเริ่มต้นทุกจุดคือหนึ่งครั้งเวลาจะถูกสลับเป็นเวลา 1 นาทีและเมาส์ถูกกดนานและเมาส์ก็ใช้ได้เช่นกัน

 เลือกเวลา: <อินพุตประเภท = ค่าเวลา = 22: 52 />

เลือกเวลา:

ภายใต้ Type = Week เมื่อเมาส์ผ่านผ่านสีพื้นหลังของวันที่ของแต่ละบรรทัด (หมายถึงหนึ่งสัปดาห์) จะกลายเป็นสีเข้มขึ้นตามที่แสดงในรูปด้านล่าง:

เมื่อ type = เดือนสีพื้นหลังของทั้งเดือนจะเข้มขึ้นดังแสดงในรูปด้านล่าง:

ค่าข้อมูลหลังจากเลือกทั้งสองมีดังนี้:

นี่คือการควบคุมตัวเลือกสีซึ่งค่อนข้างทรงพลัง ใช้งานง่ายมากดังนี้:

 เลือกสี: <อินพุตประเภท = ค่าสี =#34538B />

เอฟเฟกต์เริ่มต้นในเบราว์เซอร์โอเปร่ามีดังนี้:

การควบคุมอินพุตเริ่มต้นมีพื้นหลังสีกลมด้วย #34538B เราคลิกเพื่อเลื่อนลงและผลลัพธ์คือเช็ดและขยายแผงสีเว็บ:

คลิกปุ่มด้านล่างด้วยคำอื่น ๆ ...

มันเจ๋งมันใช้งานง่ายมากโอ้ฮิฮิ

คุณสามารถคลิกที่นี่อย่างหนัก: HTML5 แบบฟอร์มสีการเลือกสีควบคุมการควบคุมสี

มันคือฟังก์ชั่นการค้นหา ฉันจำได้ว่าเมื่อฉันเห็นว่ากล่องอินพุตประเภทการค้นหาจะมีไอคอนการค้นหาแว่นขยายโดยอัตโนมัติ อย่างไรก็ตามฉันไม่เห็นการทดสอบนี้ (อยู่ในความฝัน) และเอฟเฟกต์ UI ของคุณลักษณะนี้ต่ำมากและเย็นมาก ในเบราว์เซอร์ Core Core เมื่อมีค่าจะมีการข้ามเซ็กซี่หลังจากกล่องอินพุตดังที่แสดงด้านล่าง:

ฉันไม่พบอะไรพิเศษเกี่ยวกับสิ่งอื่นดังนั้นฉันจึงพูดถึงเรื่องนี้ คุณสามารถคลิกที่นี่อย่างหนัก: ตัวอย่างการควบคุมประเภทการค้นหา HTML5

Datalist เป็นองค์ประกอบที่หายากมากที่ใช้เอฟเฟกต์การดึงข้อมูลรายการข้อมูลและสไตล์ UI นั้นคล้ายกับการเติมอัตโนมัติเล็กน้อย

เพื่อให้ตัวอย่างง่ายๆ:

รหัส HTML ต่อไปนี้:

 รายการ: <อินพุตประเภท = รายการข้อความ = myData placeHolder = การจัดอันดับภาพยนตร์ยอดนิยม/> <datalist id = myData> <ตัวเลือกป้ายกำกับ = ค่า top1 = ปล่อยให้กระสุนบิน> <ตัวเลือกป้ายกำกับ = ค่า top2 = ถ้าคุณเป็นหนึ่ง 2> <ตัวเลือก label = top3 value = Laughing JIANGHU> <ตัวเลือก

ผลลัพธ์มีดังนี้หลังจากที่กล่องอินพุตได้รับโฟกัส:

สิ่งนี้คุณลักษณะนี้เป็นสิ่งที่ดี อย่าเดินไปรอบ ๆ และพบว่ามีผลกระทบภายใต้เบราว์เซอร์โอเปร่าล่าสุดเท่านั้น ไม่ทราบว่าเบราว์เซอร์อื่นจะสนับสนุนในอนาคตหรือไม่

3. การตรวจสอบแบบฟอร์ม HTML5 และ CSS3

ด้วย HTML5 คลาสหลอกใหม่บางตัวก็ปรากฏในส่วนตัวเลือกของ CSS3 เช่น:

• : จำเป็นและ: เป็นทางเลือกโปรดดูว่าเนื้อหาขององค์ประกอบฟอร์มเป็นทางเลือกหรือจำเป็น
• : ถูกต้องและ: ไม่ถูกต้องระบุว่าข้อมูลที่กรอกข้อมูลนั้นถูกต้องหรือไม่ถูกต้อง ตัวอย่างเช่นกล่องป้อนข้อมูลประเภทอีเมลต้องเป็นรูปแบบอีเมลที่ถูกต้อง
• ในช่วงและ: นอกช่วงซึ่งเหมาะสำหรับการควบคุมอินพุตประเภทช่วงเมื่อพวกเขามีข้อ จำกัด ช่วงต่ำสุดหรือสูงสุด

ตัวอย่างเช่นรหัส CSS และ HTML ต่อไปนี้:

 อินพุต [type = text]: โฟกัส: ถูกต้อง, อินพุต [type = อีเมล]: โฟกัส: ถูกต้อง, อินพุต [type = number]: โฟกัส: ในช่วง {โครงร่าง: 2px Green Solid; } อินพุต [type = text]: โฟกัส: ไม่ถูกต้อง, อินพุต [type = อีเมล]: โฟกัส: ไม่ถูกต้อง, อินพุต [type = number]: โฟกัส: นอกช่วง {โครงร่าง: 2px สีแดงของแข็ง; -

 <p> กล่องอินพุตปกติ: <อินพุต type = text /> </p> <p> กล่องอินพุตเมล: <อินพุตประเภท = อีเมล /> </p> <p> กล่องอินพุตตัวเลข: <อินพุตประเภท = number min = 0 สูงสุด = 10 /> (0 ~ 10) </p>

นำกล่องอินพุตจดหมายเป็นตัวอย่าง เมื่อข้อความอินพุตไม่ใช่กล่องจดหมายทางกฎหมายโครงร่างของกล่องอินพุตจะแสดงเส้นขอบเตือนสีแดง:

ด้วยการป้อนข้อมูลของอักขระเมื่อกล่องจดหมายถูกกฎหมายเส้นขอบสีแดงจะถูกแปรงลงในขอบสีเขียวที่ปลอดภัย:

การตรวจสอบงานรวมถึงการแสดงผลสไตล์ที่เกี่ยวข้อง ฯลฯ จะเสร็จสมบูรณ์โดยเบราว์เซอร์และ CSS ฉันคิดถึงมัน 10 ปีต่อมาว้าวนั่นคือเว็บทุกอย่างสวยงามมาก

4. สรุปข้อสรุป

คุณสมบัติอื่น ๆ ของรูปแบบ HTML5 เช่นต้องการอัตโนมัติโฟกัส, ตัวยึดรูปแบบ, ฯลฯ ได้รับการแสดงและอธิบายในคุณสมบัติ 28 HTML5, เคล็ดลับและเทคนิคที่คุณต้องรู้ดังนั้นฉันจะไม่เข้าไปดูรายละเอียดที่นี่

หากคุณสนใจ HTML5 ฉันขอแนะนำให้อ่านบทความก่อนหน้าเกี่ยวกับ 28 สิ่ง เนื้อหาของบทความนี้สามารถกล่าวได้ว่าเป็นการปรับปรุงและเสริมเพิ่มเติมในจุดหนึ่ง (คุณสมบัติใหม่อื่น ๆ ของรูปแบบ HTML5) อดีตเป็นเรื่องใหญ่และบทความนี้เป็นซอสถั่วเหลืองระดับสูงที่ดีที่สุด

ในที่สุดเนื่องจากเป็นสิ่งที่ HTML5 ทั้งหมดถ้าเบราว์เซอร์ที่คุณพยายามทำตอนนี้คือ IE แม้ว่าคุณจะปล่อยให้เบราว์เซอร์บินไปสักพักคุณจะไม่เห็นเอฟเฟกต์ที่สะดุดตาเหล่านี้ ดังนั้นจึงขอแนะนำให้ย้ายไปยังเบราว์เซอร์ที่ทันสมัยรุ่นล่าสุด

คุณสมบัติฟอร์มใหม่ใน html5: http://dev.opera.com/articles/view/new-form-features-in-html5/