Code for Dek-d Customization

ลำดับตอนที่ #6 : [code] Request Form - แบบฟอร์ม (under revision)

พอดีแอบแว่บไปดูนิยาย/บทความของแฟนคลับมา แล้วไปเจอกลับหน้าที่เป็นการส่งแบบฟอร์มขอการวิจารณ์นิยาย/บทความ ก็เลยลองเอามาทำเป็นแบบฟอร์มจริงๆ ดู ได้เป็นแบบนี้

ตัวอย่างด้านล่างนี้ไม่สามารถทำงานได้อย่างถูกต้อง แปะไว้ให้เห็นภาพเฉยๆ น่ะ

สำหรับตัวอย่างที่ทำงานได้ ท่านสามารถเข้าไปดูได้ที่นี่

See the Pen Dek-D Request Form by Krerkkiat Chusap (@krerkkiat) on CodePen.

ซึ่งเมื่อผู้ใช้กรอกเสร็จ แล้วกด Submit Request

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

อย่างไรก็ตามตัวโค้ดแบบฟอร์มยังคงมีผลกระทบต่อการตบแต่งอยู่บ้าง

จริงๆ การใส่โค้ดแบบกล่องข้อความเข้าไปนั่นก็ไม่ได้ยากอะไร สามารถเข้าไปดู syntax ได้ที่ HTML <input> Tag ซึ่งเป็นเว็บเพจของ W3Schools ที่อธิบายถึงวิธีการใช้งาน tag input ซึ่งถ้าเราใส่โค้ดนั้นแบบปกติ ก็จะได้ผลลัพธ์ประมาณนี้

แต่ก็อย่างที่เห็น การตบแต่งของตัวกล่องข้อความที่ได้นั้นไม่สวยงามสักเท่าไร ซึ่งจริงๆ เราก็สามารถตบแต่งเพิ่มได้ด้วยโค้ดประเภท CSS แต่ด้วยความขี้เกียจของเราอีกเช่นเคย เราจึงใช้งาน framework ที่ชื่อว่า Bootstrap ซึ่งถ้าเข้าไปดูก็จะพบว่าเขาแต่งไว้ให้สวยงามแล้วเรียบร้อย

ข้อดี

1. ดูเป็นแบบฟอร์มจริงๆ มากขึ้น

สำหรับข้อเสียคือ

1. ผู้ใช้จะสูญเสียการตอบกลับในแบบที่เป็นของตัวเอง เนื่องจากข้อความจะซ้ำไปซ้ำมา และขาดเอกลักษณ์
2. มีผลกระทบต่อการตบแต่งของบทความ

Note: this might help select just CSS rules that I need https://github.com/purifycss/purifycss/blob/master/README.md