ในความเป็นจริงลักษณะของรูปแบบของ HTML5 ได้รับการแนะนำในมาตรา 28 คุณสมบัติ HTML5 เคล็ดลับและเทคนิคที่คุณต้องรู้เมื่อปีที่แล้ว อย่างไรก็ตามมันเป็นเรื่องน่าเสียใจเล็กน้อยที่การแนะนำของส่วนนี้จะแสดงในรูปแบบของวิดีโอ อันที่จริงมันก็โอเคถ้าเป็นวิดีโอ กุญแจสำคัญคือวิดีโอ Toutube ซึ่งจำเป็นต้องมีการแหกคุกเพื่อดู พลเมืองที่ดีอย่างฉันที่เป็นเพียงคนที่พิถีพิถันนั้นขี้เกียจเกินกว่าจะถูกหลอกในสถานการณ์อื่น ๆ ยกเว้นผู้ดูแลเที่ยวบินดังนั้นเนื้อหาที่แสดงในส่วนนี้ของวิดีโอนั้นว่างเปล่าจริง ๆ
ดังนั้นนี่คือแพทช์เพื่อปรับปรุงส่วนนี้ของเนื้อหา เนื้อหาทั่วไปของบทความนี้คือ:
# <อินพุตประเภท = หมายเลข />
# <อินพุตประเภท = ช่วง />
# <อินพุตประเภท = วันที่ /> และการควบคุมตัวเลือกเวลาอื่น ๆ
# <ประเภทอินพุต = สี /> ตัวเลือกสี
# <อินพุตประเภท = ค้นหา />
# <ดาต้าลิสต์> แอตทริบิวต์องค์ประกอบและรายการ
# ความสัมพันธ์ที่คลุมเครือระหว่างการตรวจสอบแบบฟอร์ม HTML5 และ CSS3
องค์ประกอบฟอร์ม HTML ที่มีหมายเลข = หมายเลขช่วยให้คุณสามารถเปลี่ยนค่าในกล่องข้อความโดยกดปุ่ม เอฟเฟกต์นี้มักจะเห็นในระบบ Windows เช่น:
คนขี้เกียจอยากนอนบนเก้าอี้แล้วคลิกเมาส์มากกว่านั่งและกดแป้นพิมพ์ ดังนั้นเมื่อเทียบกับอินพุตแป้นพิมพ์ก็มีตลาดสำหรับการคลิกและอินพุต นี่คือเหตุผลที่มีการควบคุมการเลือกตัวเลขในรูปแบบ HTML5
รหัส HTML หยาบมีดังนี้:
จำนวนคน: <ประเภทอินพุต = ค่าตัวเลข = 1 />
หากคุณเพิ่มขีดจำกัดความกว้างที่เหมาะสมสำหรับจุดต่างๆผลในโครเมียม (UI โดยประมาณนั้นเกี่ยวข้องกับธีมของระบบ) มีดังนี้:
เบราว์เซอร์ที่ได้รับการสนับสนุนในปัจจุบันคือ Opera 11 แต่ปุ่มที่เพิ่มและลบค่าภายใต้ Opera ดูคดเคี้ยวเล็กน้อยและมีสไตล์นามธรรม
คุณสามารถคลิกที่นี่ยาก: HTML5 แบบฟอร์ม Nubmer Demo Demo
2. ประเภท = ช่วงช่วงความหมายของช่วงความหมายของจีนและเอฟเฟกต์ประเภทนี้ก็เป็นเรื่องธรรมดาในระบบหน้าต่างดังแสดงในภาพหน้าจอต่อไปนี้:
มีการควบคุมอินพุตที่มีเอฟเฟกต์ที่คล้ายกันใน HTML5 เพียงกำหนดประเภทของมันเป็นช่วงง่ายมาก!
ช่วงลาก: <อินพุตประเภท = ช่วงช่วง = 50 />
โดยค่าเริ่มต้นช่วงค่าคือ 0 ~ 100 ดังนั้นหากค่า = 50 แถบลากอยู่ตรงกลางของช่วงพื้นที่ ดังที่แสดงในรูปด้านล่าง:
Firefox ของฉันเป็นเวอร์ชัน 3.6 และคุณสมบัตินี้ยังไม่รองรับ อย่างไรก็ตาม Chrome, Opera และ Safari 4 ล้วนมีผลกระทบ แต่พวกเขาไม่ใช่พ่อคนเดียวกันดังนั้นจึงมีความแตกต่างบางอย่างในลักษณะที่ปรากฏดังนั้นความแตกต่างเหล่านี้จะไม่ปรากฏที่นี่
คุณสามารถคลิกที่นี่อย่างหนัก: ตัวอย่างแบบฟอร์ม HTML5
รายการสุดท้ายของคุณสมบัติ 28 HTML5 เทคนิคและเทคนิคที่กล่าวถึงในตอนต้นนั่นคือตัวอย่างเอฟเฟกต์ที่ยอดเยี่ยมของรายการที่ 28 คือเอฟเฟกต์ที่นำมาใช้ในการควบคุมช่วงซึ่งเกี่ยวข้องกับคุณลักษณะขั้นต่ำ, สูงสุดและคุณลักษณะขั้นตอน มันเป็นตัวอย่างที่คุ้มค่าที่จะสังเกตและเรียนรู้ เกี่ยวกับตัวอย่างนี้คุณสามารถคลิกที่นี่อย่างรุนแรง
3. type = วันที่และการควบคุมเวลาอื่น ๆนี่คือการควบคุมเวลาตัวเลือก หากคุณเลือกเป็นเวลานานอย่ากังวลกับปลั๊กอิน JS ใด ๆ เพียงแค่มีแอตทริบิวต์วันที่แล้วคุณสามารถสื่อสารกับหญิงชราที่กวาดพื้นถัดจากคุณในขณะที่กาแฟ ถ้าคุณไม่เชื่อลองดู:
เลือกวันที่: <อินพุตประเภท = ค่าวันที่ = 2011-01-04 />
เป็นผลให้ภายใต้เบราว์เซอร์ที่รองรับเช่นโอเปร่าเอฟเฟกต์ต่อไปนี้มีอยู่:
นี่คือตัวเลือกเวลาที่ไม่มีชีวิต!
นอกเหนือจากการปรากฏตัวที่น่าเกลียดของเขาแล้วคนอื่น ๆ ก็ค่อนข้างน่ายินดี
พื้นที่คลาสเวลาไม่เพียง แต่ประเภทวันที่ แต่ยังประเภทเวลา แต่ยังรวมถึงวันที่สัปดาห์และเดือน
เห็นได้ชัดว่าชื่อหมายถึงประเภทวันที่คือการเลือกวันที่ประเภทเวลาคือการเลือกเวลาเวลาวันที่จะเลือกวันที่และเวลาและสัปดาห์คือการเลือกสัปดาห์และเดือนตระหนักถึงเดือน
คุณสามารถคลิกที่นี่อย่างหนัก: HTML5 แบบฟอร์มเวลาการสาธิตพื้นที่ชั้นเรียนชั้นเรียน
ฉันทดสอบและเพิ่งอัพเกรด Safari เป็นเวอร์ชัน 5.0 ฉันพบว่าในปัจจุบัน Opera Browser รองรับการควบคุมเวลาประเภทนี้ ผลกระทบมีดังนี้:
เมื่อ type = เวลาเอฟเฟกต์ค่อนข้างคล้ายกับ type = number คุณสามารถสลับกิจกรรมได้โดยคลิก โดยค่าเริ่มต้นทุกจุดคือหนึ่งครั้งเวลาจะถูกสลับเป็นเวลา 1 นาทีและเมาส์ถูกกดนานและเมาส์ก็ใช้ได้เช่นกัน
เลือกเวลา: <อินพุตประเภท = ค่าเวลา = 22: 52 />
เลือกเวลา:
ภายใต้ Type = Week เมื่อเมาส์ผ่านผ่านสีพื้นหลังของวันที่ของแต่ละบรรทัด (หมายถึงหนึ่งสัปดาห์) จะกลายเป็นสีเข้มขึ้นตามที่แสดงในรูปด้านล่าง:
เมื่อ type = เดือนสีพื้นหลังของทั้งเดือนจะเข้มขึ้นดังแสดงในรูปด้านล่าง:
ค่าข้อมูลหลังจากเลือกทั้งสองมีดังนี้:
4. ประเภท = สีนี่คือการควบคุมตัวเลือกสีซึ่งค่อนข้างทรงพลัง ใช้งานง่ายมากดังนี้:
เลือกสี: <อินพุตประเภท = ค่าสี =#34538B />
เอฟเฟกต์เริ่มต้นในเบราว์เซอร์โอเปร่ามีดังนี้:
การควบคุมอินพุตเริ่มต้นมีพื้นหลังสีกลมด้วย #34538B เราคลิกเพื่อเลื่อนลงและผลลัพธ์คือเช็ดและขยายแผงสีเว็บ:
คลิกปุ่มด้านล่างด้วยคำอื่น ๆ ...
มันเจ๋งมันใช้งานง่ายมากโอ้ฮิฮิ
คุณสามารถคลิกที่นี่อย่างหนัก: HTML5 แบบฟอร์มสีการเลือกสีควบคุมการควบคุมสี
5. type = ค้นหามันคือฟังก์ชั่นการค้นหา ฉันจำได้ว่าเมื่อฉันเห็นว่ากล่องอินพุตประเภทการค้นหาจะมีไอคอนการค้นหาแว่นขยายโดยอัตโนมัติ อย่างไรก็ตามฉันไม่เห็นการทดสอบนี้ (อยู่ในความฝัน) และเอฟเฟกต์ UI ของคุณลักษณะนี้ต่ำมากและเย็นมาก ในเบราว์เซอร์ Core Core เมื่อมีค่าจะมีการข้ามเซ็กซี่หลังจากกล่องอินพุตดังที่แสดงด้านล่าง:
ฉันไม่พบอะไรพิเศษเกี่ยวกับสิ่งอื่นดังนั้นฉันจึงพูดถึงเรื่องนี้ คุณสามารถคลิกที่นี่อย่างหนัก: ตัวอย่างการควบคุมประเภทการค้นหา HTML5
6. <Tatalist> องค์ประกอบและรายการคุณลักษณะDatalist เป็นองค์ประกอบที่หายากมากที่ใช้เอฟเฟกต์การดึงข้อมูลรายการข้อมูลและสไตล์ UI นั้นคล้ายกับการเติมอัตโนมัติเล็กน้อย
เพื่อให้ตัวอย่างง่ายๆ:
รหัส HTML ต่อไปนี้:
รายการ: <อินพุตประเภท = รายการข้อความ = myData placeHolder = การจัดอันดับภาพยนตร์ยอดนิยม/> <datalist id = myData> <ตัวเลือกป้ายกำกับ = ค่า top1 = ปล่อยให้กระสุนบิน> <ตัวเลือกป้ายกำกับ = ค่า top2 = ถ้าคุณเป็นหนึ่ง 2> <ตัวเลือก label = top3 value = Laughing JIANGHU> <ตัวเลือก
ผลลัพธ์มีดังนี้หลังจากที่กล่องอินพุตได้รับโฟกัส:
สิ่งนี้คุณลักษณะนี้เป็นสิ่งที่ดี อย่าเดินไปรอบ ๆ และพบว่ามีผลกระทบภายใต้เบราว์เซอร์โอเปร่าล่าสุดเท่านั้น ไม่ทราบว่าเบราว์เซอร์อื่นจะสนับสนุนในอนาคตหรือไม่
ด้วย 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 ปีต่อมาว้าวนั่นคือเว็บทุกอย่างสวยงามมาก
คุณสมบัติอื่น ๆ ของรูปแบบ HTML5 เช่นต้องการอัตโนมัติโฟกัส, ตัวยึดรูปแบบ, ฯลฯ ได้รับการแสดงและอธิบายในคุณสมบัติ 28 HTML5, เคล็ดลับและเทคนิคที่คุณต้องรู้ดังนั้นฉันจะไม่เข้าไปดูรายละเอียดที่นี่
หากคุณสนใจ HTML5 ฉันขอแนะนำให้อ่านบทความก่อนหน้าเกี่ยวกับ 28 สิ่ง เนื้อหาของบทความนี้สามารถกล่าวได้ว่าเป็นการปรับปรุงและเสริมเพิ่มเติมในจุดหนึ่ง (คุณสมบัติใหม่อื่น ๆ ของรูปแบบ HTML5) อดีตเป็นเรื่องใหญ่และบทความนี้เป็นซอสถั่วเหลืองระดับสูงที่ดีที่สุด
ในที่สุดเนื่องจากเป็นสิ่งที่ HTML5 ทั้งหมดถ้าเบราว์เซอร์ที่คุณพยายามทำตอนนี้คือ IE แม้ว่าคุณจะปล่อยให้เบราว์เซอร์บินไปสักพักคุณจะไม่เห็นเอฟเฟกต์ที่สะดุดตาเหล่านี้ ดังนั้นจึงขอแนะนำให้ย้ายไปยังเบราว์เซอร์ที่ทันสมัยรุ่นล่าสุด
บทความอ้างอิง:คุณสมบัติฟอร์มใหม่ใน html5: http://dev.opera.com/articles/view/new-form-features-in-html5/