소위 히든폼이라 불리는 HTML의 오용

페이징 기능을 포함한 게시물 리스트 화면이나 Breadcrumb 구조 등 다수의 공통적인 파라미터를 가지고 다녀야 하는 경우가 있다. 이 경우에 쓰이는 방법이 여러가지가 있는데 일반적으로 서버 사이드 스크립트를 통해 공통적인 파라미터를 묶어서 여러 개의 관련 링크에서 일관적으로 적용하도록 하는 방법이다. 그런데 다음과 같은 HTML 코드를 만들어내는 경우가 있다. (common1~3을 공통적인 파라미터라고 가정한 게시물 보기 화면) Breadcrumb 구조 등 다수의 공통적인 파라미터를 가지고 다녀야 하는 경우가 있다. 이 경우에 쓰이는 방법이 여러가지가 있는데 일반적으로 서버 사이드 스크립트를 통해 공통적인 파라미터를 묶어서 여러 개의 관련 링크에서 일관적으로 적용하도록 하는 방법이다. 그런데 다음과 같은 HTML 코드를 만들어내는 경우가 있다. (common1~3을 공통적인 파라미터라고 가정한 게시물 보기 화면)

<script type="text/javascript">
function goDelete(id) {
    var form = document.forms["blahform"];
    form.id.value = id;
    form.action = "delete";
    form.submit();
}
function goUpdate(id) {
    var form = document.forms["blahform"];
    form.id.value = id;
    form.action = "updateForm";
    form.submit();
}
function goList() {
    var form = document.forms["blahform"];
    form.action = "list";
    form.submit();
}
</script>
 
<a href="javascript:goDelete(1)">삭제</a>
<a href="javascript:goUpdate(1)">수정</a>
<a href="javascript:goList()">리스트</a>
 
<form name="blahform" method="post">
<input type="hidden" name="common1" value="1" />
<input type="hidden" name="common2" value="2" />
<input type="hidden" name="common3" value="3" />
<input type="hidden" name="id" value="" />
</form>

프로그램 적으로 생각하자면 공통 파라미터의 일관성을 유지할 수 있는 한가지 방법이라고 할 수 있겠지만, 결과적으로 HTML 태그가 의미에 맞지 않고 자바스크립트 의존적인 코드가 되었다. 기본적으로 form 태그는 사용자 입력 양식을 뜻하는데 위에 쓰인 form 태그는 프로그램 내부적인 용도 그 이상의 의미를 지니지 않는다.

앞서 언급한 것과 같이 공통 파라미터를 한 변수에 할당하는 방법으로도 일관성을 충분히 얻을 수 있고 그 이외에도 서버 사이드 스크립트 단에서 위의 코드에서 얻으려고 했던 이득을 놓치지 않을 수 있는 방법이 많이 있다. 이와 같은 오류를 범하지 않으려면 HTML의 구조화를 해치지 않고 자바스크립트 의존적인 페이지를 피하는 자세가 필요하다.