วิธีการเพิ่มฟอร์มด้วย KompoZer

01 จาก 06

เพิ่มแบบฟอร์มด้วย KompoZer

เพิ่มแบบฟอร์มด้วย KompoZer ภาพหน้าจอมารยาท Jon Morin

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

02 จาก 06

สร้างฟอร์มใหม่ด้วย KompoZer

สร้างฟอร์มใหม่ด้วย KompoZer ภาพหน้าจอมารยาท Jon Morin

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

  1. วางเคอร์เซอร์ไว้ในตำแหน่งที่คุณต้องการให้รูปแบบของคุณปรากฏบนหน้า
  2. คลิกที่ปุ่มแบบฟอร์มบนแถบเครื่องมือ กล่องโต้ตอบคุณสมบัติของฟอร์มจะเปิดขึ้น
  3. เพิ่มชื่อสำหรับแบบฟอร์ม ชื่อนี้ใช้ในโค้ด HTML ที่สร้างขึ้นโดยอัตโนมัติเพื่อระบุฟอร์มและจำเป็นต้องใช้ คุณยังต้องบันทึกหน้าเว็บของคุณก่อนจึงจะสามารถเพิ่มแบบฟอร์มได้ หากคุณกำลังทำงานกับเพจใหม่ที่ไม่ได้บันทึกไว้ KompoZer จะแจ้งให้คุณบันทึก
  4. เพิ่ม URL ลงในสคริปต์ที่จะประมวลผลข้อมูลฟอร์มในฟิลด์ URL การทำงาน ตัวจัดการฟอร์มมักเป็นสคริปต์ที่เขียนด้วยภาษา PHP หรือภาษาฝั่งเซิร์ฟเวอร์ที่คล้ายกัน หากไม่มีข้อมูลนี้หน้าเว็บของคุณจะไม่สามารถดำเนินการใด ๆ กับข้อมูลที่ป้อนโดยผู้ใช้ KompoZer จะแจ้งให้คุณป้อน URL สำหรับตัวจัดการฟอร์มหากคุณไม่ได้ป้อน URL
  5. เลือกวิธีที่ใช้ในการส่งข้อมูลฟอร์มไปยังเซิร์ฟเวอร์ ทั้งสองตัวเลือกคือ GET และ POST คุณจำเป็นต้องรู้วิธีการที่สคริปต์ต้องการ
  6. คลิกตกลงและฟอร์มถูกเพิ่มลงในเพจของคุณ

03 จาก 06

เพิ่มช่องข้อความลงในฟอร์มด้วย KompoZer

เพิ่มช่องข้อความลงในฟอร์มด้วย KompoZer ภาพหน้าจอมารยาท Jon Morin

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

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

04 จาก 06

เพิ่มพื้นที่ข้อความในแบบฟอร์มด้วย KompoZer

เพิ่มพื้นที่ข้อความในแบบฟอร์มด้วย KompoZer ภาพหน้าจอมารยาท Jon Morin

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

  1. วางเคอร์เซอร์ไว้ในร่างโครงร่างที่คุณต้องการให้พื้นที่ข้อความของคุณเป็น ถ้าคุณต้องการพิมพ์ป้ายชื่อมักเป็นความคิดที่ดีที่จะพิมพ์ข้อความฉลากให้กด Enter เพื่อย้ายไปยังบรรทัดใหม่จากนั้นเพิ่มฟิลด์ของฟอร์มเพราะขนาดของพื้นที่ข้อความบนหน้าทำให้ไม่สะดวกสำหรับ ป้ายกำกับจะอยู่ทางซ้ายหรือขวา
  2. คลิกลูกศรลงที่อยู่ติดกับปุ่มฟอร์มบนแถบเครื่องมือและเลือก Text Area จากเมนูแบบเลื่อนลง หน้าต่าง Text Area Properties จะเปิดขึ้น
  3. ป้อนชื่อสำหรับฟิลด์พื้นที่ข้อความ ชื่อระบุฟิลด์ในโค้ด HTML และใช้สคริปต์การจัดการฟอร์มเพื่อประมวลผลข้อมูลที่ผู้ใช้ส่งมา
  4. ป้อนจำนวนแถวและคอลัมน์ที่คุณต้องการให้พื้นที่ข้อความแสดง มิติข้อมูลเหล่านี้จะกำหนดขนาดของฟิลด์ในหน้าและสามารถป้อนข้อความลงในฟิลด์ได้ก่อนที่การเลื่อนจะต้องเกิดขึ้น
  5. คุณสามารถระบุตัวเลือกขั้นสูงเพิ่มเติมกับตัวควบคุมอื่น ๆ ในหน้าต่างนี้ได้ แต่ตอนนี้ชื่อฟิลด์และมิติข้อมูลเพียงพอแล้ว
  6. คลิกตกลงและพื้นที่ข้อความปรากฏในแบบฟอร์ม

05 จาก 06

เพิ่มปุ่มส่งและตั้งค่าใหม่ในแบบฟอร์มด้วย KompoZer

เพิ่มปุ่มส่งและตั้งค่าใหม่ในแบบฟอร์มด้วย KompoZer ภาพหน้าจอมารยาท Jon Morin

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

  1. วางเคอร์เซอร์ไว้ในพื้นที่แบบฟอร์มที่ระบุซึ่งคุณต้องการให้ปุ่มส่งหรือรีเซ็ตเป็น ส่วนใหญ่เหล่านี้จะอยู่ด้านล่างฟิลด์ที่เหลือในแบบฟอร์ม
  2. คลิกลูกศรลงที่อยู่ติดกับปุ่มฟอร์มบนแถบเครื่องมือและเลือกกำหนดปุ่มจากเมนูแบบเลื่อนลง หน้าต่างคุณสมบัติปุ่มจะปรากฏขึ้น
  3. เลือกประเภทของปุ่มจากเมนูแบบเลื่อนลงที่มีข้อความกำกับว่า Type ตัวเลือกของคุณคือ Submit, Reset และ Button ในกรณีนี้เราจะเลือกประเภทการส่ง
  4. ระบุชื่อให้กับปุ่มซึ่งจะใช้ใน HTML และโค้ดการจัดการฟอร์มเพื่อประมวลผลคำขอแบบฟอร์ม นักพัฒนาเว็บมักจะตั้งชื่อฟิลด์นี้ว่า "submit"
  5. ในช่องชื่อค่าให้ป้อนข้อความที่ควรปรากฏบนปุ่ม ข้อความควรสั้น แต่อธิบายถึงสิ่งที่จะเกิดขึ้นเมื่อกดปุ่ม ตัวอย่างเช่น "ส่ง" "ส่งฟอร์ม" หรือ "ส่ง" เป็นตัวอย่างที่ดี
  6. คลิกตกลงและปุ่มปรากฏบนแบบฟอร์ม

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

06 จาก 06

การแก้ไขฟอร์มด้วย KompoZer

การแก้ไขฟอร์มด้วย KompoZer ภาพหน้าจอมารยาท Jon Morin

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