컴퓨터프로그래밍 - HTML
HTML 이란? v Hyper Text Markup Language v 웹문서제작에사용되는표준언어 v 문서타입 : 텍스트파일형식 HTML 문서의특징 v 공백, 줄바꿈인식못함 v 텍스트문서의형태 - 확장명 :.html,.htm v 인터넷문서로사용하기에적합 - 컴퓨터기종에무관 - 파일크기작음 v 대소문자를구분하지않음
HTML 문서의작동원리
HTML 태그의구조 (1) v Markup Tag 사용형태 v v v v 영문대소문자구별없음 - <TITLE>, <title>, <Title> <tag>... </tag> - 예 ) <title> 내용 </title> <tag attribute=argument>... </tag> - 예 ) <font size=3> 내용 </font> <tag> - 예 ) <br>
HTML 태그의구조 (2) v 사용의주의사항 v 중첩사용시마감태그의대응위치 <tag1> <tag2> <tag1>... <tag2>... </tag1> </tag2> </tag2> </tag1> (x) (o)
HTML 문서의기본구조 (1)
HTML 문서의기본구조 (2) v v v <html> </html> v Html문서의시작과종료의범위를지정 <head>... </head> v 문서의 meta-information을포함 - 문서에대한정보 v 자료영역에보이지않음 v 저자정보, 스크립트, 스타일시트, 주석 <body>... </body> v 문서의실제내용이들어감 v 각종태그를사용하여문서표현
<HEAD> 태그 1 v <TITLE>... </TITLE> v 문서의제목 ( 제목표시줄에표시 ) v <META> v 문서의정보에관련된여러가지정보를기술하는태그 v NAME 속성을이용하여문서정보 - NAME : 정보의형태를정의 - CONTENT : 정보를기술 - <META NAME = author CONTENT= 작성자 > - <META NAME = description CONTENT= 문서의설명 > - <META NAME = keywords CONTENT= keyword1, keyword2,. >
<HEAD> 태그 2 v http-equiv 속성을이용한문서정보 v v v v 캐쉬정보만료날짜지정 <META http-equiv= expires CONTENT= Thu, 22 May 2002 10:22:07 GMT > 캐쉬저장방지 <META http-equiv= pragma CONTENT= nocache > <META http-equiv= cache-control CONTENT= nocache > 문서제작에사용된언어지정 <META http-equiv= content-type CONTENT= text/html; charset=euc-kr > 문서의이동 <META http-equiv= refresh CONTENT= 시간 (sec); URL= 불러올문서 url >
HTML 문서의예 <HTML> <HEAD> <TITLE> 기본구조 </TITLE> </HEAD> <BODY> HTML의기본구조 HTML은다음과같이... </BODY> </HTML>
요약 HTML 문서는웹에서사용되는표준문서제작에사용된다. HTML 은태그들로기술된언어다. HTML 문서는텍스트형식의파일이다. HTML 문서는컴퓨터시스템이나운영체제에독립적이므로어떠한시스템에서도동일하게표현된다. HTML 문서는공백이나줄바꿈을인식하지않고대소문자를구분하지도않는다. HTML 문서의기본구조는 HEAD 와 BODY 로나누어진다. <HEAD> 태그는문서에관련된여러가지정보를기술하는곳이다. 실제문서에표시될문자는 <BODY> 태그내에기술한다. 문서의시작과끝을구분하기위해 <HTML> </HTML> 태그를기술한다. 문서의제목을표현하기위해 <HEAD> 태그내에서 <TITLE> 태그를이용하여기술한다. 복합태그를사용할때태그사이의중첩은허용되지않는다.
<FONT> v 글자의크기, 색상, 서체를지정 v 속성 v SIZE= n : n=1~7, 기본값은 n=3 v COLOR= {# 색상코드 색상이름 } v FACE=" 글꼴체 " v 태그사용예 v <FONT SIZE= 4 > </FONT> v <FONT COLOR= red > </FONT> v <FONT FACE= 바탕체 > </FONT> v <FONT SIZE= 4 COLOR= #ff0000 >...</FONT>
색상표현단어 표현단어 색상 표현단어 색상 Black 검정 Silver 은색 Maroon 밤색 Red 빨간색 Green 녹색 Lime 라임색 Olive 올리브색 Yellow 노란색 Navy 남색 Blue 파란색 Purple 자주색 Fuchsia 분홍색 Teal 청록색 Aqua 옥색 Gray 회색 White 흰색
색상코드표 v RGB : 각각을 8 비트를이용하여 16 진수로표현 11111111 00000000 00000000 색상 색상코드값 색상 색상코드값 하얀색 FFFFFF 연두색 C0DCC0 검정색 000000 연한베이지색 FFFBF0 진한빨강색 800000 회색 A0A0A4 진한초록색 008000 진한회색 808080 진한노란색 808000 빨간색 FF0000 진한파란색 000080 녹색 00FF00 진한보라색 800080 파란색 0000FF 진한하늘색 008080 노란색 FFFF00 연한회색 C0C0C0 분홍색 FF00FF 초록색 C0DCC0 하늘색 00FFFF 연한파란색 A6CAD0
<FONT> 태그사용예
<BASEFONT> v <HEAD> 태그내에서지정하면문서전체에적용 v <BASEFONT size= 2 color= black > v <BODY> 태그내에서는종료태그와함께사용
문자관련태그 v 글자모양 : 논리적형태 v <cite> : 인용문 v <code> : 소스코드 v <dfn> : 정의 v <em> : 강조 v <strong> : 강한강조 v <samp> : 예제 v <var> : 변수
문자관련태그 v 글자모양 : 물리적형태 v <b>... </b> v <I>... </I> v <u>... </u> v <tt>... </tt> v <sub>... </sub> v <sup>... </sup> v <big>... </big> v <small>... </small> v <strike> </strike> v <blink>... </blink>
<Hn> 태그 - heading v v 문서내의단계별제목문서에논리적의미부여 v <Hn> : n = 1 ~ 6 v n=1 이가장큰제목 v v v v 자동줄바꿈 속성 v ALIGN= {left center right } <H1> </H1> <H3 ALIGN= center > </H3>
<Hn> 태그사용예 <html> <head> <title> 기본구조 </title> </head> <body> <h1>h1 tag</h1> <h2>h2 tag</h2> <h3>h3 tag</h3> <h4>h4 tag</h4> <h5>h5 tag</h5> <h6>h6 tag</h6> <h1 align="center"> h1 tag </h1> </body> </html>
<BR> - Brake v 줄바꿈태그 v 단락구분은하지않음 v 종료태그없음
<P> 태그 - Paragraph v 문단구분 v 줄을바꿈과동시에한줄띄게되는효과 v 속성 v align= { left center right } 이것은문단관련태그를연습중입니다. <p> 여기서부터새로운문단으로시작하고있습니다.</p> 문단관련태그의사용법을익힙시다. 이것은문단관련태그를연습중입니다. <p align= center > 여기서부터새로운문단으로시작하고있습니다.</p> 문단관련태그의사용법을익힙시다.
<CENTER> 태그 v 태그사이의내용을가운데정렬 이것은중앙정렬태그를연습 <br> 중입니다. <center> 중앙정렬태그를이용하면이렇게보입니다.<br> 여기까지 </center> 중앙정렬태그의사용법을익힙니다.
<HR> 태그 - Horizontal Rules v가로선긋기 v속성 v ALIGN= {left center right } v SIZE= n : 선의두께 (pixel), 기본값은 2 v WIDTH= n : 선의폭 (pixel,%) v NOSHADE : 음영효과사용안함 v COLOR= color : 선의색상 v<hr align= size= n width= n color= color [noshade]>
<HR> 태그사용예 hr 태그의사용법을알아봅니다.<br> 기본선 <hr> 선두께 4 <hr size="4"> 선두께 4 음영효과없음왼쪽정렬 <hr align="left" size="4" noshade> 선두께 7 음영효과없음폭 200 픽셀 <hr size=7 noshade width=200> 선두께 7 음영효과없음폭창크기의 80% 선색상빨강 <hr size=7 noshade width=80% color="red">
<ADDRESS> 태그와주석문 v <!--... --> v 주석문 <!-- 주석문을연습하는부분입니다. --> 위에주석문이있습니다. 안보이죠? <br><br> <hr size=4> <!-- 주석문은이와같이여러줄도가능합니다. -->
DIV 태그 - division v 특정부분과구역으로구분 v 논리적블록요소 v 주로스타일시트와함께사용 v 앞뒤줄바꿈 v 속성 v ALIGN= { left center right } 이것은문단관련태그를연습중입니다. <div> 여기서부터새로운문단으로시작하고있습니다.</div> 문단관련태그의사용법을익힙시다. 이것은문단관련태그를연습중입니다. <div align= center > 여기서부터새로운문단으로시작하고있습니다.</div> 문단관련태그의사용법을익힙시다.
SPAN 태그 v v 강제줄바꿈없이텍스트를구분 주로스타일시트와함께사용 이것은문단관련태그를연습중입니다. <span> 여기서부터새로운문단으로시작하고있습니다.</span> 문단관련태그의사용법을익힙시다.
<PRE> 태그 - Preformatted v v v 입력한형태그대로출력 공백, 줄바꿈인식 내부의태그인식 이것은문단관련태그를연습중입니다. <pre> <p> 여기서부터새로운문단으로시작하고있습니다.</p> 문단관련태그의사용법을익힙시다. </pre>
Character Entity v HTML 내에서의특수문자표시방법 기호 표기 설명 " 인용문기호 & & 앰퍼센트 < < Lower than > > Greater than 공백 권한기호 등록상표
Character Entity 사용예 <p> 태그를보여주고싶은데...??? <br> < p > 이렇게하면됩니다.<br> 공백은이렇게해선만들어지않습니다.<br> 공백은 이렇게해야합니다.
<MARQUEE> 태그 v 텍스트에움직임효과를부여 v 속성 v BEHAVIOR= {alternate scroll slide} 텍스트의움직임형태 v DIRECTION= {down up left right} 텍스트의움직임방향 v LOOP= {n infinite} 반복횟수 v SCROLLAMOUNT= n 스크롤되는픽셀수 v SCROLLDELAY= n 메시지출력시간간격 (msec) v BGCOLOR= color : 스크롤되는공간의배경색 v WIDTH, HEIGHT : 스크롤되는공간의크기 v HSPACE, VSPACE : 스크롤되는공간의좌우, 상하여백
순서리스트 v 순서글머리번호에순서번호가있는리스트 v <OL> v <LI> v 리스트의시작과종료 (Ordered List) v 속성 - TYPE= { A a I i 1 } : 글머리번호의종류 - START= n : 글머리번호의시작번호 v 리스트항목을기술 v 속성 v TYPE= { A a I i 1 } : 해당항목의글머리번호의종류 v VALUE= n <OL> <LI> </LI> <LI> </LI> </OL>
순서리스트사용예 <ol> <li> 서울 </li> <li> 경기 </li> <li> 제주 </li> </ol> <ol type=i> <li> 서울 <li> 경기 <li value=5> 제주 </ol> <ol type=a start=3> <li> 서울 <li> 경기 <li> 제주 </ol>
무순서리스트 v 순서글머리번호에순서번호가없는리스트 v <UL> v 리스트의시작과종료 (Unordered List) v 속성 v<li> v TYPE= { disc circle square } : 글머리의모양 v v 리스트항목을기술 v 속성 v TYPE= { disc circle square } : 글머리의모양 <UL> <LI> </LI> <LI> </LI> </UL>
무순서리스트사용예 <ul> </ul> <li> 서울 <li> 경기 <li> 제주 <ul type=square> <li> 서울 <li> 경기 <li> 제주 </ul>
정의리스트 v <DL> : 정의리스트의시작과종료 v <DT> : 정의제목 v <DD> : 설명, 항목, DT에대해들여쓰기효과 v <DL compact> <dl> <dt>html <dd>hyper Text Markup Language <dt>dhtml <dd>dynamic HTML </dl> <dl compact> <dt>[1] <dd>hyper Text Markup Language <dt>[2] <dd>dynamic HTML </dl>
중첩리스트 v 시작태그, 마감태그사용주의 ( 대칭 ) <ol> </ol> <li> 서울 <ul type=disc> <li> 종로 <li> 동대문 </ul> <li> 경기 <li> 제주
Hyperlink - <A> 태그 v anchor 속성 v HREF= url : 연결문서지정 v TARGET : 연결문서를출력할대상 v_blank : 새로운창을열어서문서연결 v_top : 현재창의최상위에문서연결 v_parent : 현재문서창을연문서창에서연결 v_self : 자기자신의창에서연결 vframe_name : 지정한프레임에서연결 v TITLE : 링크에대한설명을기술 v <A HREF= 연결할문서 TARGET= 대상 > 내용 </A>
Hyperlink 사용예 2.htm 하이퍼링크연습문서입니다. <a href="2.htm"> HTML </a> 이란무엇인가? 하이퍼링크연습문서입니다. <a href="2.htm target= _blank > HTML </a> 이란무엇인가?
Hyperlink 의책갈피이용 v NAME 속성을이용하여문서내의특정부분으로의연결설정 v 대상문서에책갈피위치설정후하이퍼링크지정시책갈피이름을지정 v 책갈피위치설정 : <A NAME= name >..</A> v 책갈피위치로링크생성 :<A HREF= 문서 #name >.. </A> v 동일문서내에서는문서명생략가능
NAME 속성 (1) www.htm 하이퍼링크연습문서입니다. <a href="www.htm"> WWW </a> 란무엇인가? <A NAME= name >..</A>
NAME 속성 (2) 하이퍼링크연습문서입니다. <a href="www.htm#imsi"> HTML </a> 이란무엇인가? www.htm 그부분과연관이되는다른문서로이동이된다.<br> <a name="imsi"> WWW </a> 은바로이러한원리를이용하는하이퍼텍스트문서로정보를표현함으로서이용자가자신이원하는정보를보다더편하고빠르게습득할수있도록기능을제공한다. www.htm
동일문서내에서책갈피사용 <html> <head> <title> 링크연습 </title> </head> <body> <a href= # 서론 name= 위 >1. 서론 </a> <a href= # 본론 >2. 본론 </a> <a href= # 결론 >3. 결론 </a> <a name= 본론 > 2. 본론 </a> 이부분은본론입니다.. <a name= 서론 > 1. 서론 </a> 이부분은서론이. <a name= 결론 > 3. 결론 </a> 이부분은결론입니다...... <a href= # 위 > 위로가기 </a>
다른서버의문서로연결 v 웹문서로연결 : http://www.ocu.ac.kr v FTP 서버로연결 : ftp://ftp.shareware.co.kr 하이퍼링크연습문서입니다. <a href= http://www.ocu.ac.kr"> OCU 로가기 </a>
<BODY> 태그의속성들 v BACKGROUND : 문서의배경그림 v BGPROPERTIES="fixed : 배경그림고정 v BGCOLOR= color : 문서의배경색상 v TEXT= color : 기본글자색상 v LINK= color : 링크색상 v VLINK= color : 방문한링크색상 v ALINK= color : 클릭순간부터링크연결중색상 v LEFTMARGIN= n : 문서의왼쪽여백 v TOPMARGIN= n : 문서의위쪽여백 vmarginheight, marginwidth : NETSCAPE
문서의배경이미지 v <BODY BACKGROUND= image_url >
문서의배경색지정
링크관련글자색변경 <body text="#0000ff" link="red" vlink="green alink= black > 하이퍼링크연습문서입니다.<br> <a href="http://www.ocu.ac.kr"> OCU 로가기 </a><br> <a href="http://mail.ocu.ac.kr"> OCU 메일 </a>
그림삽입 v <IMG> : 그림삽입 v 속성 v SRC = image_url : 그림의위치지정 v WIDTH, HEIGHT : 그림의크기지정 v ALIGN = {left right top middle bottom} : 정렬 v BORDER = n : 테두리두께 v ALT = 설명 : 마우스오버시표시할설명 v VSPACE, HSPACE : 그림주위의글자와의간격
그림삽입예 v <img src= http://www.ocu.ac.kr/images/img_01.gif > v <img src= images/abc.gif > Homepage and... 하이퍼링크연습문서입니다. <img src="http://www.ocu.ac.kr/images/img_01.gif"> OCU 그림삽입
이미지와텍스트정렬 v 글자의위치를이미지와연관시켜배치 v 이미지를중심으로텍스트를배치할경우 v ALIGN= top, middle, bottom v top - 글자를이미지의가장윗부분에정렬 v middle - 글자를이미지의중앙선에정렬 v bottom - 글자를이미지의가장밑부분에정렬 v ALIGN=bottom 옵션은기본값 v 문장이긴경우, 창의크기를줄이면자동적으로이미지밑으로위치하게된다는것에주의
이미지정렬예 <img src=... align=top middle bottom right left> <p align=left center right><img src=... > </p> 하이퍼링크연습문서입니다.<br> <img src="pic.jpg" > 그림삽입 <br> <img src="pic.jpg" align=top> 그림삽입 <br> <img src="pic.jpg" align=middle> 그림삽입 <br> <img src="pic.jpg" align=right>
이미지제목넣기예 v 이미지제목넣기 v <img src= img_url alt= title > v 이미지위치에이미지대신제목보여줌 v 텍스트베이스브라우저에서사용 v 로딩시간동안이미지위치에보여줌 하이퍼링크연습문서입니다. <img src= http://www.ocu.ac.kr/images/img_01.gif alt= OCU 로고 > OCU 그림삽입
여백및테두리조정하기 v <IMG SRC= 그림파일 " VSPACE=n HSPACE=n> v 이미지를부동이미지로판별하게해서글자가그주위에오지못하게함 v HSPACE 속성 v 이미지의양옆으로 ( 가로측 ) 여백을지정 v VSPACE 속성 v 이미지의위, 아래여백을지정 v BORDER 속성 v 이미지의테두리를지정, 강조 v 색깔 : BLACK
이미지넣기 (5) v 외부이미지지정하기 v<a href= ex_img.jpg ><img src= in_img.jpg ></a>
Image Map v v 하나의이미지내에여러개의서로다른링크구성활용예 <img usemap= map_name > <map name= map_name > <area href=.. shape=.. coords=.. > </map> shape 모양 coords 설명 rect 사각형 x1,y1,x2,,y2 circle 원 x,y,r x1,y1 : 왼쪽위좌표 x2,y2 : 오른쪽아래좌표 x,y : 중심점좌표 r : 반지름 poly 다각형 x1,y1,x2,y2,x3,y3.. 각각의모서리좌표
이미지맵예제 <img src="global.gif" usemap="my_menu"> <map name="my_menu"> <area href="sj.htm" shape="rect" coords-"0,0,45,10"> <area href="st.htm" shape="rect" coords-"47,0,90,10"> <area href="sk.htm" shape="rect" coords-"92,0,135,10"> </map>
멀티미디어삽입 v v v 파일재생방식 v 다운로드 : wav, mid, au, mp3 v 스트리밍 : ra, wmv, wma, asf <EMBED> : 플러그인으로작동하는요소를삽입속성 v align= {left;right;top;bottom;middle} 텍스트와의정렬 v border= n 테두리두께 v height, width= n 객체의높이와두께 v hidden= {true;false} : 화면상에표시유뮤 v loop= {n;infinite} : 반복유무 v pluginspace= url 사용자가플러그인이없을경우해당플러그인을다운로드 받을수있는주소 v src= url 객체의 url v autostart= {true;false} 문서로딩후자동으로재생
멀티미디어연습 v <img src= http://image.hanmail.net/hanmail/top/logo/030101_logo.gif >
<TABLE> 태그 v 표의시작과끝 v 속성 v BORDER= n : 외부테두리두께, 기본값은 0 v CELLSPACING= n : 셀간격 v CELLPADDING= n : 셀내부여백 v WIDTH= n, HEIGHT= n : 표의너비, 높이 v BGCOLOR= color : 표의배경색 v BORDERCOLOR= color : 표의테두리색
표만들기예 v <TR>..</TR> : 행단위지정 v <TH>..</TH> : 셀헤더지정 v <TD>..</TD> : 셀데이타지정 <table border=1> <tr> <th>no.</th> <th> 시간 </th> </tr> <tr> <td>1 교시 </td> <td>10:00</td> </tr> </table>
표만들기연습 <table border=1 cellspacing=1 cellpadding=1> <tr><th>no.</th><th> 시간 </th></tr> <tr><td>1</td><td>10:00</td></tr> </table> <table border=5 cellspacing=5 cellpadding=5 width=200 bgcolor= #ddefdd >
<TR><TH><TD> 에서사용되는속성 v v v v v v v ALIGN= { left center right } (tr,th,td) VALIGN= { top middle bottom } (tr,th,td) BGCOLOR= color : 셀의배경색 (tr,th,td) COLSPAN= n : 열합병 (th,td) ROWSPAN= n : 행합병 (th,td) NOWRAP : 문장의줄바꿈방지 (th,td) WIDTH= n, HEIGHT= n : 셀의폭, 높이 (th,td)
셀합병연습 <table border=2> <tr> <td colspan= 2 >..</td> <td>.. </td> </tr> <tr> <td>..</td> <td>..</td> <td>..</td> </tr> </table>
<CAPTION> 태그 v 표제목 v 속성 v ALIGN= { top bottom } : 제목의위치 <table border=3 cellpadding=5> <caption align=bottom> 표 1: caption 값 </caption> <tr><th>align 값 </th><th> 위치 </th></tr> <tr><th>bottom</th><td> 표아래 </td></tr> <tr><th>top</th><td> 표위 </td></tr> </table>
표만들기
표만들기응용 v 활용하기 v 다단문서작성 : border=0이용 v 이미지삽입시액자효과 : 중첩된 table사용
FRAME 문서 v 하나의창을여러개의화면으로분할 v 프레임마다독립적인 URL 가짐 v <BODY> 대신 <FRAMESET> 태그사용 v 프레임문서제작방법 v <FRAMESET> 태그를이용하여창나누기 v <FRAMESET> 태그내에 <FRAME> 태그를이용하여각프레임에나타낼문서지정
<FRAMESET> 태그 v 프레임정의의시작과끝, 프레임설정 v 속성 v ROWS, COLS : 행또는열방향으로의프레임구분 vrows= 프레임 1 크기, 프레임 2 크기, vrows= 200, 600 vcols= 30%, 70% vrows= 100, *, 100 v FRAMEBORDER= { yes no } : 경계선표시유무 v FRAMESPACING : 경계선의두께 v BORDERCOLOR : 경계선색상 <html> <head> </head> <frameset cols= 200,* > <frame> <frame> </frameset> </html>
<FRAME> 태그 v 각각의프레임에표시할문서지정 v 속성 v SRC= url : 프레임에보여질 HTML문서의 URL v NAME= name : 프레임의이름 v SCROLLING= { yes no auto } : 스크롤바생성유무, v NORESIZE : 프레임크기고정 v 프레임설정순서 : L -> R, T -> B 1.htm m.htm 2.htm <html> <head> </head> <frameset cols= 200,* > <frame src= m.htm > <frame src= 2.htm > </frameset> </html>
FRAME NAME(1) v Target 지정 v <a href=. target= > v _top, _blank, _self, 프레임명 v 기본 Target 설정 v <base target=... > : HEAD tag 내에선언 m.htm 2.htm <html> <head> </head> <frameset cols= 200,* > <frame src= m.htm > <frame src= 2.htm name= main > </frameset> </html> frame_name main
FRAME NAME(2) <a href="http://www.ocu.ac.kr"> ocu 가기 </a> <br> <a href="http://www.ocu.ac.kr" target="main"> ocu 가기 2 </a> m.htm
<NOFRAMES> 태그 v FRAME 태그를지원하지않는브라우저를위해설정 <html> <head> </head> <frameset cols= 200,* > <frame src= 1.htm > <frame src= 2.htm name= main > </frameset> <noframes> <body> 이페이지를보려면프레임을지원하는브라우저가필요합니다. </body> </noframes> </html>
다중 FRAME 문서 <html> <head> </head> <frameset cols="50,*"> <frame > <frameset rows="60,*"> <frame> <frame > </frameset> </frameset> </html>
Floating 프레임 v <IFRAME> : floating 프레임 v src= url 로드할문서의 url v width, height = n 프레임의크기지정 v align : iframe 위치지정 v 주위에글자가배치될수있게할수있는박스형프레임생성태그
Floating 프레임예제
입력폼 v 사용자로부터정보를입력받을수있는형식 v 속성 v NAME : 폼이름 v ACTION : 폼에서입력된데이터를보내서처리하는프로그램의 URL 을지정 v METHOD : 데이터전송방법 <FORM> </FORM >
텍스트입력양식 v <INPUT> v 속성 v TYPE= text : 텍스트입력상자 v NAME = field_name : 입력상자이름 v SIZE = n : 입력상자크기 ( 디폴트 :20) v MAXLENGTH = n : 최대입력가능글자수 v VALUE = value : 입력상자초기값 v TITLE : 마우스오버시표시문자 v READONLY : 입력불가 입력하나 : <INPUT TYPE="text" NAME="text1" MAXLENGTH=5> <P> 입력둘 : <INPUT TYPE="text" NAME="text2" SIZE=10 > <P> 입력셋 : <INPUT TYPE="text" NAME="text3"> <P> 입력셋 : <INPUT TYPE="text" NAME="text4" VALUE=" 초기값 ">
암호입력양식 v <INPUT> v 속성 v TYPE= password : 암호입력상자 v NAME = field_name : 입력상자이름 v SIZE = n : 입력상자크기 ( 디폴트 :20) v MAXLENGTH = n : 최대입력가능글자수 v VALUE = value : 입력상자초기값 암호넣기하나 : <INPUT TYPE="password" NAME="pass1" MAXLENGTH=5> <P> 암호넣기둘 : <INPUT TYPE="password" NAME="pass2" SIZE=10 > <P> 암호넣기셋 : <INPUT TYPE="password" NAME="pass3"> <P> 암호넣기넷 : <INPUT TYPE="password" NAME="pass4" VALUE="abc">
체크박스양식 v <INPUT> v 속성 v TYPE= checkbox : 체크박스 v NAME = field_name : 체크박스이름 v VALUE = value : 선택시넘겨줄데이터 v CHECKED : 체크된상태로로딩 <H2> 좋아하는프로그래밍언어를선택하시오. </H2> <H3> <INPUT TYPE="checkbox" NAME="check" VALUE="item1" CHECKED> 비주얼베이직 <BR> <INPUT TYPE="checkbox" NAME="check" VALUE="item2"> 델파이 <BR> <INPUT TYPE="checkbox" NAME="check" VALUE="item3" CHECKED> 비주얼 C++ <BR> <INPUT TYPE="checkbox" NAME="check" VALUE="item4"> 자바 <BR> </H3>
라디오버튼양식 v <INPUT> v 속성 vtype= radio : 옵션버튼 vname = field_name : 옵션버튼이름 v 같은이름으로그룹화 vvalue = value : 선택시넘겨줄데이터 vchecked : 체크된상태로로딩 <H2> 좋아하는프로그래밍언어를하나만선택하시오. </H2> <H3> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item1" CHECKED> 비주얼베이직 <BR> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item2"> 델파이 <BR> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item3"> 비주얼 C++ <BR> <INPUT TYPE="radio" NAME="radio_btn" VALUE="item4"> 자바 <BR> </H3>
확인버튼 v <INPUT> v 속성 v TYPE= submit : 확인버튼 v NAME = button_name : 확인버튼이름 v VALUE = value : 버턴에표시할글자 <FORM ACTION = "MOVE.HTML" METHOD=POST> 이름 : <INPUT TYPE="text" NAME="text1" SIZE=10> <P> 전화 : <INPUT TYPE="text" NAME="text2" SIZE=14> <P> 주소 : <INPUT TYPE="text" NAME="text2" SIZE=60> <P> <INPUT TYPE="submit" VALUE=" 다른곳으로이동 "> </FORM>
취소버튼 v <INPUT> v 속성 v TYPE= reset : 취소버튼 v NAME = button_name : 취소버튼이름 v VALUE = value : 버튼에표시할글자 <FORM ACTION = "MOVE.HTML" METHOD=POST> 이름 : <INPUT TYPE="text" NAME="text1" SIZE=10> <P> 전화 : <INPUT TYPE="text" NAME="text2" SIZE=14> <P> 주소 : <INPUT TYPE="text" NAME="text2" SIZE=60> <P> <INPUT TYPE="reset" VALUE=" 리셋버튼 "> </FORM>
파일선택버튼 v <INPUT> v 속성 v TYPE= file : 파일선택버튼 v NAME = button_name : 버튼이름 v 파일입력상자와버튼이자동생성 <FORM ACTION = "MOVE.HTML" METHOD=POST> 파일보내기 : <INPUT TYPE="file" VALUE=" 보낼파일선택 "> </FORM>
일반버튼 v <INPUT> v 속성 v TYPE= button : 일반버튼 v NAME = button_name : 버튼이름 v VALUE = value : 버튼에표시할글자 <FORM ACTION = "MOVE.HTML" METHOD=POST> ID : <INPUT TYPE="text" NAME="text1" > <INPUT TYPE= button" VALUE="ID 중복확인 "> </FORM>
기타 v 그림버튼 v 속성 v TYPE= image : 그림버튼 v NAME = button_name : 버튼이름 v SRC = url : 그림파일위치 <FORM ACTION = "MOVE.HTML" METHOD=POST> <INPUT TYPE= image" SRC= 2.jpg"> 마음에드는곳을누르세요 </FORM> v 숨김양식 v 속성 v TYPE= hidden : 숨김양식 v NAME = name : 양식이름
리스트박스 v <SELECT> : 리스트박스의시작과끝 v 속성 v SIZE= n : 리스트박스크기 v NAME = listbox_name : 박스이름 v MULTIPLE : 복수항목선택가능 v <OPTION> : 각항목을설정 v 속성 v SELECTED : 초기선택상태 v VALUE = value : 선택시할당값 <SELECT NAME= list1" SIZE=3> <OPTION> </OPTION> <OPTION> </OPTION> <OPTION> </OPTION> <OPTION> </OPTION> </SELECT>
리스트박스예제 <SELECT NAME= list1" SIZE=3> <OPTION selected> 서울특별시 </OPTION> <OPTION> 경기도 </OPTION> <OPTION> 부산광역시 </OPTION> <OPTION> 제주도 </OPTION> </SELECT> <SELECT NAME= list1" SIZE=3 MULTIPLE> <OPTION> 서울특별시 </OPTION> <OPTION> 경기도 </OPTION> <OPTION> 부산광역시 </OPTION> <OPTION> 제주도 </OPTION> <OPTION> 광주광역시 </OPTION> <OPTION> 충청남도 </OPTION> <OPTION> 경상북도 </OPTION> </SELECT>
콤보박스 v <SELECT> : 콤보박스의시작과끝 v 속성 v NAME = listbox_name : 박스이름 v <OPTION> : 각항목을설정 v 속성 v SELECTED : 초기선택상태 v VALUE = value : 선택시할당값 <SELECT NAME= list1" > <OPTION> 서울특별시 </OPTION> <OPTION selected > 경기도 </OPTION> <OPTION> 부산광역시 </OPTION> <OPTION> 제주도 </OPTION> </SELECT>
메모입력상자 v <TEXTAREA> v 속성 v ROWS, COLS : 행과열의개수 v NAME = name : 상자이름 <FORM > <H2> 낙서를열심히합시다. </H2> <TEXTAREA NAME = "memo" ROWS=12 COLS=70> 내용을여기에적습니다. </TEXTAREA> <P> <INPUT TYPE="reset" VALUE=" 다시입력 "> <INPUT TYPE="submit" VALUE=" 저장하기 "> </FORM>