วิธีสร้างฟอร์ม HTML (อธิบายตัวอย่าง)

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

โครงสร้างของแบบฟอร์ม HTML

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

องค์ประกอบอินพุตไปที่นี่

องค์ประกอบอินพุต

ช่องข้อความ

ช่องข้อความถูกสร้างขึ้นโดยใช้แท็ก ด้วยคุณสมบัติ พิมพ์ วางบน ข้อความ. ตัวอย่างเช่น:

ชื่อ:




โทรศัพท์

องค์ประกอบ ใช้สำหรับช่องใส่หมายเลขโทรศัพท์

โทรศัพท์:


วันที่

องค์ประกอบ ใช้เพื่อเลือกวันที่

วันที่เกิด:


รหัสผ่าน

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

รหัสผ่าน:


คลังเก็บเอกสารสำคัญ

องค์ประกอบ ใช้เพื่ออนุญาตให้ผู้ใช้เลือกไฟล์จากระบบไฟล์ในเครื่อง

อัพโหลดไฟล์:


กล่องกาเครื่องหมาย

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

ฉันยอมรับข้อกำหนดและเงื่อนไขต่างๆ

วิทยุ

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

เพศ:

ผู้ชาย

ผู้หญิง

ตัวเลข

องค์ประกอบ ใช้สำหรับช่องใส่ตัวเลข

จำนวน:


พิสัย

องค์ประกอบ ใช้สำหรับฟิลด์อินพุตที่ต้องมีค่าจากช่วงของค่า

ปริมาณ:




ปุ่ม

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

ชื่อ:




การจัดการการป้อนข้อมูลในแบบฟอร์ม

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

รับวิธีการ

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

องค์ประกอบอินพุตไปที่นี่

วิธีโพสต์

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

องค์ประกอบอินพุตไปที่นี่

ในทั้งสองกรณี แอตทริบิวต์ การกระทำ ใช้เพื่อระบุ URL ของสคริปต์ฝั่งเซิร์ฟเวอร์ที่จะประมวลผลข้อมูลในฟอร์ม

ตัวอย่างรูปแบบ HTML ที่มีองค์ประกอบทั้งหมด 

นี่คือแบบฟอร์มที่ใช้องค์ประกอบทั้งหมดที่เราตรวจสอบในบทความนี้:

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

ชื่อ:



นามสกุล:



อีเมล:



โทรศัพท์:



วันที่เกิด:



รหัสผ่าน:



อัพโหลดไฟล์:



ฉันยอมรับข้อกำหนดและเงื่อนไขต่างๆ


เพศ:

ผู้ชาย

ผู้หญิง

จำนวน:



ปริมาณ:




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

ปุ่ม "ส่ง" ที่ส่วนท้ายคือปุ่มที่จะรับผิดชอบในการส่งแบบฟอร์มไปยัง URL ที่ระบุในแอตทริบิวต์ การกระทำ ของฉลาก รูปร่าง (ในกรณีนี้คือ "/submit_form") เพื่อให้แบบฟอร์มนี้ทำงานบนเว็บไซต์จริงได้ คุณจะต้องกำหนดค่าเซิร์ฟเวอร์เพื่อรับและประมวลผลข้อมูลจากแบบฟอร์มนี้ในเส้นทาง "/submit_form"