장낙중의 드림위버강좌

폼 양식의 구성 요소 소개

이번에는 입력양식(form)에 대해서 배울차례다.
이번에도 예제를 따라해 보면서, 폼의 생성과 여러가지 속성적용에 대해 알아보겠다. 물론 입력된 데이타를 처리하는 데는 CGI 프로그램도 있어야 되지만, 여기서는 HTML과 관련된 폼양식을 드림위버로 생성시키는 것에 대해서 까지만 살펴보기로 한다.

Object Pallete의 상단에 삼각형을 클릭하면 그림과 같은 모양이 되는데, Forms를 선택한다. 선택한 후에는 폼과 관련된 여러 개체들이 삽입버튼으로 나타나는데 우선 가장 상단에 있는 Insert Form버튼을 누른다. 빨간색 점선으로 테두리가 쳐지면, Insert > Table을 선택해서 8행 2열의 테이블을 삽입하고, Property Inspector에서 border를 '0'으로 설정한다.

이제 첫번째 행에 2번째 열에 커서를 위치하고, 아래 그림에서 맨 윗줄 오른쪽버튼인 Insert Text Field를 눌러서 삽입을 확인한 후 Property Inspector의 Type부분을 Single Line으로 선택한다. 옆에있는 Char Width는 입력상자의 길이를 결정하고 Max chars는 입력시킬 수 있는 글자수를 한정한다. Init Val은 입력상자에 표시될 글자를 입력하는 곳이다.

이번에는 바로 밑에 칸에 암호 입력상자를 만들기 위해서 Insert Text Field버튼을 한번 더 누르고 Type에서 Password를 선택한다. 나머지 사항은 Single Line과 같다. 암호입력상자가 텍스트와 틀린점은 입력시에 입력내용 대신에 별표등으로 표시해 준다는 것이다. 브라우져의 종류 선택부분을 만들기 위해 위치할 칸에서 Insert List/Menu버튼을 누르고 Type은 Menu로 체크후 List Values를 누르고, 그림과 같이 대화상자를 구성하면 된다. 이때 Value값은 나중에 값을 저장했다가 전달하는 역활을 하므로 나름대로 지정해주면 되겠다. 위에서 만든 메뉴와 리스트의 차이점은 리스트는 여러개를 보여주고 선택하는 것이 가능하다는 것이다. 위와 같은 절차로 하되 Property Inspector에서 Type을 리스트로 선택하고 높이와 여러항목을 선택할 수 있도록 하는 Allow Multiple에 체크해주면 된다.

방문목적과 방문횟수에는 check box와 radio button이 사용되었는데, 각각은 모두 Object Pallete에서 Insert Check Box와 Insert Radio Button을 누르거나 메뉴의 Insert > Form Object에서 선택하면 된다. 둘의 차이점이라면 전자는 복수항목을 선택할 수 있다는 것이고, 후자는 1개만을 선택할 때 쓰인다는 것이다. Init State은 화면에 보여질때 체크상태로 보여줄 것인지 아닌지를 선택한다.

이제 예제의 대부분이 완성되었다. 아래 셀로 이동해서 처음에 아이디와 비밀번호를 적기위해 사용하였던 Insert Text Field버튼을 한번 더 누르고, Type에 Multi line을 선택해준다. 그리고 Char width, Num lines에 각각 30과 8을 입력시키면 같은 크기의 Text Area를 만들 수 있다.