양식 취소 버튼 문제

Question

모바일 사이트 용으로 작동하는 양식이 있습니다. 취소 버튼을 이미지 스타일의 버튼으로 변경했으며 모바일 브라우저에서 클릭하면 양식 유효성 검사가 나타납니다. 확인 메시지를 닫은 후 사이트는 이전 페이지로 돌아갑니다. 사용자가 취소 버튼을 클릭했을 때 양식의 유효성이 확인되지 않았지만 양식을 "버튼"에서 "이미지"로 전환 할 때 양식의 유효성이 검사되어 이유를 파악할 수 없습니다.

는 전에 :

<pre> 
    input type="button" onclick="history.back();" value="Cancel" 
</pre> 

후 :

<pre> 
    input type="image" onclick="history.back();" 
    src="images/Mobile_Form_Button_01_Cancel.png" 

</pre> 

Answer 1

<input type="image" /> 

실제로 이미지로 '제출'버튼입니다. 더 많은 정보 here (W3C Schools).

작동 시키려면 <input type="button" />으로 다시 변경하고 CSS를 사용하여 스타일을 지정하십시오.

Answer 2

form 요소 내부에있는 input type=image은 특별한 종류의 제출 버튼 역할을합니다. 즉, 기본적으로 스크립트 또는 HTML 정의 유효성 검사가 수행됩니다. 계약에서 input type=button 요소는 기본 동작이없는 버튼을 만듭니다. 모든 조치는 스크립팅되어야합니다. 정적 HTML에서는 스크립트를 사용하지 않는 경우 버튼을 아무리 클릭해도 아무 것도하지 않고 브라우저에 스크립트가 표시되지 않습니다.

다른 방법으로이를 피할 수 있습니다 . 한 가지 방법은 onclick 코드 끝에 return false을 추가하여 기본 동작을 방지하는 것입니다. 다른 하나는 input type=button 또는 button을 사용하고 선호하는 방식에 따라 스타일을 지정하는 것입니다. 또 다른 하나는 img 요소를 onclick 속성 (하지만 JavaScript로 생성되는 것이 바람직 함)으로 설정하는 것입니다.

가장 좋은 방법은 요소를 제거하는 것입니다. 웹 페이지가 아닌 HTML5 응용 프로그램을 작성하지 않는 한 사용자 편의성 측면에서 브라우저 기능을 복제해서는 안됩니다.