form태그 내 onsubmit 이벤트

<script>

function checkIt(){

if (!document.myForm.pass.value){                     // 자바스크립트 : 빈문자열 -> false 반환

alert("비밀번호를 입력하지 않았습니다.");

document.myForm.focus();

return false;

}

}

</script>

<form action="b.jsp"  onsubmit="return checkIt()">

<table>

<tr><td><input type="password" name="pass"></tr>

</table>

<input type="submit" value="회원탈퇴">

</form>

=============================================================

onsubmit : form 태그 안에서 

form전송을 하기 전에 입력된 데이터의 유효성을 체크하기 위해 사용하는 이벤트.

onsubmit='return false' 이면 do nothing in submit.

-----------------------------------

button 속성값

브라우저별 기본 button 요소의 기능이 상이할 수 있으니 되도록 이를 명시하도록 하자.

• type="submit" : 폼의 전송 기능을 담당한다.
• type="reset" : 폼 작성 내용을 초기화하는데 사용한다.
• type="button" : 흔히 자바스크립트를 이용한 기능 구현에 많이 사용한다.
• button type = "submit"일경우 enter클릭시 바로 제출되는데
• <input type="button" onclick="asdf()"> or <button type="button" onclick="cart_go('c')"> 와 같이 처리하면 제출방지

-----------

button 요소의 장점은?

무엇보다도 디자인적인 관점에서 input 요소와 달리 매우 자유롭다. 일반적인 요소들을 디자인하는 모든 것들을 적용할 수 있어 배경으로 이미지를 넣을 수도 있고, <button> 과 </button> 사이에 다른 태그들을 삽입할 수도 있다. 최근에는 각종 라이브러리에서 button 요소들에 대한 꾸밈을 적용한 CSS를 배포하기에 간단히 클래스명을 이용해 이를 적용할 수도 있다.

button 디자인시 참고사항

크로스브라우징을 위해 버튼의 기본 값을 사용하지 말고, 이를 CSS로 디자인하여 사용한다. 기본적으로 IE8 이상과 기타 모던 브라우저들에서 잘 작동하기 위한 범용적으로 사용될 만한 속성들에 대하여 초기화를 진행한다.

• display: inline-block - 부모요소의 text-align 속성으로 버튼의 정렬 위치를 정할 수 있게 사용한다.
• font-family: inherit - 버튼 요소에 상속되지 않는 글꼴을 강제상속 
• vertical-align: middle - 다른 요소를 만날때 수직 가운데 정렬을 대비
• cursor: pointer - 커서에 손가락 표시
• white-space: nowrap - 버튼의 크기가 작을때 줄바꿈 되지 않는다.
• text-decoration: none - 글자의 밑줄 제거
• background: transparent - 기본 배경색을 투명화
• border: none - 테두리 속성을 초기화한다.
• outline: 0 - 포커스시 생성되는 외곽선 제거

--------------

a 요소를 대체하는 것은 어떨까?

폼을 제외한 곳에서 <a> 요소는 앵커(anchor)로써, 문서 간의 연결, URI 참조가 주된 목적이고, <button> 요소는 클릭함으로써 이벤트를 발생시키는게 주된 목적이다. 목적에 맞게 기본 링크들은 a 요소로 마크업하고, 기능을 구현하는 것은 (ex. 팝업창을 띄우거나 어떤 요소를 숨기거나 보이게 하거나 등등) button 요소를 사용하는 것이 시멘틱한 마크업의 지름길이다.----------------------------------------

출처:https://webdir.tistory.com/421