웹 개발을 할때 폼전송에 대해서 모르시거나 잘못 아시는분이 꽤 있습니다. 

제가 그 가이드를 알려드립니다. 

그냥 저 따라 하세요. 

1. form 태그에도 name 붙일 수있다. 

폼 태그에 name 붙여도 됩니다. 그리고 document.forms.[폼이름] 으로 폼을 접근할 수 있습니다. 

id 만 써도 무방하고, name 만 써도 무방합니다. 다 써도 됩니다. 

이건 존중이니 취향해 드리겠습니다. 

2. form에 action 속성을 자스로 보낸다 해도 반드시 명시하라. 

어떤 코딩에는 form에 action 속성을 빈 값으로 주거나 아예 안주고, 자스에서 부여하는 경우가 많습니다. (action 속성이 바뀌는 경우 제외) 이 경우 스크립트 오류 시 현재 페이지에서 폼전송을 해버리므로, 개발할때, 디버깅할때 상당히 안좋은 습관이며, action 속성은 필수 속성이기 때문에 놓치면 안됩니다. 

반드시 기본 폼을 전송할 주소를 명시하셔야 생각치 못한 오류가 나도 안전하게 폼전송이 이루어집니다. 

물론 서버단에도 유효성 검사는 해야겠지만, 범주에 벗어나니 패스. 

3. input[type=text] 에 display:none 하지 말고 그냥 input[type=hidden] 히든 양식을 써라. 

편리한 기능을 왜 안쓰려 하십니까? 고정값이라던가 사용자가 설정하지 말아야 할 값을 보관하기 위한 hidden 양식이 있습니다. 

게다가 원래 input[type=text] 에 display:none 해도 해당 양식은 전송되는게 웹표준입니다. 

하지만 오페라 구버전과 IE 10은 안보내죠. 이런 불확실성때문 절대 비추. 

select 에 기타 지정할 때 양식 보이고 말고 지정할 거 아니라면 평소에 쓰지 마세요. 

4. <a href="form.submit()">폼전송</a> 쓰지말고 input[type=submit] 또는 button[type=submit] 쓰라. 

이건 좀 심합니다. 물론 자유도는 있겠지만, CSS로 그럴싸하게 꾸밀 수 있고, 이미지도 입힐 수 있는 마당에 왠.. 

하이퍼링크로 폼전송 상당히 안좋습니다. 사용자에게 불편합니다. 엔터가 안먹히는 경우가 발생하거든요. 

검색시에 검색버튼을 링크로 한다면 이벤트로 엔터키 누르면 폼전송 하는 이벤트를 구현해야 하고 얼마나 힘듭니까? 

웹표준이 편하게 해준거 제발 쓰시기 바랍니다. 개발과 유지보수시 비용 낭비하는 주범입니다. 

5. onsubmit 이벤트를 활용하라. 

이거 또한 미치는게, submit 이벤트를 안쓰고 함수로 따로 씁니다. 그리고 버튼에 onclick 이벤트에 폼전송을 걸죠. 

이런 분 또한 상당히 많습니다. 

이렇게 하면 엉뚱한 작동을 유발합니다. 

예를 들면, button[type=submit] 등의 폼전송 버튼을 놓고 onclick 이벤트에 폼전송을 걸면 폼전송이 2번 일어납니다. 

양식을 쓰고 실수로 엔터를 치면, onclick 에 있는 폼전송 이벤트를 패스하고 넘어가죠. 생각치 못한 결과가 나옵니다. 

폼전송 전에 유효성 검사를 하고자 한다면, 반드시 onsubmit 을 이용하세요. onsubmit 은 폼전송 전에 발생하는 유용한 이벤트입니다. 또한 불필요하거나 유효성 검사를 통과하지 못한 폼전송을 사전에 차단할 수 있구요. 

6. 파일 업로드는 폼전송에만 유효하다. 

고객분들이 크롬 같은 최신 브라우저 쓰는게 대부분인가요? IE 구버전 쓰는 고객분들이 더 많을 겁니다. 

그런데 Ajax가 아무리 좋다한들 파일 업로드 어떻게 하냐고 질문하시는 분들 많습니다. 

안됩니다. 하지마세요. 폼전송을 하세요. 굳이 파일업로드 Ajax 처럼 하고싶다면 히든프레임으로 폼전송하세요. 

7. 파일 업로드에 확장자 체크는 가능하다. 

파일 업로드 양식은 제약사항이 상당히 많습니다. 사용자의 보안을 위해서인데요, 그렇다고 아예 접근을 못한다는건 아닙니다. 대표적으로 많이 쓰는 3가지 속성을 알려드립니다. 

file_upload.value : 사용자가 업로드한 파일명을 가져온다 (set 불가능, 파일경로는 보안상 못가져옴.) 

file_upload.onclick : 사용자가 파일 업로드 버튼을 누를 시 이벤트지만, 일부 브라우저가 작동이 안됨. 

file_upload.onchange : 사용자가 파일을 지정했을 시 발생하는 이벤트. 

그렇다면 사용자가 무슨 파일을 올렸는지 알수 있냐면? 있습니다. 폼의 onsubmit 이벤트를 통해 파일의 유효성을 체크하세요. 보통 확장자 체크를 하겠죠? 간단한 예제입니다. 

if(/\.(jpg,gif,png)$/.test(this.elements.file_upload.value)){ 

    alert('업로드 가능한 확장자가 아닙니다.'); 

    return false; 

} 

나머지 유효성 검사는 서버에서 하시기 바랍니다. 실질적으로 서버가 받고, 파일 내용도 읽을 수 있으며, 실제 파일이 무슨 형식인지까지도 알 수 있습니다. 브라우저는 그런 걸 가르쳐 주지 않습니다. 최신 버전에야 FileReader 객체로 파일 내용을 읽을 수 있다 해도, 모든 고객이 최신 브라우저를 사용한다는 보장이 없죠. 

8. 파일 업로드가 포함되어 있다면 반드시 enctype="form/multipart-data" 속성을 줘야 한다. 

당연하지만 다시한번 짚고 넘어가야 할 것 같아서 설명한 겁니다. 더이상 설명은 필요 없죠? 

9. form에 소속된 양식이 아무리 테이블이나 div 에 숨어있어도 양식 요소는 바로 가지고 올 수 있다. 

form 객체에는 elements 속성이 있습니다. 이는 양식으로 등록된 모든 요소를 담습니다. 

몇몇 분들이 힘들게 div 같은 컨테이너 안에 있는 양식에 접근할 때가 있는데, 양식 이름이 중복만 아니라면 그럴 필요 없습니다. document.getElementById? 물론 가능하지만 입력하기엔 길이가 길죠. 

HTML4,5 표준에서는 form.(양식이름) 이런식으로 elements 속성 안쓰고도 바로 접근할 수 있습니다. 하지만 XHTML시절 브라우저에서는 그런 표준이 없기 때문에 크로스 브라우저에서는 elements 속성으로 접근하는게 유효합니다. 

특히 DOCTYPE를 XHTML 로 지정했다면, IE를 제외한 모든 브라우저에서 elements 속성을 안쓰고 바로 접근하려 한다면 속성이 null이거나 개체가 아니라고 오류가 뜰겁니다. 

10. 모든 양식 요소(input, select, textarea)에는 form 속성이 있다. 

모든 양식에는 form 속성이 있는데, 이는 자신이 소속된 form 태그 요소를 가져오는 속성입니다. 

form 요소에 다른 양식을 가져올 때 매우 편리합니다. 예를 들면 비밀번호 다시 입력 후 매칭하는 기능을 구현할 때 유용하게 써먹을 수 있는 속성이죠.