Part-02 드림위버 활용 sec-03 폼 및 폼 요소 활용 컴퓨터정보과
폼(Form) 및 폼 요소 활용
1. 웹 문서와 폼(Form)개요 Form 웹 문서에서 폼 활용 (공식 문서의 ) 서식 로그인, 게시판, 방명록, 웹 메일, 쇼핑 주문서, 수강 신청서와 같이 방문자가 데이터를 입력하거나 선택할 경우 사용되는 웹 상의 양 식 문서 웹 문서에서 폼 활용 HTML 문서에서 다양한 UI(User Interface) 요소 배치 텍스트 필드 / 텍스트 영역필드 이미지 필드 라디오 버튼, 체크박스, 필드 세트 리스트 메뉴
2.폼 관련 태그 폼 태그 웹 페이지에서 사용자에게 정보를 입력받는 형식 사용자에게 받은 정보를 서버에게 전달하는 동적인 처리 가능 <form> 태그 종류 : 텍스트 입력, 체크박스, 목록상자 등 폼 태그 형식 method : 전송 방식 지정 get, post 사용 action : 폼 양식에 입력된 값을 처리할 서버 프로그램명 지정 PHP, JSP, ASP, C 등 <form name="폼이름" action="연결될 서버 프로그램명 “ method="전송방식"> <input type= ................... > <select> .......................</select> <textarea>.....................</textarea> </form>
name size maxlength value title Input 형식 텍스트 입력 시 사용하는 형태 입력 종류 속성 <form> <input type= "입력종류" name="이름" size="길이" value="기본 문자열"> </form> 기능 속성 사용 예 text name size maxlength value title 이름 화면에 나타날 크기 최대 입력 글자수 기본 문자값 설명문 <input type=“text” size=“10” value=“학생”> // password <input type=“password” size=“10”>
<계속> 기능 속성 사용 예 radio name value checked 이름 선택한 값을 서버에 전달 초기 체크 표시 <input type=“radio” checked> // checkbox <input type=“checkbox” checked> // button name value 이름 버튼 위에 표기할 문자 <input type=“button” value=“전송”> // submit <input type=“submit” value=“쿼리전송”> // reset <input type=“reset” value=“원래대로”> // file <input type=“file” value=“찾아보기”> // image name value src 이름 사용할 이미지 파일 설정 <input type=“image” value=“버튼” src=“button.gif”> // hidden 이름 초기값 <input type=“hidden” value=“홍길동”> //보이지 않는 형식
[기본예제 1] 폼 태그 연습 <html><head><title>폼 연습</title></head> <body> <form > <table border=0 align=center cellspacing=1 bgcolor="#dcdcdc"> <tr><td colspan=2 ><img src="title.gif" width=476 border=0></b> </td> </tr> <tr align=center><td colspan=2 ><b>회원 로그인 </b><br><br> </td></tr> <tr align=center><td>아이디</td><td><input type="text" size="15"> </td> <tr align=center> <td>비밀번호</td><td><input type="password" size="15"></td> <td colspan=2 ><input type="submit" value="전송"> <input type="reset" value="전송"></td> </table> </form> </body></html> 테이블 설정 셀을 합친 후 이미지 호출 제목과 입력창 설정
[응용예제 2] 폼 태그 연습 <table border=0 align=center cellspacing=1 bgcolor="#dcdcdc"> <tr align=center><td colspan=2>회원 가입 </td></tr> <tr align=center><td colspan=2 ><img src="title.gif"></td></tr> <tr><td align=center>아이디</td><td><input type=text name=id size=12 maxlength=12></td></tr> <tr><td align=center>패스워드</td><td><input type=password name=pw size=12 maxlength=8></td></tr> <tr><td align=center>성별</td><td><input type= [ ① ] name=sex value=1>남<input type= [ ① ] name=sex value=2 checked>여</td></tr> <tr><td align=center>국적</td><td><input type=text value= 대한민국 ><input type=button value=국적변경></td></tr> 이미지를 불러옴 패스워드 형식 radio radio 형식
3. 드롭-다운 폼 관련 태그 Select 형식 목록상자 입력 형식에 사용되는 태그 <option> 태그로 하위 목록 리스트 표현 사용 가능한 속성 name : 이름 value : 목록 선택 시 전송될 값 selected : 최초에 설정된 기본값 size : 목록상자의 크기 지정 multiple : 동시에 2개 이상의 기본값을 지정할 수 있음 <form> <select name="이름"> <option value="해당 목록선택 시 전송될 값"> 화면에 표시할 내용 ....................... </select> </form>
4. 폼 관련 태그 Textarea 형식 여러 줄의 입력을 가능하게 하는 형식 <form> name : 이름 rows : 입력 가능한 전체 행의 수 cols : 입력 가능한 전체 열의 수 wrap : 자동 줄바꿈 사용 physical : 화면상의 줄바꿈 상태 그대로 서버에 전송 virtual : 화면상에서는 줄바꿈되지만, 서버로 전송될 때는 한 줄로 이어서 전 송 <form> <textarea name="이름" rows="행의 수" cols="열의 수"> ..................... </textarea> </form>
[기본예제 3] 폼 태그 연습 <html><head><title>폼 연습</title></head> <body ><form > <table border=0 align=center cellspacing=1 bgcolor="#dcdcdc"> <tr align=center><td colspan=2>간단한 프로필 가 입</td></tr> <tr><td align=center>휴대폰</td> <td> <select name=phone1> <option value=1 SELECTED>011</option> <option value=2>016</option> <option value=3>017</option> <option value=4>018</option> <option value=5>010</option> </select> </tr> <tr><td align=center>자기 소개</td> <td><textarea cols=50 rows=15 name=memo>하고싶은말을 쓰세요. ^^</textarea></td> <tr><td colspan=2 align=center><input type=submit value=가입> <input type=reset value=재작성></td></tr> </table> </form></body></html> 콤보박스 생성 메일창 생성
5. Dreamweaver 로 폼 입력 [Insert][Form][Form] 1) 폼 생성 후 ID 입력 2) 표 삽입 3) 관련 폼 아이템 삽입
1) 폼 정의 [PROPERTIES] 패널 ■ 폼 정의 삽입과 특징 [Insert]-[Form]-[Form] 메뉴 클릭하여 삽입. 삽입 폼은 디자인 모드 편집창에서 빨간색 점선으로 표시 폼 정의 않고 텍스트 필드, 라디오 버튼, 체크 박스와 같은 폼 양식 요소 삽입 시 전송이나 취소 역할을 하는 폼 버튼이나 이미지 필드를 클릭했을 경우 제대로 실행이 되지 않음. ■ 폼 관련 [PROPERTIES] 패널 폼 전체를 정의하는 폼 삽입 후 나타나는 빨간색 점선 Form ID : 폼 문서의 이름 표시. Action : 전송 기능 역할을 하는 폼 버튼이나 이미지 필드를 클릭했을 경우 폼 문서 데이터를 처리할 수 있는 웹 프로그램 경로 지정. Target : [Action]에서 지정한 웹 프로그램 실행의 타겟 지정. Class : 폼에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용. Method : 데이터 값을 전달하는 방식으로 [GET]과 [POST] 방식 중 하나 선택. Enctype : 데이터의 인코딩 방식을 지정.
2) 텍스트필드 폼 [Insert]-[Form]-[Textfield] 메뉴 클릭 한 줄 텍스트필드와 암호텍스트필드 텍스트영역필드
[Input Tag Accessibility Attributes]
■ Single line 텍스트 영역 필드 [PROPERTIES] 패널 TextField : 텍스트 필드의 이름 표시. Char width : 텍스트 필드의 가로 크기 지정. Max chars : [Type]에서 [Single line]이나 [Password] 선택 시 표시, 입력 가능 최대 글자 수를 지정. Num lines : [Type]에서 [Multi line] 선택 시 표시, 텍스트 영역 필드의 세로 줄 수 지정. Type : 텍스트 필드 종류 지정. Init val : 텍스트 필드의 초기 텍스트로 표시되는 텍스트 입력. Class : 텍스트 필드에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용. Disabled : 선택 상태일 경우 텍스트 필드 안에 텍스트를 입력할 수 없게 지정. 또한 텍스트 필드가 비활성화되어 선택할 수 없다. Read-only : 선택 상태일 경우 텍스트 필드 안에 텍스트를 입력할 수 없고, 읽기 전용만 텍스트 필드가 지정.
■ Multiline 텍스트 영역 필드 [PROPERTIES] 패널 TextField : 텍스트 영역 필드의 이름 표시. Char width : 텍스트 영역 필드의 가로 크기 지정. Num lines : 텍스트 영역 필드의 세로 줄 수 지정. Type : 텍스트 영역 필드의 경우 [Multiline]으로 지정되어 있으며, 한줄 텍스트 필드의 경우에는 [Single line], 암호 텍스트 필드의 경우에는 [Password]로 지정. Init val : 텍스트 영역 필드 안에 표시되는 초기 텍스트를 입력. Class : 텍스트 필드에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용. Disabled : 선택하면 텍스트 영역 필드안에 데이터를 입력할 수 없게 됨. Read-only : 선택하면 텍스트 영역 필드안에 데이터를 입력할 수 없게 되며 읽기 전용 지정.
3)파일 필드 삽입 - 텍스트 필드와 함께 파일을 선택할 수 있는 윈도우 탐색기 대화 상자 표시 ■ 파일 필드 삽입과 특징 - 텍스트 필드와 함께 파일을 선택할 수 있는 윈도우 탐색기 대화 상자 표시 - 파일 필드는 [Insert]-[Form]-[File Field] 메뉴 클릭하여 삽입. 파일 필드의 경우 폼 문서에 파일을 첨부하여 웹 서버에 전송하는 기능 담당 [Browse] 버튼 표시 텍스트는 설치된 웹브라우저의 언어에 따라 다르게 표시. 한국어로 표시된 웹 브라우저의 경우에는 [찾아보기]로 표시. ■ 파일 필드 관련 [PROPERTIES] 패널 FileField : 파일 필드의 이름 표시. Char width : 파일 필드의 가로 크기 지정. Max chars : 파일 필드 안에 입력되는 최대 글자 수 지정. Class : 파일에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용.
4)라디오버튼 삽입 Radio Button: 라디오 버튼의 이름 표시. ■ 라디오버튼 삽입과 특징 - 방문자가 하나의 목록만 선택할 수 있는 항목에 사용. - 같은 그룹에서 다른 라디오 버튼 목록을 클릭 선택하면, 선택 상태 라디오 버튼은 자동 해제. [Insert]-[Form]-[Radio Button] 메뉴 클릭하여 한 개씩 삽입 [Insert]-[Form]-[Radio Group] 메뉴 클릭한 후 그룹 지어 아이템 목록을 여러개 삽입 가능. ■ 라디오버튼 관련 [PROPERTIES] 패널 Radio Button: 라디오 버튼의 이름 표시. Checked value : 선택했을 때 실제로 서버에 전송되는 데이터. Initial: [Checked]를 선택하면 라디오 버튼이 선택 상태로 표시. Class : 등록한 클래스 선택자를 선택하여 CSS 적용.
5) 체크박스 삽입 ■ 체크박스 삽입과 특징 라디오 버튼과는 다르게 그룹 안의 여러 목록을 다중 선택 가능. 체크 박스 클릭 시 선택과 해제를 반복 실행하는 토글(toggle) 기능 적용. 체크 박스는 [Insert]-[Form]-[Checkbox] 메뉴를 클릭하여 한개씩 삽입 [Insert]-[Form]-[Checkbox Group] 메뉴 클릭한 후 대화 상자를 이용하여 그룹을 지어 아이템 목록을 여러개 삽입 ■ 체크박스 관련 [PROPERTIES] 패널 Checkbox name : 체크 박스의 이름 표시. Checked value : 선택했을 때 실제로 서버에 전송되는 데이터. Initial : [Checked]를 선택하면 체크 박스가 선택 상태로 표시. Class : 등록한 클래스 선택자를 선택하여 CSS 적용.
6) 리스트메뉴 삽입 ■ 리스트메뉴 삽입과 특징 [Insert]-[Form]-[Select(List/Menu)] 메뉴를 클릭하여 삽입 화살표 부분을 클릭 시 선택 가능한 아이템 목록이 펼쳐짐 또한 ‘List' 형태로 변경한 후 세로 높이 지정하여 아이템 목록이 스크롤바와 함께 표시되게도 변경가능함. 리스트 메뉴 방식
■ 리스트메뉴와 관련된 [PROPERTIES] 패널 Select : 리스트 메뉴의 이름 표시. Type : [Menu]로 지정하면 드롭다운 형태로 구성 아이템 목록을 표시하며, [List]로 지정하면 높이를 지정하는 [Height] 속성과 함께 구성 아이템 목록을 스크롤바와 함께 표시. Height : [Type]을 [List]로 선택하면 표시됩니다. 리스트 메뉴의 높이를 지정. Selections Allow multiple : [Type]을 [List]로 선택하면 표시되며 구성 아이템 목록에서 다중 선택 가능. [List Values] : 리스트 메뉴를 구성하는 아이템 목록을 추가/삭제 편집할 수 있는 [List Values] 대화상자 표시. Class : 리스트 메뉴에 등록한 클래스 선택자 목록을 선택하여 스타일시트를 적용. Initially selected : 리스트 메뉴 아이템 목록에서 초기 선택 상태로 지정되는 아이템 목록을 지정할 때 사용.
7) 점프 메뉴 리스트 메뉴에 하이퍼링크 지정 가능 [Insert][Form][Jump Menu] 리스트 아이템 지정 연결 URL 지정 항목 추가/삭제 항목 순서조정
여기에 수식을 입력하십시오.
8) 폼 버튼 삽입 ■ 폼 버튼 삽입과 특징 [Insert]-[Form]-[Button] 메뉴 클릭하여 삽입 삽입 폼 버튼은 [Properties]패널의 [Action] 속성 에서 선택한 목록에 따라 폼 문서 전체에 입력된 데이터를 전송하는 [Submit] , 방문자가 입력한 데이터를 초기화 시키는 [Reset], 아무 기능없이 폼 버튼로만 삽입되는 [none]이 있다. ■ 폼 버튼 관련된 [PROPERTIES] 패널 Button name : 폼 버튼의 이름을 표시. Value : 폼 버튼에 표시되는 텍스트를 지정. Action : 폼 버튼의 종류를 선택. Submit form은 데이터의 전송, Reset form은 데이터의 초기화, None은 아무런 기능 없이 이미지 처럼 삽입. Class : 폼 버튼에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용.
[응용예제 4] 폼 태그 연습 <html><head><title>폼 연습</title></head> <body > <form> <table background="bg5.gif" width="601" cellspacing=0 cellpadding=0 border=0 align=center><tr><td> <table cellspacing=0 cellpadding=5 width="100%" border=1> <tr><td>제목 </td><td colspan=4><input type="text" size=60> </td></tr> <tr><td>아이디</td> <td ><input type="text" size=15> </td> <td>비밀<br>번호</td><td><input type="password" size=15> </td> <[ ① ]=5></td></tr><tr><td>주민<br> 번호</td> <td> <input type="text" size=6>-<input type="text" size=7></td> <td>메일<br>주소 </td><td ><input type="text" size=20></td> </tr> <tr><td>오피스</td> <td > <input type="text" size=3> <input type="text" size=4>
[응용예제 4] 폼 태그 연습 12 <input type="text" size=4></td><td>핸드폰 </td> 13 <td ><select> 14 <option>011<option>010<option>016<option>017<option>019 </select> 15 <input type="text" size=4>-<input type="text" size=4></td></tr> 16 <tr><td>관심 <br>분야</td> 17 <td colspan= [②]><input type="radio">부동산<input type="radio">엔터 테인먼트 18 <[ ③ ] ="radio">재태크<input type="radio">결혼 19 <input type=" [ ④ ] ">학업 및 진로</td></tr> 20 <tr><td>상담<br>내용</td><td colspan=3> 21 < [ ⑤ ] rows="5" cols="65"></ [ ⑤ ] ></td></tr></table> </td></tr> 22 <tr ><td align=middle> 상담 신청 내용은 신속히 처리하여 통보해 드립니다. 23 </td></tr></table></form></body></html>
폼 종합실습 Ex3-1.htm