form builder
1.0.0
เครื่องมือสร้างแบบฟอร์มแบบไดนามิกที่ช่วยให้ผู้ใช้สามารถสร้างปรับแต่งและตรวจสอบรูปแบบได้อย่างราบรื่นภายในเว็บแอปพลิเคชัน สร้างขึ้นด้วย React, Next.js และเทคโนโลยีอื่น ๆ อีกมากมาย Form Builder เป็นอินเทอร์เฟซที่ใช้งานง่ายสำหรับนักพัฒนาและผู้ใช้
ตรวจสอบการสาธิตสดของตัวสร้างแบบฟอร์มที่นี่
ในการเริ่มต้นด้วยการสร้างแบบฟอร์มให้ทำตามขั้นตอนเหล่านี้:
โคลนที่เก็บ:
git clone https://github.com/hasanharman/form-builder.gitนำทางไปยังไดเรกทอรีโครงการ:
cd form-builderติดตั้งการพึ่งพาที่จำเป็น:
npm installในการเริ่มต้นเซิร์ฟเวอร์การพัฒนาให้เรียกใช้:
npm run dev เปิดเบราว์เซอร์ของคุณและนำทางไปที่ http://localhost:3000 เพื่อดูแอปพลิเคชันที่ดำเนินการ
Form Builder ประกอบด้วยส่วนประกอบที่นำกลับมาใช้ใหม่ได้หลายอย่าง:
Form Builder ใช้ ZOD สำหรับการตรวจสอบอินพุต คุณสามารถกำหนด schemas สำหรับแบบฟอร์มของคุณได้ดังนี้:
import { z } from 'zod' ;
const formSchema = z . object ( {
name : z . string ( ) . min ( 1 , "Name is required" ) ,
email : z . string ( ) . email ( "Invalid email address" ) ,
age : z . number ( ) . min ( 18 , "You must be at least 18 years old" ) ,
} ) ;สคีมานี้สามารถนำไปใช้กับแบบฟอร์มของคุณเพื่อบังคับใช้กฎการตรวจสอบความถูกต้อง
เมื่อแบบฟอร์มของคุณพร้อมคุณสามารถจัดการการส่งด้วยการโทร API อย่างง่าย นี่คือตัวอย่างของวิธีการส่งข้อมูลแบบฟอร์ม:
const handleSubmit = async ( data ) => {
try {
const response = await fetch ( '/api/form-submit' , {
method : 'POST' ,
body : JSON . stringify ( data ) ,
headers : {
'Content-Type' : 'application/json' ,
} ,
} ) ;
const result = await response . json ( ) ;
console . log ( 'Form submitted successfully:' , result ) ;
} catch ( error ) {
console . error ( 'Error submitting form:' , error ) ;
}
} ; ยินดีต้อนรับ! หากคุณต้องการมีส่วนร่วมในการสร้างแบบฟอร์มโปรดทำตามขั้นตอนเหล่านี้:
git checkout -b feature/YourFeatureNamegit commit -m " Add a feature "git push origin feature/YourFeatureNameโครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT
