และยินดีต้อนรับกลับ
เราจะพูดถึงแท็กขั้นสูงเพิ่มเติม และอาจเป็นแท็กที่สำคัญที่สุดที่คุณจะใช้นอกเหนือจากแท็กที่เราพูดถึงจนถึงตอนนี้คือแท็กที่เราจำเป็นต้องสร้างฟอร์ม
อย่างที่คุณทราบ เมื่อคุณไปที่เว็บไซต์ มักจะมีการเข้าสู่ระบบหรือแบบฟอร์มการลงทะเบียน
ดังนั้นเราจะสร้างมันขึ้นมาในวันนี้
ในการเริ่มต้น ให้สร้างไฟล์ใหม่ที่นี่
เราจะบันทึกและเรียกมันว่า HTML ที่ลงทะเบียนไว้บนเดสก์ท็อปของเรา
สมบูรณ์แบบ และเรารู้ว่าเราต้องการ HTML ดังนั้นเราจึงใช้ทางลัดเล็กๆ น้อยๆ ของเรา และเราจะตั้งชื่อมันว่า Register
บันทึกไว้
และตอนนี้ในไฟล์ HTML ที่จัดทำดัชนี มาเพิ่มลิงก์อื่นกัน
ที่อ้างอิง.
ลงทะเบียน.
HTML
และฉันจะบอกว่าที่นี่ลงทะเบียน
ไม่เป็นไร.
เราจะบันทึกไฟล์ทั้งสองนี้และมารีเฟรชกัน
เรามีทะเบียน.
คลิกลงทะเบียน
เรายังไม่มีอะไร แต่ดูเหมือนว่ามันจะได้ผล
ลองเพิ่มสิ่งนี้ในบรรทัดใหม่เพราะมันดูสวยกว่าในแบบนั้น
ในการทำเช่นนั้น ถ้าคุณจำได้ เราจะเพิ่มแท็กตัวแบ่ง
มารีเฟรชกันเถอะ
ไปเลย
เรามีเพจใหม่และลงทะเบียน
เรามาสร้างแบบฟอร์มนี้กัน
ถ้าเราเข้าไปที่ register dot html
วิธีที่เราเขียนแบบฟอร์มใน HTML ในขณะที่สะดวกมีแท็กแบบฟอร์ม
ตกลง.
แต่แท็กแบบฟอร์มนี้เอง จะต้องมีรูปแบบที่แท้จริงอยู่ภายใน
แล้วเรามีองค์ประกอบรูปแบบใดบ้าง?
อีกครั้ง ถ้าเราจำ W3C เพื่อนเก่าที่ดีของเรา ให้พิมพ์แบบฟอร์มกัน
และเราเห็นตรงนี้ว่าเรามีรูปแบบ HTML
และสดชื่น
เราจะทำให้เต็มหน้าจอ
และคุณสามารถเห็นได้ตรงนี้ว่ามีข้อมูลมากมายเกี่ยวกับมัน แต่คุณสามารถค้นดูเองได้ในตอนนี้
ฉันจะแนะนำให้คุณรู้จักกับสิ่งที่พบบ่อยที่สุด ซึ่งอาจจะเป็นสิ่งที่คุณจะใช้ 90% ของเวลาทั้งหมด
อย่างแรกที่เราทำกับแบบฟอร์มใด ๆ และไปที่หน้านั้นในตอนนี้คือสิ่งที่เราต้องการป้อนชื่อของเรา
แล้วเราจะทำอย่างนั้นได้อย่างไร?
เรามีแท็กอินพุต
ที่มีประเภทของข้อความเพราะว่าชื่อของเราจะอยู่ในรูปแบบข้อความ
และเราสามารถปิดมันได้
และจริงๆ แล้วมันเป็นแท็กปิดตัวเอง
ตอนนี้ถ้าฉันบันทึกและรีเฟรช เรามีกล่องเล็ก ๆ ที่นี่
หวังว่าคุณจะเห็นสิ่งนั้น
แต่เราน่าจะตั้งชื่อให้มันเพราะไม่รู้ว่าจะเข้าทางนั้นอย่างไร
เราจะใส่ในนี้เราจะพูดชื่อ
อัฒภาคและบันทึก
มารีเฟรชกัน
เรามีชื่อแล้ว ตอนนี้เรามาทำให้มันใหญ่ขึ้นอีกหน่อย
ไปเลย
ตอนนี้คุณสามารถป้อนชื่อของคุณที่นี่
สุดยอด.
เรามาเพิ่มอีกอันสำหรับนามสกุลกัน
และอีกครั้ง เราจะมีประเภทอินพุตของเรา
นั่นคือแอตทริบิวต์และค่าของข้อความ
และถ้าเรารีเฟรช เรามีนามสกุล
โอเค แต่มันดูน่าเกลียด
จำไว้ว่า HTML อ่านทีละบรรทัด และไม่รู้จริงๆ ว่าเราต้องการเว้นวรรคที่นี่
อีกครั้ง เราสามารถบวก a.
แท็กเบรคที่นี่และรีเฟรช
และเรามีชื่อและนามสกุล
ตกลง.
นั่นเป็นสิ่งที่ค่อนข้างชัดเจนในตัวเองในขณะนี้
เรามีอะไรอีกบ้าง?
ในรูปแบบ?
เรามีอีเมล์
เรามาเพิ่มฟิลด์อื่นกัน นั่นคือ อีเมล และเราจะป้อนข้อมูลอีกครั้ง พิมพ์การโทร ข้อความ
เราจะเพิ่มอีกช่วงพักตรงนี้เพราะเราต้องการระยะห่างนั้น
และขอบันทึกการรีเฟรช
สุดยอด.
ตกลง.
ดังนั้นเราจึงมีแบบฟอร์มการลงทะเบียนทั่วไปของเรา
และแน่นอนว่าไม่ว่าจะอยู่ในรูปแบบใดก็ตาม เราต้องการปุ่มบางอย่าง เช่น เราต้องส่งสิ่งนี้ที่ไหนสักแห่งเพื่อให้เราสามารถลงทะเบียนได้
อีกครั้งมีประเภทอินพุตที่ดีสำหรับสิ่งนั้น
ดังนั้นเราจึงป้อนข้อมูลแทนประเภทข้อความ
มีประเภทส่ง
อย่างนี้.
ถ้าเราเพิ่มช่วงพักที่นี่อีก
และฉันบันทึกสิ่งนี้ ฉันรีเฟรช มันมีปุ่มส่ง
ทีนี้ การส่งนี้มาจากไหน
เมื่อคุณใส่ประเภทการป้อนข้อมูลส่ง มันจะสร้างปุ่มโดยอัตโนมัติ
และถ้าคุณไม่ระบุว่าจะพูดอะไร ก็จะมีข้อความนี้เท่านั้น
แต่เราสามารถเปลี่ยนสิ่งนั้นเพื่อให้เราสามารถใส่ค่าได้
และเราจะทำการลงทะเบียน
บันทึกการรีเฟรชนั้น
ตอนนี้เรามีปุ่มลงทะเบียน
ตกลง.
แต่ถ้าเราทำผิดพลาดในด้านนี้ล่ะ?
เราเขียนสิ่งต่าง ๆ และเราต้องการรีเซ็ตสิ่งนี้อีกครั้ง มีอินพุตอื่นสำหรับสิ่งนั้น
และประเภทของอินพุตนั้น อย่างที่คุณจินตนาการได้ จะถูกรีเซ็ต
ตอนนี้ถ้าเราปิดโฆษณานี้ อันที่จริง เราสามารถทำให้มันอยู่ในบรรทัดเดียวกันได้
เราจะบันทึกการรีเฟรช
และเราได้รีเซ็ต
ทีนี้ ถ้าผมพิมพ์อะไรลงไป แล้วสมมุติว่าผมไม่อยากดี ผมไม่ชอบสิ่งนี้
ฉันต้องรีเซ็ตแบบฟอร์ม
ฉันสามารถคลิกรีเซ็ตและล้างทุกอย่างให้เรา
ตกลง.
คุณอาจจะถามตัวเองว่าอะไร?
จะเกิดอะไรขึ้นเมื่อเราคลิกลงทะเบียน?
ก่อนที่เราจะพูดถึงเรื่องนั้น ฉันต้องการเพียงแค่ดูประเภทอินพุตทั่วไปทั้งหมด จากนั้นเราจะคลิกลงทะเบียนเพื่อดูว่าเกิดอะไรขึ้นกับอีเมล
อันดับแรก เราต้องการให้มันเป็นสิ่งจำเป็น เพื่อที่ว่าเมื่อคุณคลิกลงทะเบียน หากคุณไม่ได้ให้อีเมล
ก็จะไม่อนุญาตให้คุณลงทะเบียน
และมีคุณลักษณะที่เราสามารถใช้สำหรับสิ่งนั้นและนั่นเป็นสิ่งที่จำเป็น
และที่นี่เราไม่จำเป็นต้องระบุค่าจริง ๆ เพราะจะถือว่าโดยอัตโนมัติว่า required เท่ากับ true ซึ่งหมายความว่าจำเป็นต้องมีฟิลด์แบบฟอร์มนี้
ดังนั้น ถ้าฉันบอกว่าฉันรีเฟรช และเว้นว่างไว้ และคลิกลงทะเบียน ฉันจะบอกว่า โปรดกรอกข้อมูลในฟิลด์นี้
ตอนนี้ เรายังต้องการให้แน่ใจว่าเป็นฟิลด์อีเมลที่เหมาะสม
ดังนั้น ถ้าฉันพิมพ์อะไรแบบนี้ เรายังต้องการให้แน่ใจว่านี่เป็นอีเมลที่ไม่ถูกต้อง
เราไม่ต้องการลงทะเบียน
ดังนั้นประเภทการป้อนข้อความที่ฉันบอกคุณสำหรับอีเมลจึงผิดจริง
มีบางอย่างที่เราสามารถใช้ได้ ซึ่งก็คืออีเมลอย่างที่คุณนึกออก
ดังนั้นหากฉันรีเฟรชและพิมพ์บางอย่างที่ไม่ใช่อีเมล และฉันคลิกลงทะเบียน
ฉันจะบอกว่าโปรดรวมแอพและที่อยู่อีเมล
ดีมาก.
มันเหมือนกับเวทมนตร์
มันทำสิ่งนี้เพื่อคุณซึ่งดีมาก
มาขยายความรู้เกี่ยวกับอินพุตและเพิ่มฟิลด์อื่นๆ ที่อาจจำเป็นต้องใช้มากที่สุด
มักจะต้องการทราบวันเกิดของใครบางคน
มาเพิ่มวันเกิดที่นี่กันเถอะ
และสำหรับประเภทอินพุตนี้ เรามาพิมพ์กัน
วันที่.
ดังนั้นหากฉันบันทึกสิ่งนี้และรีเฟรช ดูนั่นสิ
เรามีคนนัดเดทตัวน้อยที่น่ารัก
ดังนั้นฉันจึงสามารถเลือกอะไรก็ได้ที่นี่
ไม่เป็นไร.
เราต้องการอะไรอีก?
เรายังต้องการเพศ
เราจะทำการป้อนข้อมูลพิมพ์
และสำหรับเพศ
ไม่มีประเภทอินพุตเฉพาะสำหรับเพศ แต่มีบางอย่างที่เรียกว่าวิทยุ
และวิทยุก็เป็นปุ่มตัวเลือกตามชื่อ
ดังนั้นตอนนี้
ฉันคลิกรีเฟรชและฉันมีปุ่มตัวเลือกหนึ่งปุ่ม แต่เราต้องการมีตัวเลือกที่เหมาะสมใช่ไหม
แล้วเราจะทำอย่างนั้นได้อย่างไร?
ดังนั้นสำหรับวิทยุ เราต้องพูดด้วยว่าชายหรือหญิง เรามาอยู่ในเพศกันเถอะ
เราจะหยุดพักที่นี่ในบรรทัดและเราจะบอกว่า
วิทยุประเภทอินพุตแล้วเราจะบอกว่าจดหมาย
และเรายังต้องการ
หญิง.
และเรายังต้องการ
อื่น.
และเมื่อเรารีเฟรชสิ่งนี้ เราก็มีทั้งเพศชาย ผู้หญิง และอื่นๆ
แต่คุณเห็นปัญหาที่นี่
ฉันแค่คลิกปุ่มตัวเลือกและไม่สามารถยกเลิกการเลือกได้
และในอุดมคติแล้ว คุณทำได้เพียงคุณเท่านั้นที่จะสามารถเลือกได้เพียงอย่างใดอย่างหนึ่งเท่านั้น
และตอนนี้ แบบที่ปุ่มวิทยุเป็น พวกมันไม่รู้ถึงการมีอยู่ของกันและกัน
เราต้องการให้แน่ใจว่าพวกเขารู้ว่าพวกเขาเชื่อมต่อกัน พวกเขาเป็นครอบครัว และสามารถเลือกได้เพียงคนเดียว
แล้วเราจะทำอย่างนั้นได้อย่างไร?
วิธีที่เราทำคือผ่านแอตทริบิวต์ชื่อ
ดังนั้นสำหรับชื่อเราจะบอกว่าเพศ
และแอตทริบิวต์ชื่อนี้ต้องตรงกันบนปุ่มตัวเลือกทั้งหมด เพื่อให้พวกเขารู้ว่าปุ่มเหล่านี้เป็นส่วนหนึ่งของช่องป้อนข้อมูลเพศ
ดังนั้นถ้าฉันบันทึกที่นี่และรีเฟรช
ตอนนี้คุณจะเห็นว่าฉันเลือกได้เพียงอันเดียวเท่านั้น
ได้เลย สมบูรณ์แบบ
เราควรมีอะไรอีกบ้าง?
สมมุติว่าผมอยากทราบว่าคุณมีสัตว์เลี้ยงหรือไม่
ดังนั้นกับสัตว์เลี้ยง
เราจะมีประเภทอินพุต
คุณสามารถมีสัตว์เลี้ยงได้หลายตัว ดังนั้นมันจะไม่เป็นปุ่มตัวเลือก
เราต้องการช่องทำเครื่องหมาย
ช่องทำเครื่องหมายเราต้องการให้มีแมวหรือใส่แมวและเราอยากได้
พิมพ์ได้แล้ววันนี้
กล่องกาเครื่องหมายและเราต้องการที่จะมีสุนัข
เลยเก็บเอาไว้
มารีเฟรชและดูที่
เรามีสัตว์เลี้ยง แต่คราวนี้เป็นช่องทำเครื่องหมาย ซึ่งหมายความว่า
สามารถเลือกได้หลายแบบ