웹프로그램 연구(IX) Input.button 으로 a.href를 구현

한글로 작성된 기술 자료를 인터넷에서 얻기란 쉽지 않은 일이다. 내가 아무리 한글로 열심히 작성했다고 해서 이글을 찾아내서 읽어 볼 확률적 가능성은 매우 적다고 본다.

How to make a.href link with input.button?

Some investigation I found through the internet, shows that anchor <a href...> can be implemented using like this way "<input type='button' onclick=fun(url)>".
"onclick" event procedure also can be represented as follows;

1. onclick="document.location.href='url';"

These are good examples, though, I would rather use another form like this:

1. <script>
2. function linkto(Sender){
3.     document.location.href = Sender.src;
4. }
5. </script>
6. <input type="button" src="/?query=value" onclick="linkto(this);">

"src" property is only for <input type="image"> button, which is often called image button, according to DOM documentation.

Some developers can notice that it can be replaced with jquery javascript style coding like below;

1. <script>
2. $("input[class=link]").click(function(){
3.     document.location.href = this.src;
4. });
5. </script>
6. <input type="button" class="link" src="/?query=value">

It looks natural and magical.

Discussion in Korean

jquery 자바스크립트를 써서 스크립트를 포함시키는 경우에 $(document).ready 이벤트에서 자동으로 실행시키는 것으로 onclick함수의 구현을 감출 수 있다. 감추는 것만이 목적은 아니고 링크 버튼을 여러 페이지에 걸쳐서 여러개 사용할 경우에 편리하다고 할 것이다.

한편 링크(Anchor)를 굳이 버튼으로 구현해야할 필요가 있을까?
이는 화면사양을 어느쪽으로 통일할 것인가에 달려있다. 단순 앵커를 버튼모양으로 구현할 수도 있고 역으로 버튼을 사용하여 앵커를 구현할 수 있다.

입력 파라미터가 있는 경우에는 단순 링크가 아닌 송신(subnit) 버튼을 구현해야 하는 경우가 있는데 이런 경우는 소개한 방식과 달리 <form>을 사용해야 한다.