어둠사자

가변 폼 액션 접근성 확보하기

가변 폼 액션 상당히 많이쓰고있습니다.
필요에 따라 Form의 Action을 바꿔서 쓰는 방식인데 코드도 그리 복잡한건 아니라서
왠만한 브라우저에서는 호환됩니다만... 비스크립트 환경에선 접근성 확보가 어렵습니다.

이건 제가 쓰고있는 방법입니다.
비스크립트 환경 코딩에 관심있으신 분있으시다면 함 읽어보시길 바랍니다.

* 기존 방식
<script type="text/javascript"> 
function OnSubmitForm() 
{ 
    if(document.pressed == 'Insert') 
    { 
        document.myform.action ="insert.html"; 
    } 
    else if(document.pressed == 'Update') 
    { 
        document.myform.action ="update.html"; 
    } 

    return true; 
}

</script>
<form name="myform" onsubmit="return onsubmitform();"> 
<input type="submit" name="operation" onclick="document.pressed=this.value" value="insert" /> 
<input type="submit" name="operation" onclick="document.pressed=this.value" value="update" /> 
</form>


- 자바스크립트로 action 값 임의 변경, 기능 변화 클라이언트(브라우저)에서 처리

* 접근성 향상 방식
<form id="form" method="post" action="url">
   <div>
   이 항목에
   <select name="name">
      <option>작업1</option>
      <option>작업2</option>
      <option>작업3</option>
   </select>을 진행합니다. <noscript><input type="submit" value="확인" /></noscript>
</div>
</form>
- Action은 변화없고 자바스크립트에서 셀렉트 값 변경 후 submit 시킴, 기능 변화 서버에서 처리
- 이 경우 스크립트 사용시 셀렉트 박스는 스타일시트로 숨기는 등의 방법을 이용함.

이상 별거아닌 작은 팁이였습니다... ㅎㅎ;;

* 성원에 힘입어... 스크립트 하나 추가해드립니다.
선택자-스타일선택자(?)-display-none 의 방식으로 가면 됩니다.
- normal: getElementById('id').style.display = "none";
- jquery: $("selector").css("display", "none");
이런 식으로 스크립트 사용 시 스타일을 변경해서 안보이게하면 됩니다.
(스크립트 사용하지 않을 시 기본적으로 보이게 하기위함)
|

댓글 1개

짧게 작성돼서 그런데, 굉장히 중요한 글입니다. 추천x10

제 경우엔 select 쪽은 CSS가 아니라 JavaScript에서 숨겨줍니다. 그래야 JavaScript disable 환경에서도 단일 작업으로 고정되는 일을 피할 수 없으니까요.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
11-11-16 조회 3,511
11-11-15 조회 2,623
11-11-15 조회 3,254
11-11-15 조회 2,701
11-11-14 조회 2,791
11-11-14 조회 3,737
11-11-14 조회 3,538
11-11-14 조회 4,227
11-11-14 조회 2,827
11-11-14 조회 2,736
11-11-13 조회 4,032
11-11-12 조회 2,670
11-11-12 조회 2,788
11-11-12 조회 4,015
11-11-11 조회 2,918
11-11-11 조회 2,865
11-11-11 조회 2,540
11-11-11 조회 2,860
11-11-11 조회 3,995
11-11-11 조회 2,451
11-11-11 조회 4,692
11-11-11 조회 2,725
11-11-11 조회 2,555
11-11-11 조회 2,423
11-11-11 조회 2,837
11-11-11 조회 2,622
11-11-11 조회 2,613
11-11-10 조회 3,054
11-11-10 조회 2,519
11-11-10 조회 3,151
11-11-10 조회 3,710
11-11-10 조회 2,413
11-11-10 조회 2,544
11-11-10 조회 2,372
11-11-09 조회 2,572
11-11-09 조회 3,284
11-11-09 조회 2,754
11-11-09 조회 2,890
11-11-08 조회 2,661
11-11-08 조회 2,996
11-11-08 조회 2,330
11-11-08 조회 3,270
11-11-08 조회 2,564
11-11-08 조회 3,341
11-11-06 조회 1만
11-11-06 조회 2,635
11-11-06 조회 3,625
11-11-06 조회 3,442
11-11-06 조회 3,742
11-11-06 조회 3,926
11-11-05 조회 2,460
11-11-05 조회 2,633
11-11-04 조회 8,541
11-11-04 조회 2,590
11-11-04 조회 2,643
11-11-04 조회 3,649
11-11-04 조회 2,545
11-11-04 조회 2,723
11-11-03 조회 3,984
11-11-03 조회 2,647
11-11-03 조회 5,618
11-11-02 조회 5,893
11-11-01 조회 3,175
11-11-01 조회 2,625
11-11-01 조회 3,227
11-11-01 조회 2,520
11-11-01 조회 2,858
11-11-01 조회 2,383
11-11-01 조회 9,407
11-11-01 조회 2,952
11-10-31 조회 2,334
11-10-27 조회 2,600
11-10-26 조회 3,194
11-10-26 조회 2,687
11-10-26 조회 2,539
11-10-26 조회 2,559
11-10-26 조회 2,452
11-10-25 조회 2,508
11-10-25 조회 2,604
11-10-25 조회 2,549
11-10-25 조회 2,527
11-10-24 조회 2,570
11-10-24 조회 2,835
11-10-24 조회 2,842
11-10-23 조회 3,221
11-10-23 조회 2,799
11-10-23 조회 2,685
11-10-21 조회 2,544
11-10-21 조회 2,472
11-10-21 조회 2,459
11-10-21 조회 2,849
11-10-20 조회 4,029
11-10-19 조회 2,521
11-10-19 조회 2,913
11-10-19 조회 4,037
11-10-19 조회 3,183
11-10-19 조회 2,881
11-10-19 조회 6,708
11-10-18 조회 4,042
11-10-18 조회 2,613