관리 메뉴

웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 드래그 앤 드랍으로 폼 생성하기 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] 드래그 앤 드랍으로 폼 생성하기

해피CGI윤실장 2025. 9. 3. 09:12

textarea Form Builder는 사용자가 드래그 앤 드롭 방식으로 빠르게 웹 양식을 만들 수 있도록 하는 온라인 양식 빌더로 전환해주는 jQuery 플러그인입니다. 또한 지정한 폼 템플릿에서 폼을 렌더링할 수 있는 formRender 구성 요소를 제공합니다.





# 사용방법


1. 프로젝트에 jQuery 라이브러리와 jQuery 폼 빌더의 스타일 및 Script 를 로드 합니다. 

<script src="./dist/form-builder.min.js"></script>
<script src="./dist/form-render.min.js"></script>


2. 드래그 앤 드랍이 가능한 폼 구성요소를 만드는데 필요한 jQueryUI를 로드합니다. 


3. 폼 빌더에 대한 표준 HTML 을 만듭니다. 

<textarea name="formBuilder" id="formBuilder"></textarea>




4. 플러그인을 호출하여 기본 빌더를 생성 합니다. 

<script>$('#formBuilder').formBuilder();</script>




# 주의사항

웹페이지가 자동으로 만들어 지는게 아닙니다. 
웹 페이지에서 사용할 폼 종류, 옵션 값, 위치 등의 JSON 데이터를 사용자로 부터 제공 받을 수 있도록 하는 기능입니다. 
결국 개발자가 JSON 데이터를 이용하여 폼을 생성하는 작업을 해야 합니다. 

 

Comments