ตัวสร้างฟอร์ม
สร้างฟอร์ม HTML แบบภาพ: ฟิลด์ text, email, select, checkbox, radio พร้อม native validation attributes จัดลำดับด้วย drag-and-drop คัดลอกได้ทันที
Loading tool...
ตัวสร้างฟอร์ม คืออะไร?
Form Builder เปลี่ยนการ์ดฟิลด์แบบภาพให้เป็นฟอร์ม HTML ที่สะอาดและ semantic: ฟิลด์ 7 ประเภทพร้อม label, name, placeholder และ options, native validation attributes อย่าง required และ type=email, จัดลำดับด้วย drag-and-drop และคัดลอก markup ที่ไม่พึ่ง dependency คลิกเดียวสำหรับหน้า static ใดก็ได้
ประโยชน์หลัก
- ได้ฟอร์มพร้อมใช้งานโดยไม่ต้องมี framework หรือ build step
- native validation ทำให้พฤติกรรมสม่ำเสมอทุกเบราว์เซอร์
- markup ที่ accessible ด้วย label และ fieldset ที่ถูกต้องตั้งแต่ต้น
- จัดลำดับด้วยการลากทำให้แก้โครงสร้างได้ทันที
- ไม่มี dependency - ผลลัพธ์ใช้ได้ทุกที่ที่ใช้ HTML ได้
กรณีการใช้งาน
- •เพิ่ม contact form ให้ static site หรือ landing page
- •สร้างฟอร์มสำรวจและ feedback สำหรับ internal tool ใช้เร็ว ๆ
- •prototype ฟอร์ม UI ก่อนต่อกับ backend จริง
- •สร้าง embed form ที่สม่ำเสมอกันข้ามหลายหน้า
วิธีสร้างฟอร์ม HTML
- เพิ่มฟิลด์: กดประเภทฟิลด์ที่ต้องการ - text, email, select, checkbox - แล้วใส่ป้ายกำกับของแต่ละฟิลด์
- จัดลำดับและตั้ง validation: ลากฟิลด์ให้เข้าที่หรือใช้ปุ่มลูกศร ตั้ง placeholder, ตัวเลือก และฟิลด์ที่จำเป็น
- คัดลอก HTML: คัดลอก markup ฟอร์มที่สร้างได้แล้ววางลงหน้าใดก็ได้ - native validation จัดการที่เหลือ
คุณสมบัติหลัก
- ฟิลด์ 7 ประเภท: text, email, number, textarea, select, checkbox, radio
- native validation attributes - required, type=email - ไม่ต้องใช้ JavaScript
- จัดลำดับด้วย drag-and-drop และปุ่มลูกศรควบคุมละเอียด
- แก้ตัวเลือก select, checkbox, radio ได้ บรรทัดละหนึ่ง
- ชื่อฟิลด์ derive จากป้ายกำกับอัตโนมัติแต่แก้ได้
- HTML ที่ escape แล้วไม่พึ่ง dependency คัดลอกคลิกเดียว
คำถามที่พบบ่อย
ฟอร์มที่สร้างได้ต้องใช้ JavaScript หรือไม่?
ไม่ต้อง validation ใช้ native HTML attributes อย่าง required และ type=email ที่เบราว์เซอร์บังคับเอง ใส่สคริปต์เพิ่มเฉพาะเมื่อต้องการพฤติกรรมพิเศษ
รับข้อมูลที่ส่งจากฟอร์มอย่างไร?
ชี้ action attribute ของฟอร์มไปที่ backend endpoint หรือบริการรับฟอร์ม markup ที่ได้เป็น HTML มาตรฐาน handler ที่อ่าน POST fields ใช้ได้หมด
จัดลำดับฟิลด์หลังเพิ่มแล้วได้หรือไม่?
ได้ - ลากการ์ดฟิลด์ไปตำแหน่งใหม่หรือใช้ปุ่มลูกศรขึ้นลงเพื่อความแม่นยำ
กำหนดตัวเลือก checkbox และ radio อย่างไร?
พิมพ์ตัวเลือกบรรทัดละหนึ่งในกล่อง options แต่ละบรรทัดจะกลายเป็น checkbox หรือ radio ที่มีข้อความเป็น label และ value