웹 양식 제작

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

[윈도우] > [속성]을 선택하여 속성 관리자를 열고 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 현재 창에서 대상 문서를 엽니다. 이 값을 사용하면 원본 문서가 프레임에 표시되었던 경우에도 반드시 전체 창에 대상 문서가 표시됩니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[삽입] > [양식] > [라디오 그룹]을 선택합니다.

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

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

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

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

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

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

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

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

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

[삽입] > [양식] > [체크 박스 그룹]을 선택합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• [선택 조건] 상자 옆에 있는 번개 모양 아이콘을 클릭한 후 데이터 소스 목록에서 해당 필드를 선택합니다.

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

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

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

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

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

[동적 데이터] 대화 상자에서 필요한 작업을 완료하고 [확인]을 클릭합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 코드 보기에서 해당 속성을 편집합니다.

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