드림위버로 홈페이지 만들기

15. 폼

폼에 포함되는 오브젝트
. Text field : 텍스트를 입력받거나 보여줍니다.
. Button : 폼의 정보를 제출하거나 다시 구성하거나, 일반적인 레이블과 같은 용도로도 사용됩니다.
. Image field : submit 버튼을 대신해 사용할 수 있습니다.
. Check box : 한 그룹 내에서 여러 가지 옵션을 선택할 수 있도록 할 때 사용합니다.
. Radio button : 한 그룹 내에서 하나의 옵션만을 선택할 수 있도록 할 때 사용합니다.
. List menu : 사용자들이 선택할 수 있는 몇 가지 아이템을 리스트나 메뉴로 보여줍니다.
. File field : 사용자들의 하드 드라이브에서 파일을 찾아 폼 데이터로 업로드하게 할 때 사용합니다.
. Hidden field : 사용자와는 관계없지만 폼의 정보를 처리할 프로그램이 사용할 정보를 저장하고자 할 때 사용합니다.

폼만들기

. Insert>Form/ Objects 팔레트에서 Forms 패널 선택/ Objects 팔레트에서 Forms 패널을 마우스로 클릭한 후 문서 내로 드래그
. 폼을 선택한 후 Property inspector에서 폼 속성을 설정
Form : 폼 이름을 지정
Action : 폼의 정보를 처리할 서버측의 프로그램을 URL로 지정하거나, 폴더 아이콘을 클릭하여 파일을 지정하는 곳
Method : 폼의 데이터가 어떻게 처리될지를 정합니다.

오브젝트를 폼에 추가하기
. Insert> Form Object 삽입하고 싶은 오브젝트 선택.
폼의 경계선 안에 커서를 위치시킨 후, Objects 팔레트의 Forms 패널에서 원하는 오브젝트를 클릭하거나 원하는 위치로 오브젝트를 드래그.
. 오브젝트를 폼에 삽입했으면 Properties inspector를 이용하여 오브젝트의 속성을 정의해 주면 됩니다.

Text field 활용하기
Insert> Form Object > Text field
속성 설정은 Property inspector를 이용

Text field의 속성 살펴보기
. Text field : Text field의 이름을 설정
. Char Width : Text field에서 한 줄에 보여줄 최대 문자 수를 정함
. Max Chars : Type을 Single line을 택했을 때 Text field에 입력할 수 있는 최대 문자 수를 설정합니다.
. Num Lines : Type을 multiline으로 선택했을 때 Text field의 높이를 설정
Type을 multiline으로 선택하면 자동으로 스크롤바가 생김
. Type : Text field의 종류를 single-line, multiline, password 중의 하나로 선택
. Init Val : 웹 문서가 로드되면 처음에 보여줄 텍스트를 입력함

Button 활용하기
버튼을 문서에 삽입하려면 Insert> Form Object> Button

Button의 속성 살펴보기
. Button : 버튼의 이름을 입력. submit은 폼의 정보를 CGI에 전달하고, reset은 폼의 변경된 정보를 원래 상태로 되돌림
. Label : 버튼에 나타날 텍스트를 입력함
. Action : 버튼을 클릭하면 버튼이 어떤 일을 수행할지를 선택함.
None은 버튼을 클릭했을 때 다른 일반적인 작업을 수행하고자 하는 경우 사용합니다.

Image field 활용하기
Image field를 문서에 삽입하려면 Insert> Form Object> Image field 명령을 선택함

Image field의 속성 살펴보기
. ImageField : Image field의 이름을 입력함
. SRC : Image field의 소스 파일을 선택함
. Value : 폼에 제출될 때 서버에 전달할 값을 입력함
. Alt : 이미지를 대신하여 보여줄 텍스트를 입력함

Check box 활용하기
Check box를 문서에 삽입하려면 Insert> Form Object> Check box

Check box의 속성 살펴보기
. CheckBox : Check box의 이름을 설정함
. Checked Value : Check box가 선택되면 그 박스의 값을 설정함
이 값은 사용자가 submit 버튼을 클릭하면 서버측 프로그램(CGI script 등)에 전달됨
. Initial State : 웹 문서가 로드되면 Check box의 초기 상태를 체크한 상태로 할지 체크하지 않은 상태로 할지를 설정함

Radio button 활용하기
Insert> Form Object> Radio button

Radio button의 속성 살펴보기
. Radio Button : Radio button의 이름을 입력함
한 그룹 내의 Radio button의 이름은 똑같아야 합니다. 그래야 그룹 내에서 하나의 Radio button만 선택할 수 있습니다.
. Checked Value : Radio button이 선택되면 그 Radio button의 값이 설정됩니다. 이 값은 사용자가 submit 버튼을 클릭하면 서버측 애플리케이션에 전달됩니다. 그러므로 한 그룹 내 각 Radio button의 값을 서로 다르게 설정해 주어야 합니다.
. Initial State : 웹 문서가 로드되면 Radio button이 체크된 상태로 보여줄지, 체크되지 않은 상태로 보여줄지를 선택합니다. 한 그룹 내에서는 하나의 버튼만이 체크된 상태로 문서에 나타날 수 있습니다.

List menu 활용하기
Insert> Form Object> List menu

List menu의 속성 살펴보기
. List/Menu : 오브젝트의 이름을 입력함
. Type : List menu의 형형태를 팝업 메뉴로 할지, 스크롤되는 리스트로 할지를 선택합니다. 리스트를 선택하면 한 번에 몇 개의 아이템을 보여줄지를 Height 값을 통해 설정할 수 있으며, 여러 개의 아이템을 선택할 수 있는지 여부를 설정할 수 있습니다.
. List Values : 이 버튼을 클릭하면 Initial List Values 대화 상자가 나타납니다. 이 대화 상자를 통해 리스트 및 메뉴의 아이템을 등록할 수 있습니다. 각각의 아이템은 하나의 레이블과 하나의 값(value)을 가질 수 있습니다. 이 값은 서버에 보내질 수도 있으며, 아니면 자바 스크립트나 비주얼 베이직 스트립트에서 이용될 수 있습니다. 값(value)이 없으면 레이블이 스크립트 언어로 전달됩니다.
플러스와 마이너스 버튼은 아이템을 추가하거나 삭제하는데 사용합니다. 가장 위에 있는 아이템은 문서가 웹 브라우저에 로드되면 초기값으로 보이는 아이템이 됩니다. 위아래 화살표는 아이템의 순서를 바꿀 때 사용합니다.

List menu
List menu 우측의 화살표 버튼을 클릭하면 List menu를 볼 수 있습니다.

File field 활용하기
File field는 사용자들의 하드 드라이브에서 파일을 찾아 폼 데이터로 업로드하도록 할 때 사용합니다. File field를 문서에 삽입하려면 Insert> Form Object> File field 명령을 선택함

File field의 속성 살펴보기
. Char Width : File field에서 보여줄 수 있는 최대한의 문자 수를 입력합니다.
. Max Chars : File field에 입력될 수 있는 최대한의 문자 수를 입력합니다.
. Init Val : 초기에 보여줄 내용을 입력합니다.

Hidden field 활용하기
Hidden field는 사용자와는 관계없지만 폼의 정보를 처리할 프로그램이 사용할 정보를 저장하고자 할 때 사용합니다. Hidden field를 문서에 삽입하려면 Insert> Form Object> Hidden field 명령을 선택하면 됩니다. 그러면 Hidden field의 모습을 볼 수 있습니다.

Hidden field가 보이지 않으면
Edit> Preferences> Invisible Elements 명령을 선택하면 됩니다.
. HiddenField : Hidden field의 이름을 선택합니다. 필드의 이름은 다른 이름과 겹치면 안 됩니다.
. Value : Hidden field의 값을 설정합니다.