폼(Form) 오산대학 컴퓨터정보과 김 영 권
폼 태그 홈페이지에 방문한 사람이 입력한 정보를 서버로 전달 서버에 전달하는 방식이나 서버에서 가동 될 프로그램 등 지정 아이디 비밀번호 입력상자 체크 박스 라디오 버튼 펼침메뉴 …
<INPUT> 태그를 이용한 입력 양식의 소스 <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> <FORM> 성명 : <INPUT TYPE="TEXT" NAME="IRUM" VALUE="이름을 입력하세요" SIZE="30" MAXLENGTH="10"> </FORM> </BODY> </HTML>
<INPUT> 태그를 이용한 입력 양식의 소스 : 실행 결과
패스워드 입력 양식의 소스 <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> <FORM> 비밀번호 : <INPUT TYPE="PASSWORD" NAME="BIMIL" SIZE="50" MAXLENGTH="10"> </FORM> </BODY> </HTML>
패스워드 입력 양식의 소스 : 실행 결과
라디오버튼 입력 양식 <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> <FORM> 좋아하는 스포츠 종목을 고르세요<BR> <INPUT TYPE="RADIO" NAME="SPORTS" VALUE="baseball">야구 <BR> <INPUT TYPE="RADIO" NAME="SPORTS" VALUE="football">축구 <BR> <INPUT TYPE="RADIO" NAME="SPORTS" VALUE="basketball">농구 <BR> <INPUT TYPE="RADIO" NAME="SPORTS" VALUE="volleyball ">배구 <BR> </FORM> </BODY> </HTML>
라디오 버튼 입력 양식 : 실행 결과
체크박스 입력 양식 <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> <FORM> 좋아하는 스포츠 종목을 고르세요<BR> <INPUT TYPE="CHECKBOX" NAME="SPORTS" VALUE="baseball">야구 <BR> <INPUT TYPE="CHECKBOX" NAME="SPORTS" VALUE="football">축구 <BR> <INPUT TYPE="CHECKBOX" NAME="SPORTS" VALUE="basketball">농구 <BR> <INPUT TYPE="CHECKBOX" NAME="SPORTS" VALUE="volleyball ">배구 <BR> </FORM> </BODY> </HTML>
체크박스 입력 양식 : 실행 결과
펼침메뉴 입력 양식 <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> <FORM> 좋아하는 스포츠 종목을 고르세요<BR> <SELECT NAME="SPORTS"> <OPTION VALUE="baseball"> 야구 </OPTION> <OPTION VALUE="football"> 축구 </OPTION> <OPTION VALUE="basketball"> 농구 </OPTION> <OPTION VALUE="volleyball"> 배구 </OPTION> </SELECT> </FORM> </BODY> </HTML>
펼침메뉴 입력 양식 : 실행 결과
텍스트박스 입력 양식 <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> <FORM> <TEXTAREA NAME="BBS" ROWS="7" COLS="80"> 글을 남겨주세요 </TEXTAREA> </FORM> </BODY> </HTML>
텍스트 박스 입력 양식 : 실행 결과
데이터 전송과 입력 취소 입력 양식 <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> <FORM> <INPUT TYPE="SUBMIT" VALUE="데이터 전송"> <INPUT TYPE="RESET" VALUE="입력 취소"> </FORM> </BODY> </HTML>
데이터 전송과 입력 취소 : 실행 결과
파일 전송 입력 양식 <HTML> <HEAD><TITLE></TITLE></HEAD> <BODY> <FORM> 파일전송 : <INPUT TYPE="FILE" NAME="TRANSFER" SIZE="30"> </FORM> </BODY> </HTML>
파일 전송 입력 양식 : 실행 결과
회원 가입(3-20.htm)(1/9) <HTML> </HEAD><TITLE>회원가입</TITLE></HEAD> <BODY> <TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1" ALIGN="center"> <TR BGCOLOR="#FFFFCC"> <TD COLSPAN=2 ALIGN="center"> <FONT SIZE="4" COLOR=""><B>회원 가입</B></FONT><BR> <FONT SIZE="2" COLOR="red">(* 표시는 필수 입력 사항입니다)<BR> </TD> </TR> <!-- 아이디 --> <TR> <TD ALIGN ="right" BGCOLOR="eeeeee"><FONT COLOR="red">*</FONT>아이디(ID) </TD> <TD > <INPUT TYPE="text" MAXLENGTH="12" NAME="userid"> <INPUT TYPE="image" SRC="image/checksame.gif"> <FONT COLOR=#FF3300>(4~12자 영자/숫자 가능)</FONT>
(3-20.htm)(2/9) <!-- 비밀번호 --> <TR> <TD ALIGN ="right" BGCOLOR="eeeeee"><FONT COLOR="red">*</FONT>비밀번호 </TD> <TD> <INPUT TYPE="password" MAXLENGTH="8" NAME="password1"> <FONT COLOR=#FF3300>(4~8자 이내로 만들어 주세요)</FONT> </TD> </TR> <!-- 비밀번호 확인 --> <TD ALIGN ="right" BGCOLOR="eeeeee"><FONT COLOR="red">*</FONT>비밀번호 확인 <TD><INPUT TYPE="password" MAXLENGTH="8" NAME="password2"> <FONT COLOR=#FF3300>(위 번호와 같이 입력해 주세요)</FONT>
(3-20.htm)(3/9) <!-- 성명 --> <TR> <TD ALIGN ="right" BGCOLOR="eeeeee"><FONT COLOR="red">*</FONT>성명(한글) </TD> <TD><INPUT TYPE=""text"" MAXLENGTH="30" NAME="NAMEkor"> <FONT COLOR=#FF3300>(예:홍길동)</FONT> </TD> </TR> <!-- 주민등록번호 --> <TD ALIGN ="right" BGCOLOR="eeeeee"><FONT COLOR="red">*</FONT>주민등록번호 </TD> <TD><INPUT TYPE=""text"" MAXLENGTH="6" NAME="juminno1" SIZE="6"> - <INPUT TYPE=""text"" MAXLENGTH="7" NAME="juminno2" SIZE="7"> <FONT COLOR=#FF3300>(예:750207-1234567)</FONT>
(3-20.htm)(4/9) <!-- 우편번호 --> <TR> <TD ALIGN ="right" BGCOLOR="eeeeee">우편번호 </TD> <TD> <INPUT TYPE="text" MAXLENGTH="7" NAME="jobpostno" SIZE="7“READONLY> <INPUT TYPE="button" VALUE="우편번호 찾기"> </TD> </TR> <!-- 주소 --> <TD ALIGN ="right" BGCOLOR="eeeeee">주소 </TD> <INPUT TYPE=""text"" MAXLENGTH="30" NAME="jobaddr" SIZE="50"> 
(3-20.htm)(5/9) <!-- 전화/휴대폰 --> <TR> <TD ALIGN ="right" BGCOLOR="eeeeee">전화/휴대폰 </TD> <TD> <INPUT TYPE="text" MAXLENGTH="3" NAME="hptel1" SIZE="3"> - <INPUT TYPE="text" MAXLENGTH="4" NAME="hptel2" SIZE="4"> - <INPUT TYPE="text" MAXLENGTH="10" NAME="hptel3" SIZE="10"> </TR> <!-- E-mail --> <TD ALIGN ="right" BGCOLOR="eeeeee"><FONT COLOR="red">*</FONT>E-Mail </TD> <TD><INPUT TYPE="text" MAXLENGTH="30" NAME="email" SIZE="30">
(3-20.htm)(6/9) <!-- 직업 --> <TR> <TD ALIGN ="right" BGCOLOR="eeeeee">직업 </TD> <TD> <SELECT NAME="jobTYPE"> <OPTION VALUE="selected" >선택하세요</OPTION> <OPTION VALUE="0">무직</OPTION> <OPTION VALUE="1">학생</OPTION> <OPTION VALUE="2">컴퓨터/인터넷</OPTION> <OPTION VALUE="3">언론</OPTION> <OPTION VALUE="4">공무원</OPTION> <OPTION VALUE="5">군인</OPTION> <OPTION VALUE="6">서비스업</OPTION> <OPTION VALUE="7">교육</OPTION> <OPTION VALUE="19">기타</OPTION> </SELECT> </TD> </TR>
(3-20.htm)(7/9) <!-- 학력 --> <TR> <TD ALIGN ="right" BGCOLOR="eeeeee">학력 </TD> <TD> <SELECT NAME="eduTYPE" SIZE=3> <OPTION VALUE="0">고졸</OPTION> <OPTION VALUE="1">대졸</OPTION> <OPTION VALUE="2">대학원졸</OPTION> <OPTION VALUE="19">기타</OPTION> </SELECT> </TD> </TR> <!-- 알게된 경로 --> <TD ALIGN ="right" BGCOLOR="eeeeee">알게된 경로 </TD> <INPUT TYPE="radio" value="1" NAME="inputpath">TV/신문/잡지 <INPUT TYPE="radio" value="2" NAME="inputpath">인터넷 <INPUT TYPE="radio" value="3" NAME="inputpath">동료 <INPUT TYPE="radio" value="4" NAME="inputpath">기타
(3-20.htm)(8/9) <!-- 취미 --> <TR> <TD ALIGN ="right" BGCOLOR="eeeeee">취미 </TD> <TD> <INPUT TYPE="checkbox" value="1" NAME="hobby1">독서 <INPUT TYPE="checkbox" value="2" NAME="hobby2">등산 <INPUT TYPE="checkbox" value="3" NAME="hobby3">낚시 <INPUT TYPE="checkbox" value="4" NAME="hobby4">영화감상 <INPUT TYPE="checkbox" value="5" NAME="hobby5">음악감상 </TD> </TR> <!-- 가입 인사 --> <TD ALIGN ="right" BGCOLOR="eeeeee" VALIGN="top">가입 인사 </TD> <TEXTAREA NAME="" ROWS="4" COLS="60"></TEXTAREA>
(3-20.htm)(9/9) <!-- 사진 첨부 --> <TR> <TD ALIGN ="right" BGCOLOR="eeeeee" VALIGN="top">사진 첨부 </TD> <TD> <INPUT TYPE="file" NAME="photo"> </TD> </TR> <!-- 가입/취소 --> <TD COLSPAN=2 ALIGN="center"><BR> <INPUT TYPE="submit" NAME="reg_ok" VALUE="가입"> <INPUT TYPE="reset" NAME="reg_cancle" VALUE="취소"> </TABLE> </BODY> </HTML>
(3-20.htm) : 실행 결과
메타 태그 <head> 태그 부분에 정의 검색 키워드, 문자셋, 페이지 자동 이동 등 다양한 역할
메타 태그 역할 검색 엔진에서의 활용 문자 지정 자동으로 페이지 이동 장면 전환 효과 지정한 시간이 지나면 자동으로 지정한 페이지로 이동 장면 전환 효과 파워포인트의 장면 전환 효과처럼 문서가 열리거나 닫힐 때 원 모양으로 나타나거나 타일 모양으로 사라지는 등 다양한 변화를 줄 경우
메타 태그(3-21.htm)(1/4) <HTML> <HEAD> <TITLE> 메타 태그 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <!-- 웹 사이트를 제작할 때 어떤 툴을 사용했는지 표시합니다. --> <META NAME="Author" CONTENT="홍길동"> <!-- 웹 사이트의 제작자를 표시합니다. --> <META NAME="Keywords" CONTENT="장흥국민관광지, 창덕궁"> <!-- 검색엔진에서 검색할 홈페이지의 키워드를 표시합니다. --> <META NAME="Description" CONTENT="홈페이지 만들기 예제"> <!--웹 사이트의 주제를 표시합니다. --> <META HTTP-EQUIV="refresh" CONTENT="10 ; URL=3-03.html"> <!--이 웹 사이트는 10초 후 해당 URL로 이동합니다. --> <meta http-equiv="Page-Enter" content="RevealTrans(Duration=3, Transition=23)"> <!--이 웹 사이트가 호출될 때 3초 동안 장면 전환 효과가 나타납니다. --> </HEAD>
(3-21.htm)(2/4) <BODY background="image/back1.gif" > <CENTER> <TABLE WIDTH="560" ALIGN="center"> <TR> <TD><A HREF="3-03.html"><IMG SRC="image/travel_1.jpg" WIDTH="100" HEIGHT="78" BORDER=0 ></TD></A> <TD VALIGN="top"><B>역사와 문화, 젊음이 숨쉬는 곳 『장흥국민관광지』</B><BR> 야외조각 전시장 등의 풍물과 젊음의 열기가 넘치는 이색타운 및 드라이브 코스 등으로 각광을 받고 있는 곳 <A HREF="3-03.html"> >>more.. </A><BR><BR> </TD> </TR> </TABLE> <TD VALIGN="top"><B>고궁에서의 추억만들기... 『창덕궁』</B> <BR> 주말에 고궁으로 나가보자. 가까운 곳에 있으면서도 잘 찾지 않게 되는 곳이지만 한국의 아름다움과 전통미를 즐길 수 있다. <A HREF="3-04.html"> >>more.. </A> <TD><A HREF="3-04.html"><IMG SRC="image/travel_2.jpg" WIDTH="100" HEIGHT="78" BORDER=0 ></TD></A>
(3-21.htm)(3/4) <TABLE ALIGN="center"> <TR> <TD> <TABLE BORDER="1" BORDERCOLOR="#0D5956" CELLPADDING="5" CELLSPACING="0" WIDTH="280" HEIGHT="220"> <TR BGCOLOR="#CAE7E6" BORDERCOLOR="white"> <TD><FONT FACE="굴림" COLOR="#0D5956"><B>컴퓨터/인터넷</FONT></B></TD> </TR> <TR BORDERCOLOR="white"> <TD><B>컴퓨터 </B><BR>평판형 2.1 채널 스피커, MLi-FP38<BR>바이러스 무료 치료 이벤트<BR> i845D ABIT BD7<BR> <B>마이크로소프트</B><BR> OS를「마치 윈도우 XP인 것처럼<BR>XP Professional 설치 관련 문답<BR> <B> 게임</B><BR> 유료게임 '일랜시아'<BR></TD> </TABLE> </TD>
(3-21.htm)(4/4) <TD> <TABLE BORDER="1" BORDERCOLOR="#DE4D30" CELLPADDING="5" CELLSPACING="0" WIDTH="280" HEIGHT="220"> <TR BGCOLOR="#fff0e1" BORDERCOLOR="white"> <TD><FONT FACE="굴림" COLOR="#DE4D30"><B>생활</FONT></B></TD> </TR> <TR BORDERCOLOR="white"> <TD><B>어린이영어</B><BR><IMG SRC="image/table_image_4.jpg" WIDTH="60" HEIGHT="55"BORDER=0 ALIGN=LEFT> 영어의 기초인 알파벳부터 이야기를 통하여 애니메이션으로 재미있게 배울 수 있습니다.</FONT><BR></TD> <TD><B> 라이프</B> <BR> 봉사활동에서 만난 그를 꼬셔라!<BR>출출한 밤을 위한 음식, 밤참 가이드<BR> 덕구온천과 온정골<BR>예술의 향기가 넘실데는 프랑스</TD> </TABLE> </TD> </BODY> </HTML>
(3-21.htm) :실행결과 - a
(3-21.htm) :실행결과 - b
(고양이 앨범 자동으로 보기)(cat1.htm)(1/2) <html> <head> <title> 고양이 앨범</title> <meta http-equiv="page-enter" content="revealtrans(duration=3, transition=3)"> <meta http-equiv="refresh" content="2;url=cat2.htm"> </head>
(고양이 앨범 자동으로 보기)(cat1.htm)(2/2) <body link=black vlink=black> <center> <h2>고양이 앨범</h2> <center><img src="images/cat1.jpg" border=1 width="600" height="450"><br><br></center> <a href="cat1.htm"><img src="images/cat1.gif" width=70 height=70 border=1 hspace=10 vspace=10></a> <a href="cat2.htm"><img src="images/cat2.gif" width=70 height=70 border=1 hspace=10 vspace=10></a> <a href="cat3.htm"><img src="images/cat3.gif" width=70 height=70 border=1 hspace=10 vspace=10></a> <a href="cat4.htm"><img src="images/cat4.gif" width=70 height=70 border=1 hspace=10 vspace=10></a> <a href="cat5.htm"><img src="images/cat5.gif" width=70 height=70 border=1 hspace=10 vspace=10></a> <a href="cat6.htm"><img src="images/cat6.gif" width=70 height=70 border=1 hspace=10 vspace=10></a> </center> </body> </html>
(고양이 앨범 자동으로 보기)(cat2.htm) <html> <head> <title> 고양이 앨범</title> <meta http-equiv="page-enter" content="revealtrans(duration=3, transition=5)"> <meta http-equiv="refresh" content="2;url=cat3.htm"> </head>
(고양이 앨범 자동으로 보기)(cat3.htm) <html> <head> <title> 고양이 앨범</title> <meta http-equiv="page-enter" content="revealtrans(duration=3, transition=7)"> <meta http-equiv="refresh" content="2;url=cat4.htm"> </head>
(고양이 앨범 자동으로 보기)(cat4.htm) <html> <head> <title> 고양이 앨범</title> <meta http-equiv="page-enter" content="revealtrans(duration=3, transition=9)"> <meta http-equiv="refresh" content="2;url=cat5.htm"> </head>
(고양이 앨범 자동으로 보기)(cat5.htm) <html> <head> <title> 고양이 앨범</title> <meta http-equiv="page-enter" content="revealtrans(duration=3, transition=11)"> <meta http-equiv="refresh" content="2;url=cat6.htm"> </head>
(고양이 앨범 자동으로 보기)(cat6.htm) <html> <head> <title> 고양이 앨범</title> <meta http-equiv="page-enter" content="revealtrans(duration=3, transition=13)"> <meta http-equiv="refresh" content="2;url=cat1.htm"> </head>
(고양이 앨범 자동으로 보기) :실행결과
<MARQUEE> 태그를 이용해 시 감상하기(원문 1) <html> <head> <title> 스크롤 문자 </title> </head> <body background="nara.jpg"> <!-- 코딩1 --> <pre> <font size="4" color="#00CC00"> <font size="+1" color=""><b>나를 키우는 말</b> </font> - 이해인 행복하다고 말하는 동안은 나도 정말 행복해서 마음에 맑은 샘이 흐르고 고맙다고 말하는 동안은 고마운 마음 새로이 솟아올라 내 마음도 더욱 순해지고
<MARQUEE> 태그를 이용해 시 감상하기(원문 2) 아름답다고 말하는 동안은 나도 잠시 아름다운 사람이 되어 마음 한 자락이 환해지고 좋은 말이 나를 키우는 걸 나는 말하면서 다시 알지 </font> </pre> <!-- 코딩2 --> </marquee> </td> </tr> </table> </body> </html>
<MARQUEE> 태그를 이용해 시 감상하기 :실행결과
<MARQUEE> 태그를 이용해 시 감상하기(결과 1) <html> <head> <title> 스크롤 문자 </title> </head> <body background="nara.jpg"> <!-- 코딩1 --> <table width=400 height=100%><tr><td> <marquee height=400 direction=up scrollamount=2 behavior=slide> <pre> <font size="4" color="#00CC00"> <font size="+1" color=""><b>나를 키우는 말</b> </font>
<MARQUEE> 태그를 이용해 시 감상하기(결과 2) - 이해인 행복하다고 말하는 동안은 나도 정말 행복해서 마음에 맑은 샘이 흐르고 고맙다고 말하는 동안은 고마운 마음 새로이 솟아올라 내 마음도 더욱 순해지고 아름답다고 말하는 동안은 나도 잠시 아름다운 사람이 되어 마음 한 자락이 환해지고 좋은 말이 나를 키우는 걸 나는 말하면서 다시 알지 </font>
<MARQUEE> 태그를 이용해 시 감상하기(결과 3) </font> </pre> <!-- 코딩2 --> </marquee> </td> </tr> </table> </body> </html>
<MARQUEE> 태그를 이용해 시 감상하기 :적용한 결과