사용 안내서 취소

Dreamweaver를 사용하여 양식 개발

검색

마지막 업데이트 날짜 2022년 11월 28일

아래의 절차에 따라 페이지에 양식 요소를 삽입함으로써 Dreamweaver에서 웹 양식을 시각적으로 제작하는 방법에 대해 살펴보십시오.

페이지에 양식 요소를 삽입함으로써 Dreamweaver에서 웹 양식을 시각적으로 제작할 수 있지만, 이는 단지 작업의 일부일 뿐입니다. 이보다 더 복잡한 부분은 방문자들이 해당 양식을 사용하여 제출하는 데이터를 처리하기 위한 메커니즘을 개발하는 것입니다. 때때로 이러한 데이터는 예를 들어 고객 데이터베이스에 저장됩니다. 일반적으로 양식 데이터는 PHP나 Adobe ColdFusion과 같은 웹 애플리케이션 기술로 처리합니다.

이 문서에서는 간단한 웹 양식을 만드는 방법에 대해 설명합니다. 제출한 양식 데이터를 처리하는 메커니즘 개발과 관련된 내용은 이 문서에서 다루지 않습니다. PHP를 사용한 양식 빌드 및 제출 데이터 처리 메커니즘에 대한 자세한 내용은 Adobe 개발자 센터에서 제공하는 튜토리얼 시리즈를 참조하십시오.

웹 양식 제작

Dreamweaver의 디자인 뷰 모드에서 페이지를 열고 양식을 표시할 위치에 삽입점을 놓습니다.
[삽입] > [양식] > [양식]을 선택합니다. 또는 삽입 패널의 양식 범주(패널의 탭 아래에 있는 작은 삼각형)를 선택하고 양식 아이콘을 클릭합니다. Dreamweaver가 빈 양식을 삽입합니다. 디자인 뷰에서 빨간색 점선 테두리는 양식을 나타냅니다. 이 표시가 보이지 않는 경우에는 [보기] > [시각 도구] > [보이지 않는 요소]를 선택하십시오.
양식 데이터를 처리하는 페이지 또는 스크립트를 지정합니다. 문서 창에서 양식 테두리를 클릭하여 해당 양식을 선택합니다. 속성 관리자(윈도우 > 속성)의 액션 텍스트 상자에 처리 페이지의 파일 이름과 필요한 경우 경로를 입력합니다. 또는 폴더 아이콘을 클릭하여 적절한 페이지나 스크립트를 탐색합니다. 예: process_order.php.
양식 데이터를 서버로 전송하는 데 사용할 방식을 지정합니다. 속성 관리자의 메서드 팝업 메뉴에서 다음 옵션 중 하나를 선택합니다.
- POST는 HTTP 요청에 양식 데이터를 임베드합니다. 자세한 내용은 Dreamweaver 도움말의 HTML 양식 매개 변수를 참조하십시오.
- GET은 페이지를 요청하는 URL에 값을 첨부합니다. 자세한 내용은 Dreamweaver 도움말의 URL 매개 변수를 참조하십시오.
- Default는 브라우저의 기본 설정을 사용하여 양식 데이터를 서버로 전송합니다. 일반적으로 사용하는 기본값은 GET 메서드입니다.
양식 오브젝트를 삽입합니다. 해당 양식에서 양식 오브젝트를 표시할 위치에 삽입 포인터를 놓습니다. 그런 다음 [삽입] > [양식] 메뉴 또는 삽입 막대의 양식 범주에서 오브젝트를 선택합니다. 페이지에서 양식의 빨간색 점선 테두리 안쪽에 양식 오브젝트를 배치합니다. 양식 오브젝트에 대한 자세한 내용은 Dreamweaver 도움말의 양식 오브젝트를 참조하십시오.
양식의 레이아웃을 조정합니다. 행 분리, 단락 분리, 서식 유지 텍스트, 표 등을 사용하여 양식의 서식을 지정할 수 있습니다. 양식에 또 다른 양식을 삽입할 수는 없지만 한 페이지에 여러 개의 양식을 포함시킬 수는 있습니다. 양식을 디자인할 때 양식 오브젝트에 설명을 포함한 라벨을 붙여 사용자가 해당 양식이 어떤 목적으로 사용되는지 쉽게 알 수 있도록 하십시오. 예를 들어 이름 정보를 요청하기 위해 “이름 입력”이라는 설명을 달 수 있습니다. 표를 사용하여 양식 오브젝트 및 라벨용 구조를 제공할 수 있습니다. 이 경우 모든 table 태그는 form 태그 사이에 포함시켜야 합니다.