วิธีสร้างช่องแบบฟอร์ม

สารบัญ:

วิธีสร้างช่องแบบฟอร์ม
วิธีสร้างช่องแบบฟอร์ม

วีดีโอ: วิธีสร้างช่องแบบฟอร์ม

วีดีโอ: วิธีสร้างช่องแบบฟอร์ม
วีดีโอ: วิธีสร้าง Google Form เบื้องต้น (การทำแบบสอบถามออนไลน์) | 2021 2024, อาจ
Anonim

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

วิธีสร้างช่องแบบฟอร์ม
วิธีสร้างช่องแบบฟอร์ม

มันจำเป็น

ความรู้เบื้องต้นเกี่ยวกับ HTML

คำแนะนำ

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

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

ขั้นตอนที่ 3

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

ขั้นตอนที่ 4

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

ขั้นตอนที่ 5

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

ขั้นตอนที่ 6

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

ขั้นตอนที่ 7

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