2017-12-23 30 views
2

저는 현재 취하고있는 온라인 웹 개발 과정에 대한 과제를 진행하고 있습니다. 할당은 HTML 양식을 작성하는 것입니다.HTML5 형식의 여러 select 요소에 하나의 label 요소를 사용할 수 있습니까?

하나의 요구 사항은 드롭 다운 메뉴가 3 개 (월, 일 및 연도) 인 것입니다. "생일 :"레이블은이 세 가지 메뉴 앞에 표시됩니다.

코스의 과제 솔루션은 세 개의 선택 요소가 하나의 레이블 요소 안에 중첩되어 있음을 보여줍니다. 브라우저에서 정상적으로 보였지만 W3C에 파일을 업로드했을 때 다음 오류가 발생했습니다.

"오류 : 레이블 요소에는 최대 하나의 버튼, 입력, 미터, 출력, 진행률이 포함될 수 있습니다 , select 또는 textarea 자손. "

하나의 레이블 요소를 여러 개의 선택 요소에 적용하는 적절한 방법이 있습니까? 또는 이것은 가난한 관행이며 대신 매일, 달 및 연도마다 고유 레이블을 가져야합니다. 여기

내 코드입니다 :

<div> 
 
\t \t <label>Birthday: 
 
\t \t \t <select name="month" required> 
 
\t \t \t \t <option value="">Month</option> 
 
\t \t \t \t <option value="Jan">Jan</option> 
 
\t \t \t \t <option value="Feb">Feb</option> 
 
\t \t \t \t <option value="Mar">Mar</option> 
 
\t \t \t \t <option value="Apr">Apr</option> 
 
\t \t \t </select> 
 

 
\t \t \t <select name="day" required> 
 
\t \t \t \t <option value="">Day</option> 
 
\t \t \t \t <option value="1">1</option> 
 
\t \t \t \t <option value="2">2</option> 
 
\t \t \t \t <option value="3">3</option> 
 
\t \t \t \t <option value="4">4</option> 
 
\t \t \t </select> 
 

 
\t \t \t <select name="year" required> 
 
\t \t \t \t <option value="">Year</option> 
 
\t \t \t \t <option value="1918">1918</option> 
 
\t \t \t \t <option value="1988">1988</option> 
 
\t \t \t \t <option value="1998">1998</option> 
 
\t \t \t \t <option value="2008">2008</option> 
 
\t \t \t </select> 
 
\t \t </label> 
 
\t </div>

    - HTML에서
+0

아니, 그게 내가 생각하는 표준입니다. 그러나 어쨌든 레이블 요소 안에 드롭 다운을 래핑 할 필요는 없습니다. 당신은 단지 라벨에 라벨을 넣고 부서에 드롭 다운을 넣고 필요에 따라 포맷 할 수 있습니다! –

+1

그룹 관련 양식 컨트롤을 '

' – zer00ne

+0

@ zer00ne - 필드 세트에 대해 조금 읽은 후에 레이블 요소를 제거하고 필드 세트의 선택 요소를 중첩했습니다. 그런 다음 W3C에서 유효성을 검사했습니다. 고맙습니다. – Marc

답변

0

, <input /> 필드가 의미하는 원시적 인«을»있으며, 각각은 하나의 값 프리미티브 값을 나타냅니다 숫자, 문자열, 부울 등. 생년월일은 세 개의 값으로 구성되며 연도, 월 및 일에 대한 값은»complex«in 그 문맥. 그래서 당신은 HTML을»»그런 식으로»복잡한«필드를 만들려고한다는 것을 이해할 수 없습니다.

그래서 (imho) 필드 (기본)에 레이블 (복합)을 부착하고 유효성 검사 오류가 발생하지 않는 것보다 모든 필드에 연결하지 않고»decoration«레이블을 사용해서는 안됩니다.

님의 래핑 요소는 (특히 라디오 버튼의 경우)»클릭 영역/히트 박스를 확장하고 javascript없이 필드 값에 따라 일부 CSS를 적용하는 데 유용 할 수 있습니다. 그렇지 않으면 레이블을 필드에 연결하는 것이 검색 엔진과 물건에 대해서는 멋지지만 HTML에는 다음에 대한 표준화 된 정의가 없기 때문에 :»복잡한 입력을 어떻게 레이블링 할 것인가?, 제안 된 접근법이 도움이 될지 아니면 미래에 있을지는 말하기 어렵다. (afik). 귀하의 경우 그래서

, 난 그냥 것 :

<form> 
    <div class="complex field-group"> 
    <label>…</label> 
    <div class="fields"> 
     <!-- eventually to help bots 
     <label for="x" style="display:none;">…</label> 
     --> 
     <input id="x"/> 

     … 
    </div> 
    </div> 
</form>