วิธีสร้างแบบฟอร์มใน HTML

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

อย่างไรก็ตาม สิ่งหนึ่งที่รูปแบบที่เรียบง่ายถึงซับซ้อนเหล่านี้มีเหมือนกันคือ HTML และโดยเฉพาะอย่างยิ่ง HTML แท็ก

---

---

การใช้แท็กแบบฟอร์ม

NS tag เป็นองค์ประกอบ HTML ที่ใช้เป็นคอนเทนเนอร์เพื่อใส่องค์ประกอบอื่นๆ ที่ถือได้ว่าเป็นองค์ประกอบพื้นฐานสำหรับแบบฟอร์ม องค์ประกอบพื้นฐานเหล่านี้บางส่วน ได้แก่ แท็ก แท็กและ แท็ก

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

การใช้ตัวอย่างแท็ก







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

การใช้แท็ก

NS แท็กใช้เพื่ออธิบายข้อมูลในแต่ละช่องป้อนข้อมูลในแบบฟอร์ม แท็กนี้มี สำหรับ คุณลักษณะ ซึ่งใช้เพื่อปรับปรุงการทำงานของแบบฟอร์ม

ที่เกี่ยวข้อง: โปรแกรมแก้ไข HTML ออนไลน์ฟรีที่ดีที่สุดในการทดสอบโค้ดของคุณ

---

---

หาก id ที่กำหนดให้กับช่องใส่ที่ตรงกันตรงกับ สำหรับ ค่าใน จากนั้นฟิลด์อินพุตนั้นจะถูกเน้นโดยอัตโนมัติเมื่อคุณคลิกที่ป้ายกำกับ

การใช้ตัวอย่างแท็ก


First Name:


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

---

---

การใช้แท็ก

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

ที่เกี่ยวข้อง: วิธีสร้างแบบฟอร์มซ้อนใน CSS

มีค่าต่างๆ มากมายที่คุณสามารถกำหนดให้กับ พิมพ์ แอตทริบิวต์ แต่บางส่วนที่นิยมมากขึ้นมีดังนี้

• ข้อความ
• ตัวเลข
• อีเมล
• ภาพ
• วันที่
• ช่องทำเครื่องหมาย
• วิทยุ
• รหัสผ่าน

การใช้แท็ก ตัวอย่าง


First Name:



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

NS NS แอตทริบิวต์เป็นตัวระบุเฉพาะสำหรับกล่องข้อความ และเป็นสิ่งสำคัญเนื่องจากให้การเข้าถึงองค์ประกอบนี้จากไฟล์ CSS NS ชื่อ คุณลักษณะยังเป็นตัวระบุเฉพาะ อย่างไรก็ตาม ชื่อแอตทริบิวต์ใช้เพื่อโต้ตอบกับองค์ประกอบจากฝั่งเซิร์ฟเวอร์ของการพัฒนา

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

การใช้องค์ประกอบช่องทำเครื่องหมาย

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

การใช้ตัวอย่างช่องทำเครื่องหมาย


Programming Languages:
Java
JavaScript
Python


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

การใช้แท็กและองค์ประกอบวิทยุ

NS แท็กและองค์ประกอบวิทยุมีความคล้ายคลึงกันในแง่ที่อนุญาตให้ผู้ใช้เลือกค่าเดียวเท่านั้นในแต่ละครั้ง จึงกล่าวได้ว่ามีหน้าที่เหมือนกัน อย่างไรก็ตาม ลักษณะที่ปรากฏแตกต่างกันมาก

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

NS tag สร้างสิ่งที่เป็นกล่องแบบหล่นลง ซึ่งช่วยให้ผู้ใช้สามารถเลือกค่าเดียว

การใช้ตัวอย่างแท็กและองค์ประกอบวิทยุ


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer


การใช้องค์ประกอบวันที่

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

การใช้ตัวอย่างองค์ประกอบวันที่




การใช้องค์ประกอบอีเมลและรหัสผ่าน

เมื่อนักพัฒนากำหนดค่าอีเมลหรือรหัสผ่านให้กับแอตทริบิวต์ type ของ an แท็กแต่ละอันสร้างกล่องข้อความที่เหมือนกัน อย่างไรก็ตาม เมื่อคุณเริ่มใช้กล่องเหล่านี้ ความแตกต่างจะชัดเจน

องค์ประกอบอีเมลจะตรวจสอบข้อมูลที่ป้อนลงในกล่องข้อความ และทำให้แน่ใจว่าการส่งแต่ละครั้งตรงตามข้อกำหนดมาตรฐานของที่อยู่อีเมล ซึ่งหมายความว่ามีส่วนท้องถิ่น ตามด้วยสัญลักษณ์ @ และลงท้ายด้วยโดเมน

การใช้ตัวอย่างองค์ประกอบอีเมล




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

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

การใช้ตัวอย่างองค์ประกอบรหัสผ่าน




การใช้แท็กปุ่ม

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

ตัวอย่างปุ่มส่ง

Submit


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

ตัวอย่างปุ่มรีเซ็ต

Reset


การสร้างแบบฟอร์ม

ในการสร้างแบบฟอร์มอย่างง่ายใน HTML คุณจะต้องใส่องค์ประกอบทั้งหมดที่กล่าวถึงข้างต้นใน a แท็ก

การสร้างตัวอย่างแบบฟอร์ม






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset






รหัสด้านบนจะสร้างแบบฟอร์มต่อไปนี้:

ไม่สามารถติดตั้ง mac os x บนคอมพิวเตอร์เครื่องนี้ได้

ตอนนี้คุณสามารถสร้างแบบฟอร์มอย่างง่ายใน HTML

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

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

แบ่งปัน แบ่งปัน ทวีต อีเมล แผ่นโกงคุณสมบัติ CSS3 ที่จำเป็น

ฝึกฝนไวยากรณ์ CSS ที่จำเป็นด้วยชีตคุณสมบัติ CSS3 ของเรา

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• HTML
• การพัฒนาเว็บ
• บทเรียนการเข้ารหัส

เกี่ยวกับผู้เขียน คาเดชา คีน(21 บทความที่ตีพิมพ์)

Kadeisha Kean เป็นนักพัฒนาซอฟต์แวร์ฟูลสแตกและนักเขียนด้านเทคนิค/เทคโนโลยี เธอมีความสามารถที่ชัดเจนในการทำให้แนวคิดทางเทคโนโลยีที่ซับซ้อนที่สุดบางส่วนง่ายขึ้น การผลิตวัสดุที่สามารถเข้าใจได้ง่ายโดยสามเณรเทคโนโลยี เธอหลงใหลในการเขียน พัฒนาซอฟต์แวร์ที่น่าสนใจ และเดินทางไปทั่วโลก (ผ่านสารคดี)

เพิ่มเติมจาก Kadeisha Kean

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก