ปุ่ม HTML ที่ซ่อนอยู่

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

อินพุต HTML

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

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

ทัศนวิสัย CSS

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

input.hide {การมองเห็น: ซ่อนอยู่; }

สิ่งนี้จะใช้ได้กับปุ่มต่อไปนี้:

ฟังก์ชั่น JavaScript

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

การพิจารณา

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