유효성 검사 요약 오류 목록에 레이블 태그 사용?

Question

나는 실패한 양식 제출에 대한 유효성 검증 오류 요약에 <label> 태그를 사용하려고 생각하고 있었고, 문제가 발생할 경우 문제를 해결할 수 있는지 알 수 없습니다. 누구든지이 접근법을 피할만한 충분한 이유를 생각할 수 있습니까? 유용성, 기능성, 디자인 또는 기타 문제가 모두 도움이됩니다.

오류 목록의 광고 항목을 클릭하고 잘못된 입력 요소로 이동한다는 생각을 정말 좋아합니다. 특히 모바일 광고의 경우 수직 방향이 더 많이 사용되고 스크롤이 고통 스럽습니다. 지금까지 발견 할 수있는 유일한 문제는 레이블이 개별 ID가없는 라디오 버튼이나 체크 박스를 탐색하지 않는다는 것입니다 (단일 ID 태그 라디오/체크 박스 요소의 레이블을 클릭하면 선택 항목이 변경됨). 그것은 레이블이없는 것보다 더 나쁘게 만들지 않습니다.

다음은이 아이디어 (단순화를 위해 생략 된 CSS)의 HTML 테스트 샘플입니다.

<div class="validation-errors"> 
    <p>There was a problem saving your form.</p> 
    <ul> 
     <li><label for="select1">Select 1 is invalid.</label></li> 
     <li><label for="text1">Text 1 is invalid.</label></li> 
     <li><label for="textarea1">TextArea 1 is invalid.</label></li> 
     <li><label for="radio1">Radio 1 is invalid.</label></li> 
     <li><label for="checkbox1">Checkbox 1 is invalid.</label></li> 
    </ul> 
</div> 
<form action="/somewhere"> 
<fieldset><legend>Some Form</legend> 
    <ol> 
     <li><label for="select1">select1</label> 
      <select id="select1" name="select1"> 
       <option value="value1">Value 1</option> 
       <option value="value2">Value 2</option> 
       <option selected="selected" value="value3">Value 3</option> 
      </select></li> 
     <li><label for="text1">text1</label> <input id="text1" name="text1" type="text" value="sometext" /></li> 
     <li><label for="textarea1">textarea1</label> <textarea id="textarea1" name="textarea1" rows="5" cols="25">sometext</textarea></li> 
     <li><ul> 
       <li><label><input type="radio" name="radio1" value="value1" />Value 1</label></li> 
       <li><label><input type="radio" name="radio1" value="value2" checked="checked" />Value 2</label></li> 
       <li><label><input type="radio" name="radio1" value="value3" />Value 3</label></li> 
      </ul></li> 
     <li><ul> 
       <li><label><input type="checkbox" name="checkbox1" value="value1" checked="checked" />Value 1</label></li> 
       <li><label><input type="checkbox" name="checkbox1" value="value2" />Value 2</label></li> 
       <li><label><input type="checkbox" name="checkbox1" value="value3" checked="checked" />Value 3</label></li> 
      </ul></li> 
     <li><input type="submit" value="Save &amp; Continue" /></li> 
    </ol> 
</fieldset> 
</form> 

클릭 수있는 동작을보다 명확하게 만들기 위해 추가 한 유일한 것은 라벨에 CSS 규칙을 추가하는 것입니다. 즉 그들이 제출하고 유효성 검사 오류를보고 시도를 사용자가 위치 할 곳이기 때문에

.validation-errors label { text-decoration: underline; cursor: pointer; } 

Answer 1

자바 스크립트 검증의 경우, 제출 양식을 아래로, 아래에 그 목록을 내려 놓고해야한다.

서버 측 유효성 검사의 경우 사용자의 경우처럼 맨 위에 올려야합니다.

또는 일관성을 유지하려는 경우 자바 스크립트 유효성 검사 오류가 맨 위에 표시 될 수 있지만 유효하지 않은 핸들러가 오류가있는 곳으로 스크롤되는지 확인하십시오.

외모가 좋습니다! 사용성을 향상 시키며 레이블은 해당 입력과 여전히 고유 한 관계를 유지합니다.