테이블에서 폴백하는 방법은 무엇입니까?

Question

HTML로 등록 페이지를 만들고 있습니다. 입력에 placeholder을 사용하고 있지만 일부 주요 브라우저 (IE < 9, Firefox < 3.7, Chrome/Safari < 4.0)는이 HTML5 기능을 지원하지 않습니다. placeholder에 대한 폴백하는

내가 가장 좋아하는 방법은 모더 나이저 또는 다른 자바 스크립트를 필요로하지 않습니다이 코드입니다 :

<audio>Username: </audio> 
<!-- Fallback; won't be displayed by HTML5 browsers --> 
<input type="text" placeholder="Username"> 
<!-- The placeholder will just be ignored by non-HTML5 browsers--> 

문제는이 등록 양식은 테이블에, 그리고 fallbacking하지 않는 것입니다 작업 - 너무, 대체 텍스트를 보여줍니다 그래서

<table> 
<tr> 
    <audio> 
     <td> 
      Username: 
     </td> 
    </audio> 
    <td> 
     <input type="text" name="Username" placeholder="Username"> 
    </td> 
</tr> 
</table> 

, 어떻게 대체를해야

? Modernizr 및 기타 JS 라이브러리를 알고 있지만, 내 서버의 낮은 업로드 속도와 일반 지침으로 인해이를 피하기를 원합니다. 또한, 그래픽 문제와 관련된 문제로 인해 <td><audio>Fallback</audio></td>을 사용하지 않았습니다 (가로 공백 추가, td가 스타일을 지정할 수 있음).

Answer 1

입력란에 대한 명시적인 라벨이있는 경우 대체 할 필요가 없습니다. 접근성 및 유용성을 위해 권장됩니다.

placeholder 속성을 지원하는 경우에만 브라우저가 audio 요소를 지원한다는 가정에 의존하는 것이 다소 이상 할 것입니다. 예를 들어 IE 9는 audio을 지원하지만 placeholder은 지원하지 않습니다. (placeholder가 아닌 문제 이럴 인 지원되면 라벨을 제거하는)

보다 합리적인 접근법 placeholder는 속성으로서 인식하고 있는지의 라벨을 제거할지 여부를 검사 스크립트의 조각을 추가하는 것이다. 이것에 대한 위험은 브라우저가 실제로 지원하지 않고 속성을 인식 할 수 있다는 것입니다. 가장 안전한 방법은 JavaScript에서 input 요소를 만들고 객체가 인지 여부를 확인하는 것입니다 :

<table> 
<tr id="row"> 
     <td id="label"> 
      <label for="username">Username:</label> 
     </td> 
    <td> 
     <input type="text" name="Username" placeholder="Username" id="username"> 
    </td> 
</tr> 
</table> 
<script> 
if(!('placeholder' in document.createElement('input'))) { 
    document.getElementById('row').removeChild(document.getElementById('label')); 
} 
</script>