2011-04-27 3 views
2

제출 요소에 대해 다음을 수행 할 때 나타나는 함정 및 이점은 무엇입니까? 예 : jsbin.com/onabo4HTML 보이지 않음 입력 함몰 및 장점 제출

아마도 IE와 다른 브라우저에는 입력 스타일 문제가 있습니다. 위의 좋은 해결책입니까? overflow:auto을 추가하면 테이블 내부에 있지 않는 한 IE 브라우저 렌더링 문제가 수정됩니다. 위의 좋은 해결책입니까?

위의 코드로 해결할 수있는 다른 문제는 무엇입니까?

편집 : 입력 : type = sumbit의 입력을 원하면 입력 요소에 대한 표시 : 블록 문제도 해결되는 것으로 보입니다. 문제는 여기에 설명 : input with display:block is not a block, why not?

편집 2 :를 나는 다음을 수행 권한다 코드 순수 주의자 및 크로스 브라우저 지원의 경우 : 온 클릭 아마 선택 사항이지만 일부 브라우저가 레이블 요소를 지원하지 않을 수 있습니다. tabindex는 사용자가 탭 요소를 사용할 수 있도록 허용하는 것입니다. 기본적으로 tabindex는 키보드 친숙 함을 추가합니다.

<!doctype html> 
<style> 
    .type-submit input{display:none;} 
    .type-submit{background:pink /* more pretty styles.... */} 
</style> 
<label onclick=this.form.submit() tabindex class=type-submit> 
    Sumbit<input type=submit> 
</label> 
+2

허가, 뭔가 새로운 일상을 배우고, 그것은 매우 흥미로운 생각이다. – Ben

+0

@mazzzzz 많은 zs :) 어쨌든 나는 모든 최신 브라우저가 라벨 태그를 지원한다고 생각했습니다. N4 나 IE5가 유일한 문제인 경우 걱정하지 않아도됩니다. – William

답변

1

좋은 해결책입니다. onClick="this.parentNode.submit()"을 레이블에 추가합니다 (브라우저가 레이블을 클릭하여 단추를 클릭 할 수없는 경우).

바이올린 : (이 버튼에 라벨을 지원하지 않는 브라우저에서 실행 될 때까지) http://jsfiddle.net/vqtp9/1/

+0

그게 좋은 생각이야! 비록 당신이 p 또는 divs 또는 뭔가에 레이블을 래핑하기로 결정한 경우에만'this.form.submit()'을 사용합니다. 또한 그것은 더 짧다. http://jsfiddle.net/vqtp9/2/ :) – William

1

나에게 좋은 해결책처럼 보입니다. 테스트하고 그것을 지원하는 브라우저에서 사용해보십시오. 제대로 작동한다면 잘 할 수 있습니다!

1

jQuery UI의 버튼 요소를 사용하는 것이 쉽고 광범위하게 지원됩니다. 스타일링은 좀 더 최신이며 href 링크, 입력 유형 = 제출 또는 버튼 요소에 버튼을 만들 수 있습니다. 또한 원하는 경우 둥근 모서리, 그라디언트, 패턴 및 마우스 오버로 스타일을 향상시킬 수 있습니다. 점진적으로 향상되었으므로 역 호환성이 뛰어납니다.

+0

JQuery는 UI와 함께 훌륭한 라이브러리이지만 실제로 대안을 찾지 못했습니다. 솔루션을 검증하려고했습니다. JQuery UI는 휴대 전화를 제외하고는 멋지지만 악몽을 더합니다. – William

-1

http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/ 왜 당신은 그냥 대신 스타일링 엉망으로 주위에 일 처리의 <input type="image" />를 사용하지 마십시오

여기에 좋은 혀입니다.

+1

그러면 모든 제출 요소에 대해 별도의 이미지를 만들어야합니다. 이는 단순한 스타일 추가에 많은 불필요한 작업처럼 들립니다. – William

+0

글쎄, 당신은 일련의 버튼을 만들어야한다고 말한 적이 없다. – Kon