HTML Frame, Form, 메서드, 식별자 이론
HTML족보
Window -> document -> body -> form 누구의 자식인지 확인한다.
최상위 Window 자식중 document 자식이 있다. 예로 body 태그가 있다.
문서가 더큰 개념 body가 문서보단 작은 개념 document자식중 a, img, form
form은 textbox, radio버튼 등 자식들이 있다.
이러한 트리구조 개념을 BOM이라고 한다.
BOM 모델에서 구분하기 위해서 만든게 name이다. name은 일부태그만 사용할수 있다.
name=BOM 족보에서만 들어 있는 애들에서만 찾을수 있다.
DOM 최상위 객체 HTML -> BODY -> DIV ->, FORM -> text
<html>
<head>
<title></title>
</head>
<body>
<!--iframe-->
<!--
로그인 같은 경우에는 iframe을 사용하여 다른 페이지에서도 로그인 페이지를 참조하여 다른페이지에서 재사용 한다.
iframe 특징 페이지 재사용
나머지는 서버에서 얻어오지 않아도 되기 때문에 로딩속도가 월등히 빠르다.
-->
<iframe width="200" height="200" src="Ex03.htm"></iframe>
<h3>2번 예제</h3>
<iframe width="200" height="200" src="Ex01.htm"></iframe>
<hr />
<table border="1" width="800">
<tr>
<td width="150">
<ul>
<li><a href="http://www.naver.com" target="iframe1">네이버</a></li>
<li><a href="http://www.gogle.com" target="iframe1">구글</a></li>
<li><a href="http://www.yahoo.com" target="iframe1">야후</a></li>
<li><a href="http://www.daum.net" target="iframe1">다음</a></li>
</ul>
<ol>
<li><a href="Ex01.htm" target="iframe1">1번 예제</a></li>
<li><a href="Ex02.htm" target="iframe1">2번 예제</a></li>
<li><a href="Ex03.htm" target="iframe1">3번 예제</a></li>
<li><a href="Ex01.htm" target="iframe1">1번 예제</a></li>
</ol>
</td>
<!--프레임테두리 없애기~ 스크롤링-->
<td width="650">
<iframe width="630" height="500" name="iframe1" frameborder="0" scrolling="auto"></iframe>
</td>
</tr>
</table>
<hr />
<!--form-->
<!--모든 입력 컨트롤은 form태그의 자식이어야함!!-->
<!--값을 넘길떈 get방식 값을 숨길때는 post 방식으로-->
<form action="Ex04_Ok.aspx" method="post">
이름 : <input type="text" name="txtname" /><br />
나이 : <input type="text" name="txtage" /><br />
주소 : <input type="text" name="txtaddress" /><br />
<input type="submit" value="전송!" /><br />
<hr />
<!--get방식으로 url 통해서 전송할수 있어 많은 부분에 유용하게 사용 된다.-->
<!--무조건뒤에 물음표가 붙고 이름 값 이름 값 형식으로 보내야 한다.-->
<a href="Ex04_Ok.aspx?txtname=홍길동&txtage=100">페이지 이동하기</a>
<hr />
<!--Control-->
<!--읽기전용 readonly-->
<!--accesskey 알트+T를 누르면 포커스가 간다.-->
텍스트 박스 : <input type="text" maxlength="5" value="홍길동" size="5"
title="입력불가" accesskey="t"/>
암호상자 : <input type="password" /><br />
<!--편집기 상태에서 값이 변한다는것을 주의하자-->
다중라인 텍스트 박스 : <textarea cols="50" rows="10">이곳이 초기값 영역입니다.</textarea>
<br />
체크박스 : <input type="checkbox" checked="checked" />
<br />
<!--name으로 그룹화 시켰기 때문에 선택된 값은 하나가 된다.-->
라디오버튼 : <input type="radio" name="rb" />예
<input type="radio" name="rb" />아니오
<br />
<!--서버쪽에는 name이 sell인것중에서 숫자별로 들어감-->
셀렉트박스(콤보박스&리스트박스) :
<select name="sell" multiple="multiple" size="5">
<option value="1">초등학생</option>
<option value="2" selected="selected">중학생</option>
<option value="3">고등학생</option>
<option value="4">대학생</option>
</select>
<br />
버튼 : <br />
<!--폼의 액션에다가 데이터를 전송해준다.-->
전송 버튼 : <input type="submit" value="보내기" /><br />
<!--
텍스트 박스에 입력한 값들을 다시 처음상태로 돌려주는 역활을 한다.
같은 폼안에 컨트롤들에게만 적용 된다.
-->
리셋 버튼 : <input type="reset" value="리셋" /><br />
<!--submit가 똑같다. 대신 버튼 대신 이미지를 사용하여라 버튼대신 이미지를 사용할때..-->
전송 버튼 : <input type="image" src="images/smile.png" /><br />
<!--
<input type="button" value="클릭" /> 이문구를 많이 사용 한다.
JavaScript에서 이구문을 많이 사용한다.
-->
그냥 버튼 : <input type="button" value="클릭" onclick="alert('클릭');" /><br />
그냥 버튼 : <button>클릭</button>
<br />
첨부파일 : <input type="file" size="50" />
</form>
</body>
</html>
