Firefox에서 input 태그를 다이나믹하게 추가했을 경우 form의 element로 인식 못하는 경우 > script

회사에서 아주 예전에 작성된 HTML을 수정하다가 하루종일 고생한 경험담을 얘기하고자 한다. 결론을 얘기하면 원인은 XHTML 표준을 지키지 않아서 였는데, 이게 원인일 줄이야!!!

다음과 같은 스타일의 HTML 태그가 있다고 하자. 과거에 CSS를 잘 사용하지 않을 때는 form 태그의 기본 패딩값에 의해 테이블 레이아웃이 깨지는 것을 방지하기 위해서 내가 자주 사용하던 스타일이다.

<table>
<tr><td>테이블 헤더</td><tr>
<form>
<tr><td>폼 요소들</td></tr>
</form>
</table>

여기에다 자바스크립트로 폼에 input 태그를 하나 추가하고, input 박스에 값을 치고 submit 버튼을 누르면 IE에서는 input 박스에 입력된 값이 전송이 되지만, 왠일인지 Firefox에서는 새로 추가된 input 박스의 내용은 전송이 되지 않는거다.

정말 하루 종일 삽질하다가 발견한 원인, 그리고 해결방안은 다음과 같이 XHTML을 준수하는 스타일로 HTML을 코딩하는 거였다.
표준을 지키는게 중요함을 다시 한번 느낀 하루였다.

<form>
<table>
<tr><td>테이블 헤더</td><tr>
<tr><td>폼 요소들</td></tr>
</table>
</form>