วิธีสร้างฟอร์ม HTML แบบ Visual ด้วย Form Builder ออนไลน์ฟรี

เว็บไซต์เกือบทุกแห่งสักวันต้องมี form สักแบบ ไม่ว่าจะเป็นช่องทางติดต่อ แบบฟอร์มสมัครรับข่าวสาร แบบสอบถาม หรือฟอร์มขอใบเสนอราคา แต่การเขียนฟอร์มด้วยมือนั้นยุ่งยากกว่าที่คิด ทั้งต้องผูก label เข้ากับ input เลือก input type ให้ถูกต้อง และใส่ validation โดยไม่ทำให้ส่วนอื่นพัง ตัว HTML Form Builder บน Online Tools Forge ช่วยตัดปัญหาเหล่านี้ออกไป ด้วยการให้คุณประกอบฟอร์มที่สมบูรณ์แบบทั้ง visual แล้ว copy HTML ที่ได้ไปวางในโปรเจกต์ได้ทันที

หลักการทำงานง่ายมาก คุณเลือก field จาก palette ที่มีทั้ง text, email, number, textarea, select, checkbox และ radio จากนั้นตั้ง label และ validation attributes ที่ต้องการให้แต่ละ field ลากสลับลำดับให้อ่านง่าย แล้ว copy markup ที่ได้ไปวางตามจุดที่ต้องการ ทั้งหมดทำงานในเบราว์เซอร์ ไม่มีการอัปโหลดข้อมูลออกไป และไม่ต้องติดตั้งโปรแกรมใด ๆ เลย

บทความนี้จะพาไปดูวิธีใช้งานเครื่องมือ validation attributes แบบ native ที่แทบทุกฟอร์มควรมีติดไว้ และตัวอย่างการใช้งานจริงที่ช่วยประหยัดเวลาได้มากที่สุด ตั้งแต่หน้า contact ของเว็บ static ไปจนถึงเครื่องมือภายในทีมและการสอน HTML ในห้องเรียน

ทำไมต้องใช้ HTML Form Builder?

• Validation แบบ native โดยไม่ต้องพึ่ง JavaScript. field ที่ได้มาจะมี attribute มาตรฐานอย่าง required, pattern และ min/max ทำให้เบราว์เซอร์ตรวจค่าที่กรอกก่อนส่งฟอร์มเสมอ ไม่ต้องโหลด library ใด ๆ และไม่มีอะไรพังแม้ JavaScript ใช้งานไม่ได้
• สร้างแบบ visual เร็วกว่าเขียนโค้ดเอง. การเห็นฟอร์มค่อย ๆ รูปร่างขึ้นทีละ field เร็วกว่าการเขียน markup แล้วรีเฟรชมาเช็คทีละรอบ และช่วยตัดปัญหาพิมพ์ tag ผิดหรือลืมปิด tag ออกไปโดยสิ้นเชิง
• มี field type ครบตามที่เว็บทั่วไปต้องใช้. ครบทั้ง 7 แบบ ครอบคลุมเกือบทุกงานที่เว็บต้องการ และแต่ละแบบให้ keyboard, widget และพฤติกรรม validation ที่ถูกต้องมาตั้งแต่ต้น
• ได้ HTML สะอาด copy วางได้ทันที. ผลลัพธ์เป็น HTML ธรรมดาที่อ่านง่าย วางลงหน้าเว็บหรือ CMS ไหนก็ได้ ตกแต่งต่อด้วย CSS ของคุณเอง และแก้ไขภายหลังได้อิสระ ไม่ติดกับดักผู้ให้บริการรายใด
• ลากสลับลำดับ field ได้ตามใจ. ลำดับคำถามมีผลต่ออัตราการกรอกจนจบจริง ๆ การลาก field ขึ้นลงให้ flow ลื่นไหล ไวกว่าการตัดแปะ markup เป็นช่วง ๆ เสมอ
• ไม่ต้องติดตั้งอะไร ทำงานในเบราว์เซอร์. ไม่ต้องสมัครสมาชิก ไม่ต้อง build อะไร เปิดเครื่องมือ สร้างฟอร์ม copy โค้ด แล้วนำไปใช้งานได้ทันที แม้บนเครื่องที่ไม่ใช่ของตัวเอง

ฟีเจอร์หลักของตัวสร้างฟอร์ม

จุดที่น่าสังเกตเพิ่มเติมมีดังนี้

• ทุก field ที่ได้ออกมาจะถูกผูกกับ label อย่างถูกต้องผ่าน attribute for และ id ที่ตรงกัน ซึ่งเป็นพื้นฐานสำคัญของฟอร์มที่เข้าถึงได้ (accessible)
• ผลลัพธ์เป็น framework-agnostic ใช้ได้ทั้งในหน้า HTML ธรรมดา ไฟล์ template, block ของ CMS หรือวางต่อใน component ได้ทันที
• เนื่องจาก validation อยู่ในรูป attribute ไม่ใช่สคริปต์ ฟอร์มจึงยังทำงานปกติแม้ JavaScript ล้มเหลว ถูกบล็อก หรือยังโหลดไม่เสร็จ

วิธีใช้งาน HTML Form Builder

1. เพิ่ม field ที่ต้องการ เริ่มจากเพิ่ม field ให้ครบทุกข้อมูลที่ต้องการเก็บ สำหรับ contact form พื้นฐานมักหมายถึง text field สำหรับชื่อ email field และ textarea สำหรับข้อความ
2. ตั้ง label และ validation attributes ตั้ง label ให้แต่ละ field ชัดเจนเข้าใจง่าย กำหนด field ที่จำเป็นต้องกรอกเป็น required และเพิ่มกฎอย่างช่วงตัวเลขหรือ pattern ตรงจุดที่มีประโยชน์
3. สลับลำดับ field ลาก field ขึ้นลงให้ฟอร์มอ่านเป็นธรรมชาติ คำถามง่ายมาก่อน ส่วนที่ไม่บังคับวางไว้ท้าย ๆ ของฟอร์ม
4. พรีวิวฟอร์ม ตรวจดูผลลัพธ์ที่เรนเดอร์แล้วว่าทุก field มี label, เครื่องหมาย required อยู่บน field ที่ถูกต้อง และไม่มีอะไรสำคัญตกหล่น
5. Copy HTML copy markup ที่ได้ไปวางในหน้าเว็บ เชื่อมกับ backend หรือ form service แล้วใส่สไตล์ของเว็บคุณต่อได้เลย

Validation Attributes แบบ Native ที่ควรใช้

จุดแข็งที่ซ่อนอยู่ของเครื่องมือนี้คือฟอร์มที่ได้อาศัย validation ที่เบราว์เซอร์เข้าใจอยู่แล้ว โดยไม่ต้องเขียนสคริปต์เอง attribute เหล่านี้ควรมีติดฟอร์มไว้เกือบทุกครั้ง

• required ระบุว่า field นี้ต้องกรอก ถ้าผู้ใช้กดส่งทั้งที่ยังว่างอยู่ เบราว์เซอร์จะบล็อกการส่งและชี้มาที่ field นั้นทันทีโดยไม่เกี่ยวกับสคริปต์เลย
• type="email" ไม่ได้แค่ระบุชนิดของ field แต่เบราว์เซอร์จะตรวจว่าค่าที่กรอกหน้าตาเป็นอีเมลจริง และ keyboard บนมือถือจะปรับให้พิมพ์อีเมลสะดวกขึ้นเอง
• type="number" คู่กับ min และ max จำกัดค่าตัวเลขให้อยู่ในช่วงที่สมเหตุสมผล เหมาะกับจำนวนสินค้า อายุ หรือคะแนน ก่อนข้อมูลจะถึงเซิร์ฟเวอร์เสียที
• pattern รับ regular expression ที่ค่าที่กรอกต้องตรง เหมาะกับรูปแบบพิเศษที่ type พื้นฐานคลุมไม่ถึง เช่น รหัสตามรูปแบบเฉพาะหรือหมายเลขโทรศัพท์

ทำไม validation แบบ native จึงดีกว่าการเช็คด้วย JavaScript เพียงอย่างเดียว เหตุผลแรกคือมันทำงานก่อนสคริปต์ใด ๆ จะรัน ผู้ใช้จึงเห็น feedback ได้แม้เน็ตช้า เหตุผลที่สองคือมันเป็น declarative กฎอยู่ข้าง field ที่มันปกป้อง ทำให้อ่านและตรวจสอบง่าย และเหตุผลที่สามคือ degrade อย่างสวยงาม ถ้าเบราว์เซอร์เก่ามองข้าม attribute ไป ฟอร์มก็ยังส่งได้ตามปกติ ขณะที่สคริปต์พังอาจบล็อกการส่งทั้งหมด อย่างไรก็ตาม validation แบบ native คือด่านแรก ไม่ใช่ตัวแทนการตรวจฝั่งเซิร์ฟเวอร์ ทั้งสองอย่างควรใช้คู่กันเสมอ

เรื่อง label และ accessibility สำคัญไม่แพ้กัน label ทุกอันที่มองเห็นควรผูกกับ input ของมันผ่าน attribute for และ id ที่ตรงกัน เพื่อให้ screen reader อ่านชื่อ field ได้ถูกต้อง และเมื่อคลิกที่ label จะโฟกัสไปที่ input นั้นด้วย ฟอร์มที่ทำตรงนี้ถูกต้องจะใช้งานได้กับคนหมู่มากกว่าฟอร์มที่พึ่ง placeholder อย่างเดียวเสมอ

สุดท้ายคือตัว form element เอง ตั้งชื่อให้สื่อความหมาย และตั้ง action attribute ชี้ไปยัง URL ที่รับข้อมูล ไม่ว่าจะเป็น endpoint ของคุณเองหรือ form service ส่วน method มักใช้ post สำหรับงานที่เปลี่ยนข้อมูล markup ของ field สะอาดอยู่แล้ว เส้นเดียวที่คุณต้องปรับเองคือ action

ตัวอย่างการใช้งานจริง

Contact Form สำหรับเว็บไซต์ Static

เว็บ static โฮสต์ถูกและเร็ว แต่ไม่มี logic ฝั่งเซิร์ฟเวอร์ให้ใช้ตั้งแต่แรก ฟอร์มที่ generate มาเข้ากับงานลักษณะนี้ได้พอดี วาง markup ลงหน้า contact ชี้ action ไปที่ form service แล้วผู้ใช้ก็ได้ validation feedback ครบถ้วนโดยไม่ต้องเขียน JavaScript สักบรรทัด

Survey Form และ Signup Form

checkbox group สำหรับคำถามว่า "รู้จักเราจากช่องทางไหน" radio button สำหรับคำถามที่เลือกได้ข้อเดียว select สำหรับประเทศ และ textarea สำหรับความคิดเห็น คือชิ้นส่วนที่ survey สั้น ๆ หรือฟอร์มสมัครรับข่าวสารต้องใช้พอดี ทำ required เฉพาะสิ่งที่จำเป็นจริง ฟอร์มก็ยังกรอกจบเร็วและคนกล้ากรอกมากขึ้น

Quick Form สำหรับเครื่องมือภายในทีม

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

ใช้สอนการทำฟอร์ม HTML ในห้องเรียน

เพราะเครื่องมือนี้แสดงความเชื่อมโยงระหว่างสิ่งที่สร้างแบบ visual กับ markup ที่ได้ออกมาอย่างชัดเจน มันจึงเป็นสื่อการสอนที่ดีมาก ลองให้นักเรียนเพิ่ม required field ส่อง attribute pattern แล้วดูว่า attribute ไหนทำให้เกิดพฤติกรรมแบบไหน ซึ่งจำได้นานกว่าการอ่านตาราง attribute เฉย ๆ อย่างเห็นได้ชัด

Best Practices สำหรับฟอร์มที่ดี

• ใส่ label ให้ทุก field. placeholder จะหายไปตอนพิมพ์และเทคโนโลยีช่วยเหลือมองข้ามได้ง่าย อย่าใช้เป็น label เดียวของ field เด็ดขาด
• เริ่มจาก validation แบบ native. ใช้ required, pattern และ min/max ใน markup ก่อนคิดถึงสคริปต์เขียนเอง และตรวจซ้ำฝั่งเซิร์ฟเวอร์เสมอ
• จำกัดจำนวน required field. ทุก field ที่บังคับแลกมาด้วยอัตราการกรอกจนจบที่ลดลง ถามเฉพาะสิ่งที่จำเป็นจริง ที่เหลือทำเป็น optional
• ทดสอบฟอร์มครบวงจร. ลองส่งแบบว่าง กรอกผิด กรอกถูก และยืนยันว่าข้อมูลถึง endpoint ที่ตั้งไว้ใน action จริง ๆ ทุกครั้ง
• เรียงลำดับ field อย่างมีเจตนา. คำถามง่ายมาก่อน จัดกลุ่ม field ที่เกี่ยวข้องกันไว้ด้วยกัน และวางปุ่ม submit ให้เห็นชัดท้ายฟอร์ม
• ตกแต่งเพิ่มโดยไม่ต้องเขียนใหม่. ถือว่า markup ที่ได้เป็นจุดตั้งต้น เพิ่ม class หรือ layout เพิ่มได้เลยโดยไม่กระทบ label และ validation attributes เดิม

พร้อมข้ามขั้นตอนเขียน boilerplate แล้วหรือยัง เปิด HTML Form Builder เพิ่ม field แรกของคุณสามอัน แล้ว copy ฟอร์มที่ validate ได้จริงไปวางในโปรเจกต์ภายในห้านาที

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• HTML Email Template Generator — สร้าง layout อีเมลแบบ visual เหมือนกัน แล้ว copy template HTML ไปใช้ได้เลย
• HTML Encoder — escape อักขระพิเศษอย่างปลอดภัยก่อนฝังเนื้อหาผู้ใช้หรือโค้ดลงในหน้าเว็บ
• Markdown to HTML Converter — แปลงเนื้อหาที่เขียนไว้เป็น HTML สะอาดเพื่อใช้คู่กับฟอร์มบนหน้าเว็บของคุณ

ขอให้สนุกกับการสร้างฟอร์มนะคะ

คำถามที่พบบ่อย

ถ: ต้องมีความรู้ HTML ก่อนใช้ตัวสร้างฟอร์มนี้ไหม? ตอบ: ไม่จำเป็น คุณประกอบฟอร์มแบบ visual ด้วยการเลือก field ตั้ง label และกำหนด required ส่วนตัวเครื่องมือเขียน markup ให้เอง ถ้ามีพื้นฐาน HTML บ้างจะช่วยตอนปรับแต่งโค้ดที่ copy มา แต่ไม่มีก็ยังได้ฟอร์มที่ใช้งานได้เหมือนกัน

ถ: ฟอร์มที่ได้ส่งข้อความเข้าอีเมลให้เลยไหม? ตอบ: ไม่ เครื่องมือผลิตเฉพาะ HTML ฝั่ง front-end ซึ่งเป็นเหตุผลที่ผลลัพธ์พกพาไปใช้ที่ไหนก็ได้ ถ้าต้องการรับข้อมูลจริง ให้ชี้ action ไปที่ endpoint ของคุณเองหรือเชื่อมต่อกับ form service

ถ: แก้ไขโค้ด HTML หลัง copy ไปแล้วได้ไหม? ตอบ: ได้ ผลลัพธ์เป็น HTML มาตรฐานที่ไม่มี dependency เปลี่ยนชื่อ field เพิ่ม class ของ CSS หรือแทรก markup เพิ่มได้เลยโดยไม่มีอะไรพัง

ถ: validation ทำงานบนเบราว์เซอร์มือถือไหม? ตอบ: ทำงานตามปกติ เบราว์เซอร์มือถือยุคใหม่รองรับ validation attributes แบบ native และ input type ที่ถูกต้องยังเรียก keyboard ที่เหมาะสมขึ้นมาให้ด้วย เช่น keyboard อีเมลสำหรับ email field