registration form

แบบฟอร์มการลงทะเบียนออนไลน์

โครงการนี้เป็นโครงการที่สามสำหรับหลักสูตรการพัฒนาส่วนหน้าของ Team Treehouse

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

ลิงค์สดสำหรับโครงการนี้สามารถพบได้ที่นี่

ภาพหน้าจอ

คำแนะนำ

1. สร้างเค้าโครงโดยใช้ การออกแบบ Mobile First First :

• ตรวจสอบให้แน่ใจว่าไฟล์ HTML มีแท็ก Viewport Meta ในหัวของเอกสารดูการกำหนดค่า Viewport เพื่อทำความเข้าใจว่าทำไมและวิธีเพิ่มแท็กนี้
• ดูที่ mockup ที่ให้มา (mobile-form.png) และเพิ่มเนื้อหาเดียวกันในไฟล์ index.html ของคุณ

2. สร้างโครงสร้างฟอร์ม: ใช้แท็ก <form> เพียงหนึ่งแท็ก แท็ก <form> ควรมีองค์ประกอบแบบฟอร์มทั้งหมด เพิ่ม fieldset และ legend สำหรับแต่ละส่วนต่อไปนี้:

• ส่วน "ข้อมูลติดต่อ" ของหน้าและ
• ส่วน "จดหมายข่าว" ของหน้า

3. ตรวจสอบให้แน่ใจว่าคุณรวมประเภทฟิลด์แบบฟอร์มต่อไปนี้:

• อินพุตข้อความ
• อินพุตอีเมล
• อินพุตโทรศัพท์
• เลือกเมนู
• ช่องทำเครื่องหมาย
• ปุ่มตัวเลือก
• textarea
• ปุ่มส่ง

4. ฟิลด์ฟอร์มควรมีแอตทริบิวต์ต่อไปนี้:

• input : ควรรวม id , type และแอตทริบิวต์ name
• select และ textarea : ควรมี id และ name

5. เพิ่มป้ายกำกับในแต่ละองค์ประกอบของฟอร์มโดยใช้แท็ก HTML <label> ข้อความภายในฉลากควรตรงกับชื่อของฟิลด์ฟอร์มในการจำลอง

• ตรวจสอบให้แน่ใจว่าคุณจับคู่องค์ประกอบ <label> แต่ละรายการอย่างถูกต้องกับการควบคุมแบบฟอร์มที่สอดคล้องกันผ่านแอตทริบิวต์ for ดูลิงค์ด้านบนสำหรับตัวอย่าง และอย่าลืมเกี่ยวกับองค์ประกอบ Textarea ที่ต้องการฉลากการทำงานด้วย

6. ใช้แอตทริบิวต์ placeholder ของฟิลด์อินพุตเพื่อเพิ่มข้อความ "ต้องการ" เป็น:

• ฟิลด์ชื่อเต็ม
• ฟิลด์ที่อยู่อีเมล

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

• จับคู่การออกแบบตามที่ควรดูบนแท็บเล็ตหรือเดสก์ท็อปที่มีความกว้าง 768px โดยใช้เดสก์ท็อปฟอร์แมต
• ใช้วิธีการมือถือเป็นครั้งแรกโดยการเขียนแบบสอบถามสื่อของคุณโดยใช้คุณสมบัติ min-width ใน CSS ของคุณ

8. เมื่อจุดพักทั้งหมดของคุณอยู่ในสถานที่ให้ตรวจสอบเค้าโครงของคุณให้ตรงกับทั้งคู่จำลอง

• ตรวจสอบว่าตำแหน่งข้อความฉลากตรงกับทั้งสอง mockups:
  • มือถือ : ข้อความควรอยู่เหนือฟิลด์ฟอร์ม
  • เดสก์ท็อป : ข้อความควรอยู่ทางด้านซ้ายของฟิลด์ฟอร์ม

9. ใช้ Google Font สำหรับข้อความ

10. เพิ่ม :focus สถานะไปยังแบบฟอร์มสำหรับเมื่อผู้ใช้คลิกหรือแท็บลงในฟิลด์ข้อความ

11. ตรวจสอบให้แน่ใจว่าตรวจสอบรหัสของคุณใช้ได้โดยการเรียกใช้ผ่านตัวตรวจสอบ HTML และ CSS

• ลิงก์ไปยังผู้ตรวจสอบสามารถพบได้ในแหล่งข้อมูลโครงการ สิ่งนี้จะช่วยให้คุณพบข้อผิดพลาดใด ๆ ที่อาจอยู่ในรหัสของคุณ
• มีข้อยกเว้นบางประการที่คุณไม่จำเป็นต้องแก้ไข:
  • ไม่ต้องกังวลเกี่ยวกับคำเตือนใด ๆ เราแค่ต้องการให้คุณตรวจสอบข้อผิดพลาดใด ๆ ที่อาจมี
  • หาก CSS Validator Flag ใช้ CALL คำนำหน้าผู้ขายหรือ pseudo-etement/pseudo-classes ข้อผิดพลาดเหล่านี้ควรถูกละเว้น
  • หาก HTML Validator Flags ใช้ PIPE ('|') ในลิงก์/URL ของ Google FONT LINKS/URL ข้อผิดพลาดนี้สามารถละเว้นได้