2012-11-16 3 views
4

내 페이지에는 서버 측에 데이터를 전달하는 데 사용되는 숨겨진 양식 필드가 여러 개 있습니다. 디버깅 목적으로 각 입력 필드에서 type = hidden 속성을 설정하는 것보다는 모든 입력 필드를 숨겨진 클래스에 모두 포함시켜 숨기기가 쉽습니다.type = 'hidden'인 입력 필드 숨기기 대 디스플레이가있는 클래스 사용 : 없음

디버깅이 필요할 때마다 해당 클래스 속성을 쉽게 수정하여 디버그 모드로 전환 할 수 있습니다. 물론 두 접근법 모두 입력 필드를 숨기는 데 사용되지만 실제로이 접근법 (클래스를 통해 숨김)이 실제로 널리 사용되지 않는 이유는 확실하지 않습니다. 당신이 선호하는 접근법에 대해 밝힐 수 있습니까?

+0

닫기를 투표 한 사람에게도 이것이 왜 좋은 질문이 아니거나 내 질문을 개선하는 방법을 말해주십시오 –

답변

6

<input type="hidden">은 입력 유효성 검사, 자동 완성 및 기타 사용자 상호 작용 관련 이벤트를 트리거하지 않습니다. 사용자의 직접 입력없이 원시 데이터를 저장하도록 설계되었습니다.

그러나 시각적으로 숨겨진 <input type="text">은 여전히 ​​사용자 상호 작용 구성 요소로 간주됩니다. 그리고 시각 보조 장치를 사용하는 일부 장치에서는 숨겨진 것이 아니며 예상 한 일관성을 제공 할 수 없습니다. 그것이 그렇게하는 것이 선호되지 않는 이유입니다.

예 : <input type="hidden">은 페이지를 새로 고치기 전에 자동으로 자동 완성되거나 입력 된 데이터를 보존하지 않으며 실패한 유형 유효성 검사를 위해 양식이 제출되지 않도록합니다.

5

CSS 접근 방식은 유용성 및 접근성에 좋지 않습니다. CSS를 사용하지 않는 사람 (아주 오래된 휴대폰, 스크린 리더를 가진 사람들)을 생각해보십시오. 예상대로 CSS를 렌더링하지 않을 것이며, 모든 영광을 담은 입력 내용이 사용자에게 표시됩니다.

묵시적 사용자 입력에 숨겨진 입력을 사용해야합니다. 즉, 사용자가 입력했지만 묵시적이며 수동으로 입력 할 필요가 없습니다.

type="hidden" 접근 방식에 대한 질문이 더 많습니다.

1

귀하의 질문은 양식 필드 디버깅을위한 최선의 방법이라고 생각합니다. HTML로 type = 'hidden'으로 유지하는 것이 좋습니다. 이는 사용자, 사용자 및 페이지의 의미 론적 해석에 가장 적합합니다.

대신 디버깅을 수행하려면 Chrome Developer Tools과 같은 도구를 사용하십시오. 이렇게하면 숨겨진 필드의 값을 쉽게 볼 수 있습니다.

1

<input type="hidden" />은 사용자의 입력 값을 유지하는 표준 HTML 방식이므로 사용하는 것이 좋습니다. type에 다른 속성을 사용하고 css으로 숨기면 CSS로드가 실패 할 때 input control이 표시되는 한 가지 문제가 발생할 수 있습니다.

+0

왜 투표가 늦습니까? –

관련 문제