JSP(Java Server Page)
FORM 태그를 이용해서 페이지를 작성하다 보면 'INPUT' 타입이 'SUBMIT'이거나 'RESET' 인 것만 사용해봤을텐데요, 기존의 폼(FROM)태그를 이용한 방법에는 기능이 한정되어 있었기 때문에, 이런 생각을 다들 해보셨을 겁니다.
'그냥 버튼에 자유롭게 기능을 넣어서 사용할 수 없을까?'
당연!! 존재합니다. 그것은 'INPUT'타입이 'BUTTON'인 것 인데요. 다음과 같이 작성 가능합니다.
<FORM>
<INPUT type='BUTTON'>
</FORM>
<INPUT type='BUTTON'>
</FORM>
참고로, 버튼을 만드는 방법은 <FORM> 태그를 제외한 몇가지 방법이 존재하는데요.
1. <FORM> 태그의 <INPUT>의 타입으로 지정합니다.
2. <BUTTON></BUTTON> 태그로 만듭니다.(1번과 유사합니다.) - 여기서 다루지 않습니다.
3. 이미지나 플래시 등등을 이용해서 버튼처럼 사용합니다. - 여기서 다루지 않습니다.
2. <BUTTON></BUTTON> 태그로 만듭니다.(1번과 유사합니다.) - 여기서 다루지 않습니다.
3. 이미지나 플래시 등등을 이용해서 버튼처럼 사용합니다. - 여기서 다루지 않습니다.
그러면, 실행화면은 다음과 같이 구성됩니다.
[실행화면]
보시면 알겠지만, 그냥 버튼만 만들어 진겁니다. 'submit'과 동일한 방법으로 이름을 주는것이 가능한데요. 'value'라는 속성을 주어서 다음과 같이 만들 수 있습니다. .
<FORM>
<INPUT type='BUTTON' value='버튼'>
</FORM>
<INPUT type='BUTTON' value='버튼'>
</FORM>
[실행화면]
위에것을 눌러보시면 아무런 기능이 없는 것을 볼 수 있는데요. 여기서 기능을 부여하실려면, 자바스크립트을 이용해서 접근을 해야 합니다.
주로, 버튼과 관련해서 사용되는 이벤트는 'onclick'으로 눌렀을시에 기술되어진 스크립트가 실행이 됩니다.
위의 버튼은 제가 메시지를 출력할 수 있도록 onclick 이벤트를 사용해서 구성해 보았습니다.
코드는 다음과 같습니다.
<%@ page language="java" contentType="text/html; charset=EUC-KR" %>
<html>
<head>
<title>Insert title here</title>
</head>
<SCRIPT LAUNGUAGE='JAVASCRIPT'> // 자바 스크립트 시작
function test(){ // test라는 함수 정의
alert("버튼을 클릭하셨습니다."); // 실행코드
}
</SCRIPT> // 자바 스크립트 종료
<body>
<FORM>
<INPUT type='BUTTON' value='버튼' onclick='test()'> // 이벤트 부여
</FORM>
</body>
</html>
<html>
<head>
<title>Insert title here</title>
</head>
<SCRIPT LAUNGUAGE='JAVASCRIPT'> // 자바 스크립트 시작
function test(){ // test라는 함수 정의
alert("버튼을 클릭하셨습니다."); // 실행코드
}
</SCRIPT> // 자바 스크립트 종료
<body>
<FORM>
<INPUT type='BUTTON' value='버튼' onclick='test()'> // 이벤트 부여
</FORM>
</body>
</html>
스크립트에 관한 자세한 내용은 생략하구요. 자바를 해보셨다면 메소드 처럼 생각해보시면 되겠네요.
'INPUT'을 보시게 되면, 'onclick'이라는 속성, 이벤트가 있는데요. 말 그대로 '클릭이 되었을때~' 라는 의미를 가지고 있습니다. 클릭되었을때 'test()' 명을 가진 자바스크립트 함수를 불러오는데요. 이 함수는 현재 "버튼을 클릭하셨습니다." 라는 메시지를 출력하도록 작성되어 있습니다.
기본적인 자바스크립트를 아신다면, 충분히 'button'을 활용할 수 있을 겁니다. 이러한 형식을 잘 아신다면, 웹페이지에 다양한 효과를 낼 수 있으니, 꼭 숙지하고 익히도록 합시다. 관련 내용은 계속 포스팅 하겠습니다.
| 도움 되셨다면 밑의 추천(손가락 표시)과 댓글 부탁드립니다. |
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [자바스크립트] 'Date' 개체, 날짜와 시간값을 얻어봅시다! (0) | 2012.06.17 |
|---|---|
| [자바스크립트] 'prompt', 프롬프트창을 띄워봅시다! (0) | 2012.06.17 |
| [HTML] '툴팁', 부가적인 정보를 제공하자! (6) | 2011.12.16 |
| [JSP] 익스프레션 언어 1. EL언어에 대해서 (1) | 2011.07.22 |
| [기본지식] 절대경로와 상대경로 (14) | 2011.07.21 |
