참고:

Dreamweaver Creative Cloud 업데이트에서 HTML 양식 요소에 대한 지원이 개선되었습니다. 자세한 내용은 양식 요소를 위한 HTML5 지원 개선을 참조하십시오.

웹 양식 정보

방문자가 웹 브라우저에 표시되는 웹 양식에 정보를 입력하고 전송 버튼을 클릭하면 이 정보가 서버로 보내진 다음 서버 측 스크립트 또는 응용 프로그램을 통해 처리됩니다. 서버는 처리한 정보를 사용자(또는 클라이언트)에게 반환하거나 양식의 내용에 기반하여 액션을 수행함으로써 사용자의 동작에 응답합니다.

PHP, ASP, ColdFusion을 비롯한 대부분의 응용 프로그램 서버로 데이터를 전송하는 양식을 만들 수 있습니다. ColdFusion을 사용하는 경우 양식에 ColdFusion 전용 양식 컨트롤을 추가할 수도 있습니다.

참고:

이메일을 받는 사람에게 직접 양식 데이터를 보낼 수도 있습니다.

양식 오브젝트

Dreamweaver에서는 양식 입력 유형을 양식 오브젝트라고 합니다. 양식 오브젝트는 사용자가 데이터를 입력하게 할 수 있는 메커니즘입니다. 양식에 삽입할 수 있는 양식 오브젝트는 다음과 같습니다.

텍스트 필드

모든 유형의 영숫자 텍스트를 입력할 수 있습니다. 텍스트는 한 행 또는 여러 행으로 표시되거나, 다른 사람이 볼 수 없도록 정보가 별표나 불릿으로 입력되는 암호 필드로 표시될 수 있습니다.

양식 오브젝트

참고:

암호 필드를 사용하여 서버로 전달된 암호와 기타 정보는 암호화되지 않습니다. 이렇게 전송된 데이터를 외부에서 가로채 일반 영숫자 텍스트로 변환하여 읽을 수도 있습니다. 따라서 보안을 유지해야 하는 데이터에 대해서는 반드시 암호화 방법을 제공해야 합니다.

숨김 필드

사용자가 입력한 이름, 이메일 주소, 구매 선호도와 같은 정보를 저장해 두었다가 사용자가 다시 사이트를 방문할 때 이용할 수 있습니다.

버튼

버튼을 클릭하면 지정된 액션을 수행합니다. 버튼에 사용자 정의 이름이나 레이블을 추가하거나 “전송” 또는 “재설정”과 같이 미리 정의된 레이블을 사용할 수 있습니다. 버튼을 사용하여 양식에서 서버로 데이터를 전송하거나 양식을 재설정합니다. 스크립트에 정의된 다른 처리 작업을 할당할 수도 있습니다. 예를 들어 할당된 값에 기반하여 선택된 항목의 총 비용을 계산하게 할 수도 있습니다.

체크 박스

하나의 옵션 그룹에서 여러 옵션을 선택할 수 있습니다. 사용자는 적용되는 모든 옵션을 선택할 수 있습니다. 다음 예제는 Surfing, Mountain Biking, Rafting의 세 가지 체크 박스 항목을 선택한 것입니다.

체크 박스

라디오 버튼

배타적 옵션을 나타냅니다. 라디오 버튼 그룹에서 하나의 버튼을 선택하면 그룹에 있는 나머지 모든 버튼의 선택이 취소됩니다. 라디오 버튼 그룹은 같은 이름을 사용하는 두 개 이상의 버튼으로 구성됩니다. 아래 예제에서 Rafting이 현재 선택된 옵션입니다. Surfing을 클릭하면 Rafting 버튼이 자동으로 선택 취소됩니다.

라디오 버튼

목록 메뉴

옵션 값을 스크롤 목록에 표시하며, 사용자가 여러 개의 옵션을 선택할 수 있습니다. 목록 옵션은 메뉴 옵션을 하나의 메뉴에 표시하며 사용자는 하나의 항목만 선택할 수 있습니다. 제한된 공간에 많은 항목을 표시해야 하거나 서버로 반환되는 값을 제어해야 하는 경우에는 메뉴를 사용합니다. 유효하지 않은 데이터를 포함하여 사용자가 원하는 모든 것을 입력할 수 있는 텍스트 필드와는 달리 메뉴의 경우에는 반환할 값이 정확하게 설정되어야 합니다.

참고:

HTML 양식의 팝업 메뉴는 그래픽 팝업 메뉴와는 다릅니다. 그래픽 팝업 메뉴의 작성, 편집, 표시/숨기기에 대한 자세한 내용은 이 단원의 끝에 있는 링크를 참조하십시오.

점프 메뉴

문서나 파일로 링크되는 메뉴를 삽입할 수 있는 내비게이션 목록 또는 팝업 메뉴입니다.

파일 필드

사용자가 컴퓨터에 있는 파일을 찾아 해당 파일을 양식 데이터로 업로드할 수 있습니다.

이미지 필드

양식에 이미지를 삽입할 수 있습니다. 이미지 필드를 사용하여 [전송] 또는 [재설정] 버튼과 같은 이미지 버튼을 만들 수 있습니다. 이미지를 사용하여 데이터 전송 외의 작업을 수행하려면 해당 양식 오브젝트에 비헤이비어를 첨부해야 합니다.

HTML 양식 만들기

(Creative Cloud 사용자만 해당): HTML5 지원의 일부로서 양식 요소의 속성 패널에 새로운 속성이 소개되었습니다. 또한 4개의 새로운 양식 요소(이메일, 검색, 전화, URL)가 양식 섹션(삽입 패널)에 소개되었습니다. 보다 자세한 내용은 양식 요소를 위한 HTML5 지원 개선을 참조하십시오.

  1. 페이지를 열고 양식을 표시할 위치에 삽입 포인터를 놓습니다.
  2. [삽입] > [양식]을 선택하거나 [삽입] 패널에서 [양식] 범주를 선택한 후 [양식] 아이콘을 클릭합니다.

    디자인 뷰에서 해당 양식에 빨간색 점선 테두리가 표시됩니다. 이 표시가 보이지 않는 경우에는 [보기] > [시각 도구] > [보이지 않는 요소]를 선택합니다.

  3. [윈도우] > [속성]을 선택하여 속성 관리자를 열고 HTML 양식 속성을 설정합니다.

    a. 문서 창에서 양식 테두리를 클릭하여 양식을 선택합니다.

    b. [양식 이름] 상자에 양식을 식별하는 고유한 이름을 입력합니다.

    양식 이름을 지정하면 JavaScript나 VBScript와 같은 스크립트 언어로 양식을 참조하거나 제어할 수 있습니다. 양식 이름이 지정되어 있지 않은 경우에는 Dreamweaver에서 formn 구문을 사용하여 자동으로 이름이 지정되며 페이지에 삽입된 각 양식에 대해 n의 값이 하나씩 커집니다.

    c. [액션] 상자에서 경로를 입력하여 양식 데이터를 처리할 페이지 또는 스크립트를 지정하거나, 폴더 아이콘을 클릭하여 해당 페이지나 스크립트로 이동합니다. 예: processorder.php

    d. [메서드] 팝업 메뉴에서 양식 데이터를 서버로 전송하는 메서드를 선택합니다.

    다음 옵션을 설정합니다.

    Default 브라우저의 기본 설정을 사용하여 양식 데이터를 서버로 전달합니다. 일반적으로 기본값은 GET 메서드입니다.

    GET 페이지를 요청하는 URL에 값을 첨부합니다.

    POST HTTP 요청에 양식 데이터를 포함시킵니다.

    긴 양식을 전달할 때는 GET 메서드를 사용하지 마십시오. URL의 길이는 8192자로 제한됩니다. 너무 많은 데이터를 전달하면 데이터가 잘려서 예기치 않은 처리 결과가 발생하거나 처리에 실패할 수 있습니다.

    GET 메서드가 전달한 매개 변수에 의해 생성된 동적 페이지의 경우, 이 페이지를 다시 생성하는 데 필요한 모든 값이 브라우저의 [주소] 상자에 표시된 URL에 포함되어 있으므로 이 페이지를 북마크로 지정할 수 있습니다. 반면 POST 메서드가 전달한 매개 변수에 의해 생성된 동적 페이지는 북마크로 지정할 수 없습니다.

    기밀을 유지해야 하는 사용자 이름과 암호, 신용 카드 번호 또는 기타 기밀 정보를 수집할 때는 POST 메서드를 사용하는 것이 GET 메서드보다 안전하다고 생각할 수도 있습니다. 하지만 POST 메서드로 전달되는 정보는 암호화되지 않으므로 해커가 이 정보를 쉽게 가로챌 수 있습니다. 보안을 유지하려면 보안 연결을 통해 보안 서버에 연결하십시오.

     

    e. (선택 사항) 처리를 위해 서버로 전송되는 데이터에 대해 [인코딩 형식] 팝업 메뉴에서 MIME 인코딩 형식을 선택합니다.

    application/x-www-form-urlencode의 기본 설정이 일반적으로 POST 메서드와 함께 사용됩니다. 파일 업로드 필드를 만들 경우에는 multipart/form-data MIME 유형을 지정합니다.

     

    f. (선택 사항) 호출된 프로그램이 반환하는 데이터를 표시할 창을 [대상] 팝업 메뉴에서 선택합니다.

    해당 창이 아직 열려 있지 않은 경우에는 지정된 이름의 새 창이 열립니다. 다음 대상 값을 설정합니다.

    _blank 이름이 지정되지 않은 새 창에서 대상 문서를 엽니다.

    _parent 현재 문서를 표시하는 창의 부모 창에서 대상 문서를 엽니다.

    _self 양식이 전송된 동일한 창에서 대상 문서를 엽니다.

    _top 현재 창에서 대상 문서를 엽니다. 이 값을 사용하면 원본 문서가 프레임에 표시되었던 경우에도 반드시 전체 창에 대상 문서가 표시됩니다.

  4. 페이지에 양식 오브젝트를 삽입합니다.

    a. 양식에서 양식 오브젝트를 표시할 위치에 삽입 포인터를 놓습니다.

    b. [삽입] > [양식] 메뉴 또는 [삽입] 패널의 [양식] 범주에서 오브젝트를 선택합니다.

    c. [액세스 가능성 속성 태그 입력] 대화 상자를 입력합니다. 자세한 내용을 보려면 대화 상자의 [도움말] 버튼을 클릭하십시오.

    참고:

    [액세스 가능성 속성 태그 입력] 대화 상자가 보이지 않는 경우에는 양식 오브젝트를 삽입하려고 시도할 때 삽입 포인터가 코드 보기에 있었을 수 있습니다. 디자인 뷰에 삽입 포인터를 두고 다시 시도하십시오. 이 주제와 관련하여 보다 자세한 내용은 David Powers가 제공한 자료인 Dreamweaver에서 HTML 양식 만들기를 참조하십시오.

    d. 오브젝트의 속성을 설정합니다.

    e. 속성 관리자에서 오브젝트의 이름을 입력합니다.

    모든 텍스트 필드, 숨김 필드, 체크 박스 및 목록/메뉴 오브젝트에는 양식에서 오브젝트를 식별하는 고유한 이름이 지정되어야 합니다. 양식 오브젝트 이름에는 공백이나 특수 문자를 사용할 수 없으며, 영숫자와 밑줄(_)을 조합하여 만들 수 있습니다. 텍스트 필드에 할당하는 레이블은 필드의 값(입력된 데이터)을 저장할 변수 이름입니다. 이 값은 서버로 전송되어 처리되는 값입니다.

    참고:

    그룹의 모든 라디오 버튼은 같은 이름을 사용해야 합니다.

    f. 페이지에서 텍스트 필드, 체크 박스 또는 라디오 버튼 오브젝트에 레이블을 지정하려면 오브젝트 옆을 클릭하고 레이블을 입력합니다.

  5. 양식의 레이아웃을 조정합니다.

    행 분리, 단락 분리, 서식 유지 텍스트, 표 등을 사용하여 양식의 서식을 지정할 수 있습니다. 하지만 양식 안에 다른 양식을 삽입할 수 없습니다. 즉, 태그를 중첩시킬 수는 없습니다. 반면에 한 페이지에 여러 개의 양식을 삽입할 수는 있습니다.

    양식을 디자인할 때는 양식 필드에 설명적인 레이블을 지정하여 사용자가 어떤 작업을 수행할지 쉽게 알 수 있도록 하십시오. 예를 들어 이름 정보를 요청할 경우, “이름을 입력하십시오.”라는 레이블을 사용할 수 있습니다.

    표는 양식 오브젝트와 필드 레이블에 적합한 구조를 갖고 있습니다. 양식에 표를 사용할 때는 table 태그를 모두 form 태그 사이에 넣어야 합니다.

양식 제작에 대한 튜토리얼은 www.adobe.com/go/vid0160_kr에서 찾을 수 있습니다.

CSS를 사용한 양식 스타일 제작에 대한 튜토리얼은 www.adobe.com/go/vid0161_kr에서 찾을 수 있습니다.

텍스트 필드 오브젝트 속성

텍스트 필드 오브젝트를 선택한 후 속성 관리자에서 다음 옵션 중 하나를 설정합니다.

문자 폭

필드에 표시할 수 있는 최대 문자 수를 지정합니다. 이 값은, 필드에 입력할 수 있는 최대 문자 수를 지정하는 [최대 문자] 값보다 작게 설정할 수 있습니다. 예를 들어 [문자 폭]이 20(기본값)으로 설정되어 있는데 100자가 입력될 경우, 텍스트 필드에서는 20자만 볼 수 있습니다. 입력된 문자는 필드에는 모두 나타나지 않더라도 필드 오브젝트에 의해 모두 인식되며, 처리를 위해 서버로 전송됩니다.

최대 문자

텍스트 필드의 한 행에 입력할 수 있는 최대 문자 수를 지정합니다. [최대 문자]를 사용하여 우편번호를 5자리로 제한하거나 암호를 10자로 제한할 수 있습니다. [최대 문자] 상자를 공백으로 두면 사용자가 입력할 수 있는 문자 수에 제한이 없습니다. 이 필드의 문자 폭을 초과할 경우에는 텍스트가 스크롤됩니다. 최대 문자 수를 초과하여 입력하면 양식에서 경고음이 울립니다.

행 수

[여러 행] 옵션이 선택된 경우 사용할 수 있으며, 여러 행 텍스트 필드의 높이를 설정합니다.

사용 불가능

텍스트 영역을 비활성화합니다.

읽기 전용

텍스트 영역을 읽기 전용 텍스트 영역으로 만듭니다.

유형

한 행, 여러 행 또는 암호 필드로 필드를 지정합니다.

한 행

input 태그의 type 속성이 text로 설정됩니다. [문자 폭] 설정은 size 속성에 매핑되고, [최대 문자] 설정은 maxlength 속성에 매핑됩니다.

여러 행

textarea 태그로 설정됩니다. [문자 폭] 설정은 cols 속성에 매핑되고, [행 수] 설정은 rows 속성에 매핑됩니다.

암호

input 태그의 type 속성이 password로 설정됩니다. [문자 폭]과 [최대 문자] 설정은 한 행 텍스트 필드와 같은 속성을 가집니다. 암호 텍스트 필드에 입력하는 정보는 다른 사람이 볼 수 없도록 불릿이나 별표로 표시됩니다.

기본값

양식이 처음 로드될 필드에 표시될 값을 할당합니다. 예를 들어 참고 또는 예제 값을 포함하여 사용자가 정보를 입력할 필드임을 나타낼 수 있습니다.

클래스

오브젝트에 CSS 규칙을 적용할 수 있습니다.

버튼 오브젝트 옵션

버튼 이름

버튼에 이름을 할당합니다. [전송]과 [재설정]은 예약된 이름입니다. [전송]은 처리 응용 프로그램이나 스크립트로 양식 데이터를 보내고, [재설정]은 모든 양식 필드를 원래 값으로 재설정합니다.

버튼에 표시될 텍스트를 지정합니다.

액션

버튼을 클릭할 때 수행할 작업을 지정합니다.

양식 전송

사용자가 버튼을 클릭할 때 처리할 양식 데이터를 전송합니다. 데이터는 양식 자체의 [액션] 속성에 지정된 페이지나 스크립트로 전송됩니다.

양식 재설정

버튼을 클릭할 때 양식의 내용을 지웁니다.

없음

버튼이 클릭될 때 수행할 액션을 지정합니다. 예를 들어 사용자가 버튼을 클릭했을 때 다른 페이지를 여는 JavaScript 비헤이비어를 추가할 수 있습니다.

클래스

CSS 규칙을 오브젝트에 적용합니다.

체크 박스 오브젝트 옵션

체크값

체크 박스를 선택할 때 서버로 전송할 값을 설정합니다. 예를 들어 설문 조사에서 매우 좋음을 4로, 매우 나쁨을 1로 설정할 수 있습니다.

초기 상태

브라우저에 양식이 로드될 때 체크 박스의 선택 여부를 결정합니다.

동적

서버가 동적으로 체크 박스의 초기 상태를 결정할 수 있도록 합니다. 예를 들어 체크 박스를 사용하여 데이터베이스 레코드에 저장된 예/아니요 정보를 시각적으로 나타낼 수 있습니다. 디자인 시에는 이 정보를 알 수 없습니다. 런타임 중에 서버는 데이터베이스 레코드를 읽고 값이 Yes이면 체크 박스를 선택합니다.

클래스

CSS(Cascading Style Sheets) 규칙을 오브젝트에 적용합니다.

단일 라디오 버튼 오브젝트 옵션

체크값

라디오 버튼이 선택되었을 때 서버로 전송될 값을 설정합니다. 예를 들어 [체크값] 상자에 skiing을 입력하여 사용자가 skiing을 선택했음을 나타낼 수 있습니다.

초기 상태

브라우저에 양식이 로드될 때 라디오 버튼의 선택 여부를 결정합니다.

동적

서버가 동적으로 라디오 버튼의 초기 상태를 결정하도록 할 수 있습니다. 예를 들어 라디오 버튼을 사용하여 데이터베이스 레코드에 저장된 정보를 시각적으로 나타낼 수 있습니다. 디자인 시에는 이 정보를 알 수 없습니다. 런타임 중 서버가 데이터베이스 레코드를 읽고 값이 지정된 값과 일치하면 라디오 버튼을 선택합니다.

클래스

CSS 규칙을 오브젝트에 적용합니다.

목록/메뉴

메뉴에 이름을 할당합니다. 이 이름은 고유해야 합니다.

유형

클릭했을 때 메뉴가 드롭다운되는 메뉴 옵션인지 또는 스크롤할 수 있는 항목의 목록을 표시하는 목록 옵션인지 지정할 수 있습니다. 브라우저에 양식이 표시될 때 한 개의 옵션만 표시되도록 하려면 [메뉴] 옵션을 선택합니다. 다른 옵션을 보려면 사용자가 아래 화살표를 클릭해야 합니다.

사용자가 여러 항목을 선택할 수 있도록 양식이 브라우저에 표시될 때 일부 또는 전체 옵션을 나열하려면 [목록] 옵션을 선택합니다.

높이

(목록 유형에만 해당) 메뉴에 표시할 항목의 개수를 설정합니다.

선택

(목록 유형에만 해당) 사용자가 목록에서 여러 항목을 선택할 수 있는지 여부를 지정합니다.

목록값

항목을 양식 메뉴에 추가할 수 있는 대화 상자를 엽니다.

  1. 플러스(+) 및 마이너스(-) 버튼을 사용하여 목록에서 항목을 추가하거나 제거합니다.

  2. 각 메뉴 항목에 대해 레이블 텍스트와 옵션 값을 입력합니다.

    목록의 각 항목은 레이블(목록에 표시되는 텍스트)과 값(항목이 선택될 때 처리 응용 프로그램으로 전달되는 값)을 갖습니다. 값이 지정되어 있지 않은 경우에는 처리 응용 프로그램에 레이블이 대신 전달됩니다.

  3. 목록의 항목을 재배치하려면 위 또는 아래 화살표 버튼을 사용하십시오.

    메뉴에 표시되는 항목들의 순서는 [목록값] 대화 상자와 같습니다. 목록의 첫 번째 항목은 해당 페이지가 브라우저에 로드될 때 선택되는 항목입니다.

동적

처음 표시될 때 서버에서 동적으로 메뉴의 항목을 선택할 수 있도록 합니다.

클래스

오브젝트에 CSS 규칙을 적용할 수 있습니다.

초기 선택

목록에서 기본적으로 선택되는 항목을 설정합니다. 목록에서 원하는 항목을 클릭합니다.

파일 업로드 필드 삽입

파일 업로드 필드를 만들면 사용자가 컴퓨터에 있는 일반 문서나 그래픽 파일과 같은 파일을 선택하여 업로드할 수 있습니다. 파일 필드는 다른 텍스트 필드와 유사하지만 [검색] 버튼이 있다는 점이 다릅니다. 사용자가 직접 업로드할 파일의 경로를 입력하거나 [검색] 버튼을 사용하여 파일을 찾아 선택할 수 있습니다.

파일 업로드 필드를 사용하려면 파일 전송을 처리할 수 있는 페이지나 서버 측 스크립트가 있어야 합니다. 양식 데이터를 처리하는 데 사용하고 있는 서버 기술 설명서를 참조하십시오. 예를 들어 PHP를 사용하는 경우에는 온라인 PHP 매뉴얼(http://us2.php.net/features.file-upload.php)의 “파일 업로드 처리(Handling files uploads)”를 참조합니다.

파일 필드를 사용하려면 POST 메서드를 사용하여 브라우저에서 서버로 파일을 전송해야 합니다. 파일은 해당 양식의 [액션] 상자에 지정된 주소로 전송됩니다.

참고:

파일 필드를 사용하기 전에 서버 관리자에게 문의하여 익명으로 파일을 업로드할 수 있는지 확인하십시오.

  1. [삽입] > [양식]을 선택하여 페이지에 양식을 삽입합니다.
  2. 해당 속성 관리자를 표시할 양식을 선택합니다.
  3. 양식 메서드를 POST로 설정합니다.
  4. [인코딩 형식] 팝업 메뉴에서 multipart/form-data를 선택합니다.
  5. [액션] 상자에 업로드된 파일을 처리할 수 있는 페이지나 서버 측 스크립트를 지정합니다.
  6. 양식 외곽선 안에 삽입 포인터를 놓은 다음 [삽입] > [양식] > [파일 필드]를 선택합니다.
  7. 속성 관리자에서 다음 옵션을 설정합니다.

    파일 필드 이름

    파일 필드 오브젝트의 이름을 지정합니다.

    문자 폭

    필드에 표시할 수 있는 최대 문자 수를 지정합니다.

    최대 문자

    필드에 입력할 수 있는 최대 문자 수를 지정합니다. 사용자가 파일을 검색할 때 파일 이름과 경로의 길이가 [최대 문자]에 지정된 값을 초과할 수도 있습니다. 그러나 이 값을 초과한 파일 이름과 경로 이름을 입력하려고 해도 [최대 문자] 값에 지정된 수의 문자만 파일 필드에 입력할 수 있습니다.

이미지 버튼 삽입

이미지를 버튼 아이콘으로 사용할 수 있습니다. 이미지를 사용하여 데이터 전송 외의 작업을 수행하려면 해당 양식 오브젝트에 비헤이비어를 첨부해야 합니다.

  1. 문서를 열고 양식 외곽선 안에 삽입 포인터를 놓습니다.
  2. [삽입] > [양식] > [이미지 필드]를 선택합니다.

    [이미지 소스 선택] 대화 상자가 나타납니다.

  3. [이미지 소스] 대화 상자에서 버튼에 사용할 이미지를 선택하고 [확인]을 클릭합니다.
  4. 속성 관리자에서 다음 옵션을 설정합니다.

    이미지 필드

    버튼에 이름을 할당합니다. [전송]과 [재설정]은 예약된 이름입니다. [전송]은 처리 응용 프로그램이나 스크립트로 양식 데이터를 보내고, [재설정]은 모든 양식 필드를 원래 값으로 재설정합니다.

    소스

    버튼에 사용할 이미지를 지정합니다.

    그림 설명

    브라우저에서 이미지를 로드할 수 없는 경우 이에 대해 설명하는 텍스트를 입력할 수 있습니다.

    정렬

    오브젝트에 대한 정렬 속성을 설정합니다.

    이미지 편집

    기본 이미지 편집기를 실행하고 이미지 파일을 편집할 수 있도록 엽니다.

    클래스

    오브젝트에 CSS 규칙을 적용할 수 있습니다.

  5. 버튼에 JavaScript 비헤이비어를 첨부하려면 해당 이미지를 선택한 후 [윈도우] > [비헤이비어]를 선택하여 [비헤이비어] 패널을 열고 비헤이비어를 선택합니다.

숨김 필드 오브젝트 옵션

숨김 필드

필드의 이름을 지정합니다.

필드에 값을 할당합니다. 이 값은 양식이 전송될 때 서버로 전달됩니다.

라디오 버튼 그룹 삽입

  1. 양식 외곽선 안에 삽입 포인터를 놓습니다.
  2. [삽입] > [양식] > [라디오 그룹]을 선택합니다.

  3. 대화 상자에서 필요한 작업을 끝내고 [확인]을 클릭합니다.

    a. [이름] 상자에 라디오 버튼 그룹의 이름을 입력합니다.

     라디오 버튼을 사용하여 서버로 다시 매개 변수를 보내려면 해당 이름과 매개 변수를 연결합니다. 예를 들어 그룹 이름을 myGroup으로 지정하고 양식 메서드를 GET 으로 설정하는 경우(즉, [전송] 버튼이 클릭될 때 양식 매개 변수 대신 URL 매개 변수를 전달하려는 경우), 표현식 myGroup="CheckedValue"가 URL에 포함되어 서버로 전달됩니다.

    b. 플러스(+) 버튼을 클릭하여 그룹에 라디오 버튼을 추가합니다. 새 버튼의 레이블과 체크값을 입력합니다.

    c. 버튼을 재배열하려면 위 또는 아래 화살표를 클릭합니다.

    d. 브라우저에서 페이지가 열릴 때 특정 라디오 버튼이 선택되도록 하려면, 다음과 같은 값 선택 상자에 해당 라디오 버튼 값과 같은 값을 입력합니다.

    상자 옆에 있는 번개 모양 아이콘을 클릭하거나 가능한 체크값이 들어 있는 레코드세트를 선택하여 정적 값을 입력하거나 동적 값을 지정합니다. 두 가지 경우 모두, 사용자가 지정하는 값이 그룹에 있는 라디오 버튼 중 하나와 값이 같아야 합니다. 라디오 버튼의 체크값을 보려면 각 라디오 버튼을 선택하고 [윈도우] > [속성]을 선택하여 속성 관리자를 엽니다.

    e. Dreamweaver에서 버튼에 적용할 레이아웃 형식을 선택합니다. 행 분리 또는 표를 사용하여 버튼의 레이아웃을 지정합니다. 사용자가 표 옵션을 선택하면 Dreamweaver는 왼쪽에 라디오 버튼을, 오른쪽에는 레이블이 있는 단일 열의 표를 만듭니다.

    속성 관리자를 사용하거나 코드 보기에서 직접 속성을 설정할 수도 있습니다.

체크 박스 그룹 삽입

  1. 양식 외곽선 안에 삽입 포인터를 놓습니다.
  2. [삽입] > [양식] > [체크 박스 그룹]을 선택합니다.

  3. 대화 상자에서 필요한 작업을 끝내고 [확인]을 클릭합니다.

    a. [이름] 상자에 체크 박스 그룹의 이름을 입력합니다.

    체크 박스를 사용하여 서버로 다시 매개 변수를 보내려면 해당 이름과 매개 변수를 연결합니다. 예를 들어 그룹 이름을 myGroup으로 지정하고 양식 메서드를 GET 으로 설정하는 경우(즉, [전송] 버튼이 클릭될 때 양식 매개 변수 대신 URL 매개 변수를 전달하려는 경우), 표현식 myGroup="CheckedValue"가 URL에 포함되어 서버로 전달됩니다.

    b. 플러스(+) 버튼을 클릭하여 그룹에 체크 박스를 추가합니다. 새 체크 박스의 레이블과 체크값을 입력합니다.

    c. 체크 박스를 재배열하려면 위 또는 아래 화살표를 클릭합니다.

    d. 브라우저에서 페이지가 열릴 때 특정 체크 박스가 선택되도록 하려면, [다음과 같은 값 선택] 상자에 해당 체크 박스 값과 같은 값을 입력합니다.

    상자 옆에 있는 번개 모양 아이콘을 클릭하거나 가능한 체크값이 들어 있는 레코드세트를 선택하여 정적 값을 입력하거나 동적 값을 지정합니다. 두 가지 경우 모두, 사용자가 지정하는 값이 그룹에 있는 체크 박스 중 하나의 체크값과 같아야 합니다. 체크 박스의 체크값을 보려면 각 체크 박스를 선택하고 [윈도우] > [속성]을 선택하여 속성 관리자를 엽니다.

    e. Dreamweaver에서 체크 박스에 적용할 레이아웃 형식을 선택합니다.

    행 분리 또는 표를 사용하여 체크 박스의 레이아웃을 지정합니다. 사용자가 표 옵션을 선택하면 Dreamweaver는 왼쪽에 체크 박스를, 오른쪽에는 레이블이 있는 단일 열의 표를 만듭니다.

    속성 관리자를 사용하거나 코드 보기에서 직접 속성을 설정할 수도 있습니다.

동적 양식 오브젝트 정보

동적 양식 오브젝트는 오브젝트의 초기 상태가 양식 작성자가 양식 오브젝트를 디자인할 때 결정되지 않고 서버에서 페이지가 요청될 때 서버에 의해 결정되는 양식 오브젝트입니다. 예를 들어 사용자가 메뉴가 있는 양식이 포함된 PHP 페이지를 요청할 때 해당 페이지의 PHP 스크립트에서 데이터베이스에 저장된 값으로 메뉴를 자동으로 채웁니다. 그러면 서버는 완성된 페이지를 사용자의 브라우저로 전송합니다.

동적 양식 오브젝트를 만들면 사이트의 유지 관리 작업을 간단하게 수행할 수 있습니다. 예를 들어 많은 사이트는 메뉴를 이용하여 사용자에게 일련의 옵션을 제공합니다. 동적 메뉴를 사용하면 단일 위치(항목이 저장된 데이터베이스 테이블)에서 메뉴 항목을 추가, 제거, 변경하여 사이트에 있는 동일한 메뉴의 모든 인스턴스를 업데이트할 수 있습니다.

동적 HTML 양식 메뉴 삽입 또는 변경

데이터베이스의 항목으로 HTML 양식 메뉴 또는 목록 메뉴를 동적으로 채울 수 있습니다. 대부분의 페이지에서 HTML 메뉴 오브젝트를 사용할 수 있습니다.

이 작업을 하려면 먼저 ColdFusion, PHP 또는 ASP 페이지에 HTML 양식을 삽입한 다음 해당 메뉴에 대해 레코드세트나 동적 내용의 다른 소스를 정의해야 합니다.

  1. HTML 목록/메뉴 양식 오브젝트를 페이지에 삽입

        a. 페이지 위의 HTML 양식 내부를 클릭합니다([삽입] > [양식] > [양식]).

        b. [삽입] > [양식] > [목록/메뉴]를 선택하여 양식 오브젝트를 삽입합니다.

  2. 다음 중 하나를 수행합니다.

    • 새로운 또는 기존의 HTML 목록/메뉴 양식 오브젝트를 선택한 다음, 속성 관리자에서 [동적] 버튼을 클릭합니다.

    • [삽입] > [데이터 오브젝트] > [동적 데이터] > [동적 선택 목록]을 선택합니다.

  3. [동적 목록/메뉴] 대화 상자에서 작업을 완료하고 [확인]을 클릭합니다.

      a. [옵션을 가져올 레코드세트] 팝업 메뉴에서 내용 소스로 사용할 레코드세트를 선택합니다. 나중에 정적 및 동적 목록/메뉴 항목을 편집할 때도 이 메뉴를 사용합니다.

      b. [정적 옵션] 영역에 목록이나 메뉴의 기본 항목을 입력합니다. 또한 동적 내용을 추가한 후 이 옵션을 사용하여 목록/메뉴 양식 오브젝트에서 정적 항목을 편집합니다.

      c. (선택 사항) 플러스(+) 및 마이너스(-) 버튼을 사용하여 목록에 항목을 추가하거나 제거합니다. 항목 순서는 [초기 목록값] 대화 상자와 같습니다. 목록의 첫 번째 항목은 해당 페이지가 브라우저에 로드될 때 선택되는 항목입니다. 목록의 항목을 재배치하려면 위 또는 아래 화살표 버튼을 사용하십시오.

      d. [값] 팝업 메뉴에서 해당 메뉴 항목 값을 포함하는 필드를 선택합니다.

      e. [레이블] 팝업 메뉴에서 해당 메뉴 항목의 레이블을 포함하는 필드를 선택합니다.

      f. (선택 사항) 브라우저에 페이지가 열릴 때 또는 양식에 레코드가 표시될 때 특정 메뉴 항목이 선택되도록 하려면 [다음과 같은 값] 선택 상자에 해당 메뉴 항목과 같은 값을 입력합니다.

        상자 옆에 있는 번개 모양 아이콘을 클릭하면 정적 값을 지정할 수 있고, 데이터 소스 목록에서 동적 값을 선택하면 동적 값을 지정할 수 있습니다. 어느 경우에든 지정하는 값이 해당 메뉴 항목의 값들 중 하나와 일치해야 합니다.

     

기존 HTML 양식 메뉴를 동적 메뉴로 만들기

  1. 디자인 뷰에서 목록/메뉴 양식 오브젝트를 선택합니다.
  2. 속성 관리자에서 [동적] 버튼을 클릭합니다.
  3. 대화 상자에서 필요한 작업을 끝내고 [확인]을 클릭합니다.

HTML 텍스트 필드에 동적 내용 표시

양식이 브라우저에 표시될 때 HTML 텍스트 필드에 동적 내용을 표시할 수 있습니다.

이 작업을 하려면 먼저 ColdFusion, PHP 또는 ASP 페이지에서 양식을 만든 다음 해당 텍스트 필드에 대해 레코드세트나 동적 내용의 다른 소스를 만들어야 합니다.

  1. 페이지의 HTML 양식에서 텍스트 필드를 선택합니다.
  2. 속성 관리자에서 [기본값] 상자 옆의 번개 모양 아이콘을 클릭하여 [동적 데이터] 대화 상자를 엽니다.
  3. 텍스트 필드에 값을 제공할 레코드세트 열을 선택하고 [확인]을 클릭합니다.

동적 텍스트 필드 대화 상자의 옵션 설정

  1. [텍스트 필드] 팝업 메뉴에서 동적으로 만들 텍스트 필드를 선택합니다.
  2. [다음으로 값 설정] 상자 옆에 있는 번개 모양 아이콘을 클릭한 다음 데이터 소스 목록에서 데이터 소스를 선택하고 [확인]을 클릭합니다.

    데이터 소스에는 텍스트 정보가 들어 있어야 합니다. 목록에 데이터 소스가 표시되지 않거나 적합한 데이터 소스가 없는 경우에는 플러스(+) 버튼을 클릭하여 새 데이터 소스를 정의합니다.

HTML 체크 박스를 동적으로 미리 선택

브라우저에 양식이 표시될 때 체크 박스를 선택할지 여부를 서버가 결정하도록 할 수 있습니다.

이 작업을 하려면 먼저 ColdFusion, PHP 또는 ASP 페이지에서 양식을 만든 다음 해당 체크 박스에 대해 레코드세트나 동적 내용의 다른 소스를 정의해야 합니다. 내용의 소스에 Yes/No나 true/false 같은 불린 값이 포함되어 있으면 가장 좋습니다.

  1. 페이지에서 체크 박스 양식 오브젝트를 선택합니다.
  2. 속성 관리자에서 [동적] 버튼을 클릭합니다.
  3. [동적 체크 박스] 대화 상자에서 필요한 작업을 완료하고 [확인]을 클릭합니다.
    • [선택 조건] 상자 옆에 있는 번개 모양 아이콘을 클릭한 후 데이터 소스 목록에서 해당 필드를 선택합니다.

      데이터 소스에는 YesNo 또는 truefalse 등의 불린 데이터가 포함되어야 합니다. 목록에 데이터 소스가 표시되지 않거나 적합한 데이터 소스가 없는 경우에는 플러스(+) 버튼을 클릭하여 새 데이터 소스를 정의합니다.

    • [다음과 같음] 상자에 체크 박스가 선택된 것으로 표시되기 위해 필요한 필드 값을 입력합니다.

      예를 들어 레코드의 특정 필드 값이 Yes가 될 때 체크 박스가 선택된 것으로 표시하려면 [다음과 같음] 상자에 Yes를 입력합니다.

    참고:

    사용자가 양식에서 [전송] 버튼을 클릭할 때에도 서버로 이 값이 반환됩니다.

HTML 라디오 버튼을 동적으로 미리 선택

레코드가 브라우저의 HTML 양식에 표시될 때 HTML 라디오 버튼을 동적으로 미리 선택합니다.

이 작업을 하려면 먼저 ColdFusion, PHP 또는 ASP 페이지에서 양식을 만든 다음 하나 이상의 HTML 라디오 버튼 그룹을 삽입해야 합니다([삽입] > [양식] > [라디오 그룹]). 또한 라디오 버튼에 대해 레코드세트 또는 동적 내용의 다른 소스를 정의해야 합니다. 내용의 소스에 Yes/No나 true/false 같은 불린 값이 포함되어 있으면 가장 좋습니다.

  1. 디자인 뷰에서 그룹의 라디오 버튼을 하나 선택합니다.
  2. 속성 관리자에서 [동적] 버튼을 클릭합니다.
  3. [동적 라디오 그룹] 대화 상자에서 필요한 작업을 끝내고 [확인]을 클릭합니다.

동적 라디오 그룹 대화 상자의 옵션 설정

  1. [라디오 버튼 그룹] 팝업 메뉴에서 페이지의 양식과 라디오 버튼 그룹을 선택합니다.

    [라디오 버튼 값] 텍스트 상자에 그룹의 모든 라디오 버튼 값이 표시됩니다.

  2. 값 목록에서 동적으로 미리 선택할 값을 선택합니다. 이 값이 [값] 상자에 표시됩니다.
  3. [다음과 같은 값 선택] 상자 옆에 있는 번개 모양 아이콘을 클릭한 후 그룹의 라디오 버튼에 가능한 체크값이 들어 있는 레코드세트를 선택합니다.

    해당 라디오 버튼의 체크값과 일치하는 값이 들어 있는 레코드세트를 선택해야 합니다. 라디오 버튼의 체크값을 보려면 각 라디오 버튼을 선택하고 [윈도우] > [속성]을 선택하여 속성 관리자를 엽니다.

  4. [확인]을 클릭합니다.

동적 라디오 그룹 대화 상자의 옵션 설정(ColdFusion)

  1. [라디오 그룹] 팝업 메뉴에서 라디오 그룹과 양식을 선택합니다.
  2. [다음과 같은 값 선택] 상자 옆에 있는 번개 모양 아이콘을 클릭합니다.
  3. [동적 데이터] 대화 상자에서 필요한 작업을 완료하고 [확인]을 클릭합니다.

      a. 데이터 소스 목록에서 데이터 소스를 선택합니다.

      b. (선택 사항) 텍스트의 데이터 서식을 선택합니다.

      c. (선택 사항) Dreamweaver에서 동적 텍스트 표시를 위해 페이지에 삽입할 코드를 수정합니다.

  4. [확인]을 클릭하여 [동적 라디오 그룹] 대화 상자를 닫은 다음, [라디오 그룹]에 동적 내용 플레이스홀더를 삽입합니다.

HTML 양식 데이터 유효성 검사

Dreamweaver에서는 지정된 텍스트 필드의 내용을 검사하여 사용자가 정확한 형식의 데이터를 입력했는지 확인하는 JavaScript 코드를 추가할 수 있습니다.

Spry 양식 위젯을 사용하여 양식을 만들고 지정된 양식 요소 내용의 유효성을 확인할 수 있습니다. 자세한 내용은 아래에 나열된 Spry 관련 항목을 참조하십시오.

또한 Dreamweaver는 지정된 필드의 내용을 검사하는 ColdFusion 양식을 작성할 수도 있습니다. 자세한 내용은 아래에 나열된 ColdFusion 장을 참조하십시오.

  1. 하나 이상의 텍스트 필드와 [전송] 버튼을 포함하는 HTML 양식을 만듭니다.

    유효성을 검사하려는 각 필드의 이름은 고유해야 합니다.

  2. [전송] 버튼을 선택합니다.
  3. [윈도우] > [비헤이비어]를 선택하여 [비헤이비어] 패널을 열고, 플러스(+) 버튼을 클릭한 다음 목록에서 [양식 유효성 검사] 비헤이비어를 선택합니다.
  4. 각 텍스트 필드에 대한 유효성 검사 규칙을 설정하고 [확인]을 클릭합니다.

    예를 들어 나이를 입력하는 텍스트 필드는 숫자만 허용하도록 지정할 수 있습니다.

    참고:

    양식 유효성 검사 비헤이비어는 문서에 텍스트 필드가 삽입되어 있는 경우에만 사용할 수 있습니다.

HTML 양식 오브젝트에 JavaScript 비헤이비어 첨부

Dreamweaver에 저장된 JavaScript 비헤이비어를 버튼과 같은 HTML 양식 오브젝트에 첨부할 수 있습니다.

  1. HTML 양식 오브젝트를 선택합니다.
  2. [윈도우] > [비헤이비어]를 선택하여 [비헤이비어] 패널을 열고, 플러스(+) 버튼을 클릭한 다음 목록에서 비헤이비어를 선택합니다.

HTML 양식 버튼에 사용자 정의 스크립트 첨부

일부 양식의 경우 양식 데이터를 서버로 전송하여 처리하는 대신 JavaScript나 VBScript를 사용하여 클라이언트에서 양식을 처리하거나 기타 다른 작업을 수행합니다. Dreamweaver를 사용하여 사용자가 양식 버튼을 클릭할 때 특정 클라이언트측 스크립트가 실행되도록 양식 버튼을 구성할 수 있습니다.

  1. 양식에서 [전송] 버튼을 선택합니다.
  2. [윈도우] > [비헤이비어]를 선택하여 [비헤이비어] 패널을 열고, 플러스(+) 버튼을 클릭한 다음 목록에서 [JavaScript 호출]을 선택합니다.
  3. [JavaScript 호출] 상자에, 사용자가 해당 버튼을 클릭했을 때 실행될 JavaScript 함수의 이름을 입력하고 [확인]을 클릭합니다.

    예를 들어 아직 존재하지 않는 processMyForm() 등의 함수 이름을 입력할 수 있습니다.

  4. 문서의 head 섹션에 아직 JavaScript 함수가 없으면 지금 추가합니다.

    예를 들어 문서의 head 섹션에서 다음 JavaScript 함수를 정의하면 사용자가 [전송] 버튼을 클릭할 때 메시지를 표시할 수 있습니다.

    function processMyForm(){ 
        alert('Thanks for your order!'); 
    }

액세스 가능한 HTML 양식 만들기

HTML 양식 오브젝트를 삽입할 때 양식 오브젝트를 액세스할 수 있도록 만든 후 나중에 액세스 가능성 속성을 변경할 수 있습니다.

액세스 가능한 양식 오브젝트 삽입

  1. 액세스 가능한 양식 오브젝트를 처음 삽입할 때 양식 오브젝트에 대한 [액세스 가능성] 대화 상자를 활성화합니다(시각적 개발을 위한 작업 영역 최적화 참조).

    이 단계는 한 번만 수행합니다.

  2. 문서에서 양식 오브젝트를 표시할 위치에 삽입 포인터를 놓습니다.
  3. [삽입] > [양식]을 선택하고 삽입할 양식 오브젝트를 선택합니다.

    [액세스 가능성 속성 태그 입력] 대화 상자가 나타납니다.

  4. 대화 상자에서 필요한 작업을 끝내고 [확인]을 클릭합니다. 옵션 중 일부는 다음과 같습니다.

    참고:

    화면 판독기는 오브젝트의 레이블 속성을 읽습니다.

    ID

    양식 필드에 ID를 할당합니다. 이 값은 JavaScript의 필드를 참조하는 데 사용될 수 있으며, [스타일] 옵션에서 [For 속성을 사용하여 레이블 태그 첨부] 옵션을 선택한 경우 for 속성의 값으로도 사용됩니다.

    레이블 태그로 래핑

    다음과 같이 양식 항목에 레이블 태그를 래핑합니다.

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

    For 속성을 사용하여 레이블 태그 첨부

    for 속성을 사용하여 다음과 같이 양식 항목에 레이블 태그를 래핑합니다.

    <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

    이 옵션을 선택하면 브라우저에서 체크 박스나 라디오 버튼과 연관된 텍스트를 포커스 사각형으로 렌더링하므로, 사용자가 체크 박스나 라디오 버튼 컨트롤뿐 아니라 연관된 텍스트의 아무 곳이나 클릭하여 체크 박스나 라디오 버튼을 선택할 수 있습니다.

    참고: 이 옵션은 액세스 가능성에서 선호되는 옵션이지만 그 기능은 브라우저에 따라 다를 수 있습니다.

    레이블 태그 없음

    다음과 같이 레이블 태그를 사용하지 않습니다.

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    액세스 키

    키보드의 해당 키(한 글자)와 Alt 키(Windows) 또는 Control 키(Macintosh)를 사용하여 브라우저에서 해당 양식 오브젝트를 선택합니다. 예를 들어 B를 액세스 키로 입력한 경우 Macintosh 브라우저 사용자는 Control+B를 입력하여 양식 오브젝트를 선택할 수 있습니다.

    탭 인덱스

    양식 오브젝트의 탭 순서를 지정합니다. 한 오브젝트에 대한 탭 순서를 설정할 경우 모든 오브젝트에 대한 탭 순서를 설정해야 합니다.

    페이지에 Tab 키를 눌러 이동할 수 있는 링크 및 양식 오브젝트가 여러 개 있고 이러한 항목 사이에 특정 이동 순서가 필요한 경우에 탭 순서를 설정하면 편리합니다.

  5. 양식 태그를 삽입하려면 [예]를 클릭합니다.

    문서에 양식 오브젝트가 나타납니다.

    참고:

    [취소]를 누를 경우 문서에 양식 오브젝트는 나타나지만 Dreamweaver는 액세스 가능성 태그나 속성을 이 양식 오브젝트에 연결하지는 않습니다.

양식 오브젝트에 대한 액세스 가능성 값 편집

  1. 문서 창에서 오브젝트를 선택합니다.
  2. 다음 중 하나를 수행합니다.
    • 코드 보기에서 해당 속성을 편집합니다.

    • 마우스 오른쪽 버튼으로 클릭하거나(Windows) Control 키를 누른 상태에서 클릭한 후(Macintosh) [태그 편집]을 선택합니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책