Download presentation
Presentation is loading. Please wait.
1
Part-02 드림위버 활용 sec-03 폼 및 폼 요소 활용
컴퓨터정보과
2
폼(Form) 및 폼 요소 활용
3
1. 웹 문서와 폼(Form)개요 Form 웹 문서에서 폼 활용 (공식 문서의 ) 서식
로그인, 게시판, 방명록, 웹 메일, 쇼핑 주문서, 수강 신청서와 같이 방문자가 데이터를 입력하거나 선택할 경우 사용되는 웹 상의 양 식 문서 웹 문서에서 폼 활용 HTML 문서에서 다양한 UI(User Interface) 요소 배치 텍스트 필드 / 텍스트 영역필드 이미지 필드 라디오 버튼, 체크박스, 필드 세트 리스트 메뉴
4
2.폼 관련 태그 폼 태그 웹 페이지에서 사용자에게 정보를 입력받는 형식
사용자에게 받은 정보를 서버에게 전달하는 동적인 처리 가능 <form> 태그 종류 : 텍스트 입력, 체크박스, 목록상자 등 폼 태그 형식 method : 전송 방식 지정 get, post 사용 action : 폼 양식에 입력된 값을 처리할 서버 프로그램명 지정 PHP, JSP, ASP, C 등 <form name="폼이름" action="연결될 서버 프로그램명 “ method="전송방식"> <input type= > <select> </select> <textarea> </textarea> </form>
5
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”>
6
<계속> 기능 속성 사용 예 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=“홍길동”> //보이지 않는 형식
7
[기본예제 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> 테이블 설정 셀을 합친 후 이미지 호출 제목과 입력창 설정
![[기본예제 1] 폼 태그 연습 <html><head><title>폼 연습</title></head> <body> <form > <table border=0 align=center cellspacing=1 bgcolor= #dcdcdc >](http://slidesplayer.org/slide/15979024/88/images/7/%5B%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C+1%5D+%ED%8F%BC+%ED%83%9C%EA%B7%B8+%EC%97%B0%EC%8A%B5+%3Chtml%3E%3Chead%3E%3Ctitle%3E%ED%8F%BC+%EC%97%B0%EC%8A%B5%3C%2Ftitle%3E%3C%2Fhead%3E+%3Cbody%3E+%3Cform+%3E+%3Ctable+border%3D0+align%3Dcenter+cellspacing%3D1+bgcolor%3D+%23dcdcdc+%3E.jpg "<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> 테이블 설정. 셀을 합친 후 이미지 호출. 제목과 입력창 설정.")
8
[응용예제 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 형식
![[응용예제 2] 폼 태그 연습 <table border=0 align=center cellspacing=1 bgcolor= #dcdcdc > <tr align=center><td colspan=2>회원 가입 </td></tr>](http://slidesplayer.org/slide/15979024/88/images/8/%5B%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C+2%5D+%ED%8F%BC+%ED%83%9C%EA%B7%B8+%EC%97%B0%EC%8A%B5+%3Ctable+border%3D0+align%3Dcenter+cellspacing%3D1+bgcolor%3D+%23dcdcdc+%3E+%3Ctr+align%3Dcenter%3E%3Ctd+colspan%3D2%3E%ED%9A%8C%EC%9B%90+%EA%B0%80%EC%9E%85+%3C%2Ftd%3E%3C%2Ftr%3E.jpg "<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 형식.")
9
3. 드롭-다운 폼 관련 태그 Select 형식 목록상자 입력 형식에 사용되는 태그
<option> 태그로 하위 목록 리스트 표현 사용 가능한 속성 name : 이름 value : 목록 선택 시 전송될 값 selected : 최초에 설정된 기본값 size : 목록상자의 크기 지정 multiple : 동시에 2개 이상의 기본값을 지정할 수 있음 <form> <select name="이름"> <option value="해당 목록선택 시 전송될 값"> 화면에 표시할 내용 </select> </form>
10
4. 폼 관련 태그 Textarea 형식 여러 줄의 입력을 가능하게 하는 형식 <form>
name : 이름 rows : 입력 가능한 전체 행의 수 cols : 입력 가능한 전체 열의 수 wrap : 자동 줄바꿈 사용 physical : 화면상의 줄바꿈 상태 그대로 서버에 전송 virtual : 화면상에서는 줄바꿈되지만, 서버로 전송될 때는 한 줄로 이어서 전 송 <form> <textarea name="이름" rows="행의 수" cols="열의 수"> </textarea> </form>
11
[기본예제 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> 콤보박스 생성 메일창 생성
![[기본예제 3] 폼 태그 연습 <html><head><title>폼 연습</title></head> <body ><form > <table border=0 align=center cellspacing=1 bgcolor= #dcdcdc >](http://slidesplayer.org/slide/15979024/88/images/11/%5B%EA%B8%B0%EB%B3%B8%EC%98%88%EC%A0%9C+3%5D+%ED%8F%BC+%ED%83%9C%EA%B7%B8+%EC%97%B0%EC%8A%B5+%3Chtml%3E%3Chead%3E%3Ctitle%3E%ED%8F%BC+%EC%97%B0%EC%8A%B5%3C%2Ftitle%3E%3C%2Fhead%3E+%3Cbody+%3E%3Cform+%3E+%3Ctable+border%3D0+align%3Dcenter+cellspacing%3D1+bgcolor%3D+%23dcdcdc+%3E.jpg "<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> 콤보박스 생성. 메일창 생성.")
12
5. Dreamweaver 로 폼 입력 [Insert][Form][Form] 1) 폼 생성 후 ID 입력 2) 표 삽입
3) 관련 폼 아이템 삽입
![5. Dreamweaver 로 폼 입력 [Insert][Form][Form] 1) 폼 생성 후 ID 입력 2) 표 삽입](http://slidesplayer.org/slide/15979024/88/images/12/5.+Dreamweaver+%EB%A1%9C+%ED%8F%BC+%EC%9E%85%EB%A0%A5+%5BInsert%5D%EF%83%A0%5BForm%5D%EF%83%A0%5BForm%5D+1%29+%ED%8F%BC+%EC%83%9D%EC%84%B1+%ED%9B%84+ID+%EC%9E%85%EB%A0%A5+2%29+%ED%91%9C+%EC%82%BD%EC%9E%85.jpg "3) 관련 폼 아이템 삽입.")
13
1) 폼 정의 [PROPERTIES] 패널 ■ 폼 정의 삽입과 특징
[Insert]-[Form]-[Form] 메뉴 클릭하여 삽입. 삽입 폼은 디자인 모드 편집창에서 빨간색 점선으로 표시 폼 정의 않고 텍스트 필드, 라디오 버튼, 체크 박스와 같은 폼 양식 요소 삽입 시 전송이나 취소 역할을 하는 폼 버튼이나 이미지 필드를 클릭했을 경우 제대로 실행이 되지 않음. ■ 폼 관련 [PROPERTIES] 패널 폼 전체를 정의하는 폼 삽입 후 나타나는 빨간색 점선 Form ID : 폼 문서의 이름 표시. Action : 전송 기능 역할을 하는 폼 버튼이나 이미지 필드를 클릭했을 경우 폼 문서 데이터를 처리할 수 있는 웹 프로그램 경로 지정. Target : [Action]에서 지정한 웹 프로그램 실행의 타겟 지정. Class : 폼에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용. Method : 데이터 값을 전달하는 방식으로 [GET]과 [POST] 방식 중 하나 선택. Enctype : 데이터의 인코딩 방식을 지정.
![1) 폼 정의 [PROPERTIES] 패널 ■ 폼 정의 삽입과 특징](http://slidesplayer.org/slide/15979024/88/images/13/1%29+%ED%8F%BC+%EC%A0%95%EC%9D%98+%5BPROPERTIES%5D+%ED%8C%A8%EB%84%90+%E2%96%A0+%ED%8F%BC+%EC%A0%95%EC%9D%98+%EC%82%BD%EC%9E%85%EA%B3%BC+%ED%8A%B9%EC%A7%95.jpg "[Insert]-[Form]-[Form] 메뉴 클릭하여 삽입. 삽입 폼은 디자인 모드 편집창에서 빨간색 점선으로 표시. 폼 정의 않고 텍스트 필드, 라디오 버튼, 체크 박스와 같은 폼 양식 요소 삽입 시 전송이나 취소 역할을 하는 폼 버튼이나 이미지 필드를 클릭했을 경우 제대로 실행이 되지 않음. ■ 폼 관련 [PROPERTIES] 패널. 폼 전체를 정의하는 폼 삽입 후 나타나는. 빨간색 점선. Form ID : 폼 문서의 이름 표시. Action : 전송 기능 역할을 하는 폼 버튼이나 이미지 필드를 클릭했을 경우 폼 문서 데이터를 처리할 수 있는 웹 프로그램 경로 지정. Target : [Action]에서 지정한 웹 프로그램 실행의 타겟 지정. Class : 폼에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용. Method : 데이터 값을 전달하는 방식으로 [GET]과 [POST] 방식 중 하나 선택. Enctype : 데이터의 인코딩 방식을 지정.")
14
2) 텍스트필드 폼 [Insert]-[Form]-[Textfield] 메뉴 클릭 한 줄 텍스트필드와 암호텍스트필드
텍스트영역필드
![2) 텍스트필드 폼 [Insert]-[Form]-[Textfield] 메뉴 클릭 한 줄 텍스트필드와 암호텍스트필드](http://slidesplayer.org/slide/15979024/88/images/14/2%29+%ED%85%8D%EC%8A%A4%ED%8A%B8%ED%95%84%EB%93%9C+%ED%8F%BC+%5BInsert%5D-%5BForm%5D-%5BTextfield%5D+%EB%A9%94%EB%89%B4+%ED%81%B4%EB%A6%AD+%ED%95%9C+%EC%A4%84+%ED%85%8D%EC%8A%A4%ED%8A%B8%ED%95%84%EB%93%9C%EC%99%80+%EC%95%94%ED%98%B8%ED%85%8D%EC%8A%A4%ED%8A%B8%ED%95%84%EB%93%9C.jpg "텍스트영역필드.")
15
[Input Tag Accessibility Attributes]
![[Input Tag Accessibility Attributes]](http://slidesplayer.org/slide/15979024/88/images/15/%5BInput+Tag+Accessibility+Attributes%5D.jpg "[Input Tag Accessibility Attributes]")
16
■ Single line 텍스트 영역 필드 [PROPERTIES] 패널
TextField : 텍스트 필드의 이름 표시. Char width : 텍스트 필드의 가로 크기 지정. Max chars : [Type]에서 [Single line]이나 [Password] 선택 시 표시, 입력 가능 최대 글자 수를 지정. Num lines : [Type]에서 [Multi line] 선택 시 표시, 텍스트 영역 필드의 세로 줄 수 지정. Type : 텍스트 필드 종류 지정. Init val : 텍스트 필드의 초기 텍스트로 표시되는 텍스트 입력. Class : 텍스트 필드에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용. Disabled : 선택 상태일 경우 텍스트 필드 안에 텍스트를 입력할 수 없게 지정. 또한 텍스트 필드가 비활성화되어 선택할 수 없다. Read-only : 선택 상태일 경우 텍스트 필드 안에 텍스트를 입력할 수 없고, 읽기 전용만 텍스트 필드가 지정.
![■ Single line 텍스트 영역 필드 [PROPERTIES] 패널](http://slidesplayer.org/slide/15979024/88/images/16/%E2%96%A0+Single+line+%ED%85%8D%EC%8A%A4%ED%8A%B8+%EC%98%81%EC%97%AD+%ED%95%84%EB%93%9C+%5BPROPERTIES%5D+%ED%8C%A8%EB%84%90.jpg "TextField : 텍스트 필드의 이름 표시. Char width : 텍스트 필드의 가로 크기 지정. Max chars : [Type]에서 [Single line]이나 [Password] 선택 시 표시, 입력 가능 최대 글자 수를 지정. Num lines : [Type]에서 [Multi line] 선택 시 표시, 텍스트 영역 필드의 세로 줄 수 지정. Type : 텍스트 필드 종류 지정. Init val : 텍스트 필드의 초기 텍스트로 표시되는 텍스트 입력. Class : 텍스트 필드에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용. Disabled : 선택 상태일 경우 텍스트 필드 안에 텍스트를 입력할 수 없게 지정. 또한 텍스트 필드가 비활성화되어 선택할 수 없다. Read-only : 선택 상태일 경우 텍스트 필드 안에 텍스트를 입력할 수 없고, 읽기 전용만 텍스트 필드가 지정.")
17
■ Multiline 텍스트 영역 필드 [PROPERTIES] 패널
TextField : 텍스트 영역 필드의 이름 표시. Char width : 텍스트 영역 필드의 가로 크기 지정. Num lines : 텍스트 영역 필드의 세로 줄 수 지정. Type : 텍스트 영역 필드의 경우 [Multiline]으로 지정되어 있으며, 한줄 텍스트 필드의 경우에는 [Single line], 암호 텍스트 필드의 경우에는 [Password]로 지정. Init val : 텍스트 영역 필드 안에 표시되는 초기 텍스트를 입력. Class : 텍스트 필드에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용. Disabled : 선택하면 텍스트 영역 필드안에 데이터를 입력할 수 없게 됨. Read-only : 선택하면 텍스트 영역 필드안에 데이터를 입력할 수 없게 되며 읽기 전용 지정.
![■ Multiline 텍스트 영역 필드 [PROPERTIES] 패널](http://slidesplayer.org/slide/15979024/88/images/17/%E2%96%A0+Multiline+%ED%85%8D%EC%8A%A4%ED%8A%B8+%EC%98%81%EC%97%AD+%ED%95%84%EB%93%9C+%5BPROPERTIES%5D+%ED%8C%A8%EB%84%90.jpg "TextField : 텍스트 영역 필드의 이름 표시. Char width : 텍스트 영역 필드의 가로 크기 지정. Num lines : 텍스트 영역 필드의 세로 줄 수 지정. Type : 텍스트 영역 필드의 경우 [Multiline]으로 지정되어 있으며, 한줄 텍스트 필드의 경우에는 [Single line], 암호 텍스트 필드의 경우에는 [Password]로 지정. Init val : 텍스트 영역 필드 안에 표시되는 초기 텍스트를 입력. Class : 텍스트 필드에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용. Disabled : 선택하면 텍스트 영역 필드안에 데이터를 입력할 수 없게 됨. Read-only : 선택하면 텍스트 영역 필드안에 데이터를 입력할 수 없게 되며 읽기 전용 지정.")
18
3)파일 필드 삽입 - 텍스트 필드와 함께 파일을 선택할 수 있는 윈도우 탐색기 대화 상자 표시
■ 파일 필드 삽입과 특징 - 텍스트 필드와 함께 파일을 선택할 수 있는 윈도우 탐색기 대화 상자 표시 - 파일 필드는 [Insert]-[Form]-[File Field] 메뉴 클릭하여 삽입. 파일 필드의 경우 폼 문서에 파일을 첨부하여 웹 서버에 전송하는 기능 담당 [Browse] 버튼 표시 텍스트는 설치된 웹브라우저의 언어에 따라 다르게 표시. 한국어로 표시된 웹 브라우저의 경우에는 [찾아보기]로 표시. ■ 파일 필드 관련 [PROPERTIES] 패널 FileField : 파일 필드의 이름 표시. Char width : 파일 필드의 가로 크기 지정. Max chars : 파일 필드 안에 입력되는 최대 글자 수 지정. Class : 파일에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용.
19
4)라디오버튼 삽입 Radio Button: 라디오 버튼의 이름 표시.
■ 라디오버튼 삽입과 특징 - 방문자가 하나의 목록만 선택할 수 있는 항목에 사용. - 같은 그룹에서 다른 라디오 버튼 목록을 클릭 선택하면, 선택 상태 라디오 버튼은 자동 해제. [Insert]-[Form]-[Radio Button] 메뉴 클릭하여 한 개씩 삽입 [Insert]-[Form]-[Radio Group] 메뉴 클릭한 후 그룹 지어 아이템 목록을 여러개 삽입 가능. ■ 라디오버튼 관련 [PROPERTIES] 패널 Radio Button: 라디오 버튼의 이름 표시. Checked value : 선택했을 때 실제로 서버에 전송되는 데이터. Initial: [Checked]를 선택하면 라디오 버튼이 선택 상태로 표시. Class : 등록한 클래스 선택자를 선택하여 CSS 적용.
20
5) 체크박스 삽입 ■ 체크박스 삽입과 특징 라디오 버튼과는 다르게 그룹 안의 여러 목록을 다중 선택 가능.
체크 박스 클릭 시 선택과 해제를 반복 실행하는 토글(toggle) 기능 적용. 체크 박스는 [Insert]-[Form]-[Checkbox] 메뉴를 클릭하여 한개씩 삽입 [Insert]-[Form]-[Checkbox Group] 메뉴 클릭한 후 대화 상자를 이용하여 그룹을 지어 아이템 목록을 여러개 삽입 ■ 체크박스 관련 [PROPERTIES] 패널 Checkbox name : 체크 박스의 이름 표시. Checked value : 선택했을 때 실제로 서버에 전송되는 데이터. Initial : [Checked]를 선택하면 체크 박스가 선택 상태로 표시. Class : 등록한 클래스 선택자를 선택하여 CSS 적용.
21
6) 리스트메뉴 삽입 ■ 리스트메뉴 삽입과 특징 [Insert]-[Form]-[Select(List/Menu)] 메뉴를 클릭하여 삽입 화살표 부분을 클릭 시 선택 가능한 아이템 목록이 펼쳐짐 또한 ‘List' 형태로 변경한 후 세로 높이 지정하여 아이템 목록이 스크롤바와 함께 표시되게도 변경가능함. 리스트 메뉴 방식
![6) 리스트메뉴 삽입 ■ 리스트메뉴 삽입과 특징. [Insert]-[Form]-[Select(List/Menu)] 메뉴를 클릭하여 삽입. 화살표 부분을 클릭 시 선택 가능한 아이템 목록이 펼쳐짐.](http://slidesplayer.org/slide/15979024/88/images/21/6%29+%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A9%94%EB%89%B4+%EC%82%BD%EC%9E%85+%E2%96%A0+%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A9%94%EB%89%B4+%EC%82%BD%EC%9E%85%EA%B3%BC+%ED%8A%B9%EC%A7%95.+%5BInsert%5D-%5BForm%5D-%5BSelect%28List%2FMenu%29%5D+%EB%A9%94%EB%89%B4%EB%A5%BC+%ED%81%B4%EB%A6%AD%ED%95%98%EC%97%AC+%EC%82%BD%EC%9E%85.+%ED%99%94%EC%82%B4%ED%91%9C+%EB%B6%80%EB%B6%84%EC%9D%84+%ED%81%B4%EB%A6%AD+%EC%8B%9C+%EC%84%A0%ED%83%9D+%EA%B0%80%EB%8A%A5%ED%95%9C+%EC%95%84%EC%9D%B4%ED%85%9C+%EB%AA%A9%EB%A1%9D%EC%9D%B4+%ED%8E%BC%EC%B3%90%EC%A7%90..jpg "또한 ‘List 형태로 변경한 후 세로 높이 지정하여 아이템 목록이 스크롤바와 함께 표시되게도 변경가능함. 리스트 메뉴 방식.")
22
■ 리스트메뉴와 관련된 [PROPERTIES] 패널
Select : 리스트 메뉴의 이름 표시. Type : [Menu]로 지정하면 드롭다운 형태로 구성 아이템 목록을 표시하며, [List]로 지정하면 높이를 지정하는 [Height] 속성과 함께 구성 아이템 목록을 스크롤바와 함께 표시. Height : [Type]을 [List]로 선택하면 표시됩니다. 리스트 메뉴의 높이를 지정. Selections Allow multiple : [Type]을 [List]로 선택하면 표시되며 구성 아이템 목록에서 다중 선택 가능. [List Values] : 리스트 메뉴를 구성하는 아이템 목록을 추가/삭제 편집할 수 있는 [List Values] 대화상자 표시. Class : 리스트 메뉴에 등록한 클래스 선택자 목록을 선택하여 스타일시트를 적용. Initially selected : 리스트 메뉴 아이템 목록에서 초기 선택 상태로 지정되는 아이템 목록을 지정할 때 사용.
![■ 리스트메뉴와 관련된 [PROPERTIES] 패널](http://slidesplayer.org/slide/15979024/88/images/22/%E2%96%A0+%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A9%94%EB%89%B4%EC%99%80+%EA%B4%80%EB%A0%A8%EB%90%9C+%5BPROPERTIES%5D+%ED%8C%A8%EB%84%90.jpg "Select : 리스트 메뉴의 이름 표시. Type : [Menu]로 지정하면 드롭다운 형태로 구성 아이템 목록을 표시하며, [List]로 지정하면 높이를 지정하는 [Height] 속성과 함께 구성 아이템 목록을 스크롤바와 함께 표시. Height : [Type]을 [List]로 선택하면 표시됩니다. 리스트 메뉴의 높이를 지정. Selections Allow multiple : [Type]을 [List]로 선택하면 표시되며 구성 아이템 목록에서 다중 선택 가능. [List Values] : 리스트 메뉴를 구성하는 아이템 목록을 추가/삭제 편집할 수 있는 [List Values] 대화상자 표시. Class : 리스트 메뉴에 등록한 클래스 선택자 목록을 선택하여 스타일시트를 적용. Initially selected : 리스트 메뉴 아이템 목록에서 초기 선택 상태로 지정되는 아이템 목록을 지정할 때 사용.")
23
7) 점프 메뉴 리스트 메뉴에 하이퍼링크 지정 가능 [Insert][Form][Jump Menu] 리스트 아이템 지정
연결 URL 지정 항목 추가/삭제 항목 순서조정
![7) 점프 메뉴 리스트 메뉴에 하이퍼링크 지정 가능 [Insert][Form][Jump Menu] 리스트 아이템 지정](http://slidesplayer.org/slide/15979024/88/images/23/7%29+%EC%A0%90%ED%94%84+%EB%A9%94%EB%89%B4+%EB%A6%AC%EC%8A%A4%ED%8A%B8+%EB%A9%94%EB%89%B4%EC%97%90+%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC+%EC%A7%80%EC%A0%95+%EA%B0%80%EB%8A%A5+%5BInsert%5D%EF%83%A0%5BForm%5D%EF%83%A0%5BJump+Menu%5D+%EB%A6%AC%EC%8A%A4%ED%8A%B8+%EC%95%84%EC%9D%B4%ED%85%9C+%EC%A7%80%EC%A0%95.jpg "연결 URL 지정. 항목 추가/삭제. 항목 순서조정.")
24
여기에 수식을 입력하십시오.
25
8) 폼 버튼 삽입 ■ 폼 버튼 삽입과 특징 [Insert]-[Form]-[Button] 메뉴 클릭하여 삽입
삽입 폼 버튼은 [Properties]패널의 [Action] 속성 에서 선택한 목록에 따라 폼 문서 전체에 입력된 데이터를 전송하는 [Submit] , 방문자가 입력한 데이터를 초기화 시키는 [Reset], 아무 기능없이 폼 버튼로만 삽입되는 [none]이 있다. ■ 폼 버튼 관련된 [PROPERTIES] 패널 Button name : 폼 버튼의 이름을 표시. Value : 폼 버튼에 표시되는 텍스트를 지정. Action : 폼 버튼의 종류를 선택. Submit form은 데이터의 전송, Reset form은 데이터의 초기화, None은 아무런 기능 없이 이미지 처럼 삽입. Class : 폼 버튼에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용.
![8) 폼 버튼 삽입 ■ 폼 버튼 삽입과 특징 [Insert]-[Form]-[Button] 메뉴 클릭하여 삽입](http://slidesplayer.org/slide/15979024/88/images/25/8%29+%ED%8F%BC+%EB%B2%84%ED%8A%BC+%EC%82%BD%EC%9E%85+%E2%96%A0+%ED%8F%BC+%EB%B2%84%ED%8A%BC+%EC%82%BD%EC%9E%85%EA%B3%BC+%ED%8A%B9%EC%A7%95+%5BInsert%5D-%5BForm%5D-%5BButton%5D+%EB%A9%94%EB%89%B4+%ED%81%B4%EB%A6%AD%ED%95%98%EC%97%AC+%EC%82%BD%EC%9E%85.jpg "삽입 폼 버튼은 [Properties]패널의 [Action] 속성 에서 선택한 목록에 따라 폼 문서 전체에 입력된 데이터를 전송하는 [Submit] , 방문자가 입력한 데이터를 초기화 시키는 [Reset], 아무 기능없이 폼 버튼로만 삽입되는 [none]이 있다. ■ 폼 버튼 관련된 [PROPERTIES] 패널. Button name : 폼 버튼의 이름을 표시. Value : 폼 버튼에 표시되는 텍스트를 지정. Action : 폼 버튼의 종류를 선택. Submit form은 데이터의 전송, Reset form은 데이터의 초기화, None은 아무런 기능 없이 이미지 처럼 삽입. Class : 폼 버튼에 등록한 클래스 선택자 목록을 선택하여 스타일시트 적용.")
26
[응용예제 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] 폼 태그 연습](http://slidesplayer.org/slide/15979024/88/images/26/%5B%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C+4%5D+%ED%8F%BC+%ED%83%9C%EA%B7%B8+%EC%97%B0%EC%8A%B5.jpg "<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>")
27
[응용예제 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>
![[응용예제 4] 폼 태그 연습 12 <input type= text size=4></td><td>핸드폰 </td> 13 <td ><select>](http://slidesplayer.org/slide/15979024/88/images/27/%5B%EC%9D%91%EC%9A%A9%EC%98%88%EC%A0%9C+4%5D+%ED%8F%BC+%ED%83%9C%EA%B7%B8+%EC%97%B0%EC%8A%B5+12+%3Cinput+type%3D+text+size%3D4%3E%3C%2Ftd%3E%3Ctd%3E%ED%95%B8%EB%93%9C%ED%8F%B0+%3C%2Ftd%3E+13+%3Ctd+%3E%3Cselect%3E.jpg "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>")
28
폼 종합실습 Ex3-1.htm
Similar presentations
![HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.](/40/11068626/big_thumb.jpg "HTML + JavaScript UIT Series [Chapter 3] HTML 을 이용한 회원 정보 입력 양식 만들기.>")
