겉바속촉

[html] onchange로 페이지이동하기 본문

IT일기(하반기)/HTML

[html] onchange로 페이지이동하기

겉바속촉 2020. 6. 11. 16:53
728x90
반응형

이번에는 onchange를 연습해보도록 합시다:)

 

우선

html파일 3개를 만들어주세요

그 다음 이미지를 넣고 select로 이동시켜볼게요

 

select1

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>select1페이지입니다</h1>
<img alt="" src="../image/beauty1.jpg" width="1250"height="850">

</body>
</html>

 

select2

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>select2페이지입니다</h1>
<img alt="" src="../image/beauty2.jpg" width="1250"height="850">

</body>
</html>

 

select3

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1>select3페이지입니다</h1>
<img alt="" src="../image/beauty3.jpg" width="1250"height="850">

</body>
</html>

 

main

 

<body>블럭 사이에 <form>을 만들어주세요

그리고 <select>를 주실 건데요 ---> onchange 를 적용시켜주시는 겁니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
 <form action="" name="frm" >
	<select name="list" onchange="location=document.frm.list.value">
		<option>선택하세요</option>
		<!-- value는 html페이지 -->
		<option value="select1.html">페이지1로 이동</option>
		<option value="select2.html">페이지2로 이동</option>
		<option value="select3.html">페이지3로 이동</option>	
	</select>
 </form>

</body>
</html>

 

컴파일해보시면

 

다음과 같은 창이 실행이 됩니다.

 

선택하세요 박스 클릭하시면

다음과 같이 목록이 뜹니다:)

 

코드에서 작성한 각각의 value값들인 거쥬

 

 

페이지1로 이동 누르면

 

 

 

 

페이지2로 이동 누르면

 

 

 

페이지3로 이동 누르면

 

 

 

각각 잘 작동했다면 성공!^^!

728x90
반응형
저작자표시 비영리 변경금지

'IT일기(하반기) > HTML' 카테고리의 다른 글

[html] olul연습하기  (0) 2020.06.12
[html] function 여러개 만들어서 가져오기  (0) 2020.06.11
[html] 마우스 이벤트 객체, id값 지정한곳에 출력  (0) 2020.06.11
[html] 자바스크립트- popup창 생성하기  (0) 2020.06.11
[html] 자바스크립트-수강신청  (0) 2020.06.11
'IT일기(하반기)/HTML' Related Articles more