ในบรรดาองค์ประกอบที่ได้รับการปรับปรุง HTML5 สิ่งที่น่าสังเกตมากที่สุดคือองค์ประกอบของฟอร์ม ใน HTML5 รูปแบบได้รับการตัดแต่งอย่างมากและคุณสมบัติบางอย่างที่ก่อนหน้านี้ต้องการการเข้ารหัส JavaScript สามารถนำไปใช้ได้อย่างง่ายดายโดยไม่ต้องเข้ารหัส ก่อนเริ่มการสนทนาสิ่งหนึ่งที่ควรทราบ:
ใน HTML5 การควบคุมแบบฟอร์มสามารถอยู่นอกรูปแบบหนึ่งหรือมากกว่าที่เป็นของมัน ดังนั้นการควบคุมแบบฟอร์มเช่น FieldSet, Label และ Input มีแอตทริบิวต์แบบฟอร์มทั้งหมดที่เพิ่มเข้ามาเพื่อระบุรูปแบบที่การควบคุมแบบฟอร์มเป็นของ ใน HTML5 :1. องค์ประกอบฟอร์มเองเพิ่มสองแอตทริบิวต์ใหม่: การเติมข้อความอัตโนมัติและ novalidate คุณสมบัติการเติมข้อความอัตโนมัติใช้เพื่อเปิดใช้งานคุณสมบัติรายการคำแนะนำแบบเลื่อนลงและคุณสมบัติ Novalidate ใช้เพื่อปิดคุณสมบัติการตรวจสอบความถูกต้องของแบบฟอร์มซึ่งมีประโยชน์เมื่อทำการทดสอบ
2. องค์ประกอบ FieldSet เพิ่มแอตทริบิวต์ใหม่สามรายการ: ปิดใช้งานชื่อและรูปแบบ คุณสมบัติการปิดใช้งานใช้เพื่อปิดใช้งาน FieldSet, คุณสมบัติชื่อใช้เพื่อตั้งชื่อของ FieldSet และค่าของคุณสมบัติแบบฟอร์มคือ ID ของหนึ่งหรือมากกว่าหนึ่งรูปแบบที่ FieldSet เป็นของ ดังที่ได้กล่าวไว้ก่อนหน้านี้เมื่อวางชุดฟิลด์ไว้นอกแบบฟอร์มคุณต้องตั้งค่าคุณสมบัติแบบฟอร์มของแท็ก FieldSet เพื่อให้ FieldSet สามารถเชื่อมโยงอย่างถูกต้องกับหนึ่งหรือมากกว่าหนึ่งแบบ
3. นอกเหนือจากแอตทริบิวต์สำหรับแอตทริบิวต์องค์ประกอบฉลากจะเพิ่มแอตทริบิวต์ฟอร์มเท่านั้น เป็นเรื่องที่ควรค่าแก่การกล่าวถึงที่นี่ว่าแอตทริบิวต์ซึ่งฉันไม่เคยให้ความสนใจมาก่อน แอตทริบิวต์สำหรับใช้เพื่อระบุการควบคุมแบบฟอร์มที่แนบมากับฉลาก ด้วยวิธีนี้เมื่อคลิกที่ป้ายกำกับนี้การควบคุมแบบฟอร์มที่แนบมาจะได้รับโฟกัสเช่น:
<form action = "demo_form.asp" id = "form1">
<label for = "name"> คลิกฉัน </label> <input id = "name" type = "text"> </input>
<อินพุตประเภท = "ส่ง" value = "ส่ง" />>>
</form>
คลิกคลิกฉันและกล่องอินพุตต่อไปนี้จะได้รับโฟกัส
4. องค์ประกอบอินพุตแนะนำประเภทใหม่และแอตทริบิวต์เพื่อเพิ่มความสามารถในการใช้งานของแบบฟอร์ม ประเภทอินพุตใหม่เหล่านี้มีประโยชน์มากสำหรับการจัดระเบียบและการจำแนกข้อมูล น่าเสียดายที่ไม่มีเบราว์เซอร์ใดสามารถรองรับทุกประเภทได้ดี
นอกเหนือจากปุ่มต้นฉบับข้อความส่งเช็คกล่องวิทยุเลือกรหัสผ่าน HTML5 เพิ่มประเภทอินพุตใหม่ต่อไปนี้:
สี: สีวันที่ต่าง ๆ : วันที่, วันหยุด, วันที่ local, เดือน, สัปดาห์, เวลา
อีเมล: อีเมล
หมายเลข: หมายเลข
พิสัย
ค้นหา: ค้นหา
โทรศัพท์: โทร
ประเภท URL: URL
คุณสามารถเรียกใช้ตัวอย่างต่อไปนี้เพื่อดูสถานะการสนับสนุนของเบราว์เซอร์ที่แตกต่างกัน:
<form action = "demo_form.asp">
เลือกสีที่คุณชื่นชอบ: <อินพุต type = "color" name = "favcolor" />
วันเกิด: <อินพุต type = "วันที่" name = "bday" />
วันเกิด (วันที่และเวลา): <อินพุต type = "dateTime" name = "bdaytime" />>>
วันเกิด (วันที่และเวลา): <อินพุต type = "dateTime-local" name = "bdaytime" />
วันเกิด (เดือนและปี): <อินพุต type = "เดือน" name = "bdaymonth" />>
เลือกเวลา: <อินพุต type = "time" name = "usr_time" />
เลือกหนึ่งสัปดาห์: <อินพุต type = "Week" name = "Week_year" />>
ปริมาณ (ระหว่าง 1 ถึง 5): <อินพุต type = "number" name = "ปริมาณ" min = "1" max = "5" />
ปริมาณ (ระหว่าง 1 ถึง 10): <อินพุต type = "range" name = "points" min = "1" max = "10" />
ค้นหา google: <อินพุต type = "search" name = "googlesearch" />
โทรศัพท์: <อินพุต type = "tel" name = "USRTEL" />
เพิ่มหน้าแรกของคุณ: <อินพุต type = "url" name = "homepage" />>
อีเมล: <อินพุต type = "อีเมล" name = "usremail" />
<อินพุต src = "submentbutton.png" type = "ส่ง" />
</form>
ต่อไปนี้เป็นคุณสมบัติอินพุตที่เพิ่มขึ้นใหม่:
Autocomplete : แสดงข้อมูลที่ป้อนก่อนหน้านี้โดยอัตโนมัติโดยมีค่าเปิดหรือปิด ใช้ได้กับข้อความ, ค้นหา, URL, โทร, อีเมล, รหัสผ่าน, DatePickers, ช่วงและประเภทสี ออโต้โฟกัส : รับโฟกัสโดยอัตโนมัติหลังจากโหลดหน้าเว็บโดยอัตโนมัติ แบบฟอร์ม : ระบุแบบฟอร์มที่อินพุตเป็นของซึ่งสามารถเป็นได้หลาย รูปแบบ : ระบุหน้า (URL) หรือไฟล์ที่ประมวลผลอินพุตนี้หลังจากส่งแบบฟอร์ม Formenctype : ระบุวิธีการเข้ารหัสข้อมูลหลังจากส่งแบบฟอร์ม FormMethod : ระบุวิธี HTTP สำหรับการส่งข้อมูลแบบฟอร์มซึ่งจะแทนที่วิธี HTTP ของแบบฟอร์มที่เกี่ยวข้อง FormNovalidate : ความถูกต้องของข้อมูลไม่ได้ถูกตรวจสอบก่อนการส่ง FormTarget : ระบุตำแหน่งที่จะแสดงเนื้อหาของแบบฟอร์มหลังจากส่ง ความสูงความกว้าง : ความยาวของกล่องอินพุตและความกว้างใช้เฉพาะกับประเภทภาพ สูงสุด, ขั้นต่ำ : ค่าสูงสุดและค่าต่ำสุดของค่าอินพุต ใช้ได้กับหมายเลขที่มีความหมายช่วงวันที่ หลาย : ไม่ว่าจะอนุญาตให้ป้อนหลายค่านั้นเหมาะสำหรับประเภทอีเมลและไฟล์ รูปแบบ : ระบุนิพจน์ทั่วไปเพื่อตรวจสอบค่าอินพุตที่ใช้กับข้อความ, ค้นหา, URL, โทร, อีเมล, รหัสผ่าน ตัวยึดตำแหน่ง : ข้อมูลแจ้งก่อนที่จะป้อนเข้าใช้กับข้อความค้นหา, URL, โทร, อีเมล, รหัสผ่าน จำเป็น : ไม่ว่าจะจำเป็นหากไม่จำเป็นต้องส่งแบบฟอร์ม ใช้กับข้อความ, ค้นหา, URL, โทร, อีเมล, รหัสผ่าน, ตัวเลือกวันที่, หมายเลข, ช่องทำเครื่องหมาย, วิทยุและประเภทไฟล์ ขั้นตอน : ป้อนค่าขั้นตอนเมื่อเติบโตโดยอัตโนมัติเหมาะสำหรับจำนวนช่วงวันที่วันที่ dateTime, DateTime-Local, ประเภทเดือนเวลาและสัปดาห์ รายการ : รายการผู้สมัครของรายการอินพุตจะต้องใช้ร่วมกับองค์ประกอบข้อมูล แอตทริบิวต์รายการสามารถใช้กับประเภทเหล่านี้: ข้อความ, ค้นหา, URL, โทร, อีเมล, วันที่, หมายเลข, ช่วงและสี คาดว่าจะใช้ได้กับ Firefox ดูตัวอย่างเล็ก ๆ :<fieldset>
<gregend> รายการโปรด </Legend>
<p>
<label>
<input type = "text" name = "รายการโปรด" list = "ตัวเลือก">
<datalist id = "ตัวเลือก">
<ตัวเลือกค่า = "A">
<ตัวเลือกค่า = "B">
<ตัวเลือกค่า = "C">
</tatalist>
</lable>
</p>
</fieldset>
ตัวอย่างต่อไปนี้พยายามใช้คุณสมบัติต่าง ๆ ซึ่งสามารถทำงานในเบราว์เซอร์ที่แตกต่างกันเพื่อดูเอฟเฟกต์จริง:
<form action = "demo_form.asp">
อีเมล: <อินพุต type = "อีเมล" name = "อีเมล" Autocomplete = "on" />>
รูปภาพ: <อินพุต type = "image" src = "img_submit.gif"/>>>>
ป้อนวันที่ก่อน 1980-01-01: <อินพุต type = "วันที่" ชื่อ = "bday" max = "1979-12-31">>
ป้อนวันที่หลังจาก 2000-01-01: <อินพุต type = "วันที่" ชื่อ = "bday" min = "2000-01-02">>
ปริมาณ (ระหว่าง 1 ถึง 5): <อินพุต type = "number" name = "ปริมาณ" min = "1" max = "5" />
เลือกรูปภาพ: <อินพุต type = "file" name = "img" multriay = "multiple" />>>
รหัสประเทศ: <อินพุต type = "text" name = "country_code" รูปแบบ = "[a-za-z] {3}" />
ชื่อแรก: <อินพุต type = "text" name = "fname" placeholder = "ชื่อแรก" />>>>>>>>>>>
ชื่อผู้ใช้: <อินพุต type = "text" name = "usrName" ต้องการ = "ต้องการ" />>>>
หมายเลข: <อินพุต type = "number" name = "points" step = "3" />>
<อินพุต type = "ส่ง" />
<อินพุต type = "submit" format = "demo_admin.asp" value = "ส่งเป็นผู้ดูแลระบบ" />>>>>> >>
<อินพุต type = "ส่ง" formulactype = "multipart/form-data" value = "ส่งเป็น multipart/form-data"/>
<อินพุต type = "ส่ง" formula = "post" format = "demo_post.asp" value = "ส่งโดยใช้โพสต์" />
<อินพุต type = "ส่ง" formNovalidate = "formNovalidate" value = "ส่งโดยไม่ต้องตรวจสอบ" />
<อินพุต type = "ส่ง" formTarget = "_ blank" value = "ส่งไปยังหน้าต่างใหม่" />
</form>
<form action = "demo_form.asp" id = "form1">
ชื่อแรก: <อินพุต type = "text" name = "fname" />
<อินพุตประเภท = "ส่ง" value = "ส่ง" />>>
</form>
นามสกุล: <อินพุต type = "text" name = "lname" form = "form1" />>>>
ข้อเสนอแนะ: แม้ว่าเบราว์เซอร์บางชนิดจะไม่รองรับทุกประเภท แต่คุณก็ยังคงได้รับการสนับสนุนให้ใช้ประเภทใหม่เหล่านี้เพราะแม้ว่าเบราว์เซอร์จะไม่รองรับมันก็จะเสื่อมสภาพลงในกล่องอินพุตข้อความง่าย ๆ การอ้างอิงเชิงปฏิบัติ: การสอน W3C: http://www.w3schools.com/html5/default.aspคำแนะนำอย่างเป็นทางการ html5: http://dev.w3.org/html5/html-author/
เว็บไซต์คู่มือที่ดีงาม: http://html5doctor.com/
การสอนภาษาจีน html5: http://www.html5china.com/
บล็อก Front-end ที่ดี: http://www.pjhome.net/default.asp?cateid=1
ความรู้ที่เกี่ยวข้องเกี่ยวกับแบบฟอร์มการดำเนินงาน JS: http://www.vevb.com/xugang/archive/2010/08/12/1798005.html