최근에 다음과 같은 작업을하는 몇 가지 예를 보았습니다.
<dl>
<dt>Full Name:</dt>
<dd><input type="text" name="fullname"></dd>
<dt>Email Address:</dt>
<dd><input type="text" name="email"></dd>
</dl>
HTML 양식을 작성합니다. 왜 그런 겁니까? 테이블 사용에 비해 장점은 무엇입니까?
답변
의미론을 결정하는 것은 당신에게 달려 있다고 생각하지만 제 생각에는 다음과 같습니다.
정의 목록보다는 양식 관련 속성을 사용해야합니다.
<form>
<label for="fullname">Full Name:</label>
<input type="text" name="fullname" id="fullname">
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
</form>
<label> 태그의 “for”속성은 <input> 태그의 “id”속성을 참조해야합니다. 레이블이 필드와 연결되어있을 때 레이블을 클릭하면 관련 필드에 초점이 맞춰집니다.
<fieldset>과 같은 태그를 사용하여 양식의 섹션을 함께 클러스터링하고 <legend>와 같은 태그를 사용하여 필드 세트에 캡션을 지정할 수도 있습니다.
답변
나는에 설명 된 기술을 성공적으로 사용했습니다. 이 기사에 여러 번 .
나는 동의 sjstrutt 이 같은 형태로 관련 태그를 사용해야label 하고 form당신이 형태를했지만, 그의 예에 설명 된 HTML은 자주 CSS와 양식을 스타일링은 “고리”로 사용할 수있는 몇 가지 코드를 부족합니다.
이 결과로 다음과 같이 내 양식을 마크 업합니다.
<form name="LoginForm" action="thispage">
<fieldset>
<legend>Form header</legend>
<ul>
<li>
<label for="UserName">Username: </label>
<input id="UserName" name="UserName" type="text" />
</li>
<li>
<label for="Password">Password: </label>
<input id="Password" name="Password" type="text" />
</li>
</ul>
</fieldset>
<fieldset class="buttons">
<input class="submit" type="submit" value="Login" />
</fieldset>
</form>
이 접근 방식은 다양한 방식으로 양식을 스타일링하기에 충분한 후크를 포함하는 이해할 수있는 태그 세트를 제공합니다.
답변
이것은 의미론과 형식화 문제의 하위 집합입니다. 정의 목록에는 관련 키 / 값 속성 목록이 나와 있지만 표시 방법은 나와 있지 않습니다. 테이블은 레이아웃과 데이터를 표시하는 방법에 대한 자세한 내용과 내부 데이터가 무엇인지 알려줍니다. 형식을 과도하게 지정하고 형식을 과소 지정하여 목록 형식을 지정하는 방법을 제한합니다.
HTML은 역사적으로 의미론과 서식을 혼합했습니다. 글꼴 태그와 표가 최악의 예입니다. 서식 지정을 위해 CSS로 이동하고 XHTML에서 많은 순수 서식 지정 태그를 제거하면 서식과 의미의 분리가 다소 복원됩니다. 서식을 CSS로 분리하면 동일한 HTML을 다양한 방식으로 표시하여 넓은 브라우저, 소형 모바일 브라우저, 인쇄, 일반 텍스트 등에 맞게 서식을 다시 지정할 수 있습니다.
깨달음을 얻으려면 CSS Zen Garden을 방문하십시오 .
답변
이 경우 레이블과 입력 은 의미 론적 의미이며 자체적으로 존재합니다.
맹인에게 웹 페이지를 읽어야한다고 상상해보십시오. “좋아요, 여기 에 정의 목록이 있습니다. 첫 번째 용어 는 ‘이름’입니다.” 라고 말하지 않을 것 입니다. 대신, 당신은 아마 “좋아 우리가 가지고 말하고 싶지만 양식을 여기와이있을 것 같습니다 필드의 세트는 첫 번째, 입력이 되는 라벨 ‘의 이름을’.”
이것이 시맨틱 웹이 중요한 이유입니다. 페이지의 내용이 인간과 기술 모두에게 정확하게 자신을 표현할 수 있도록합니다. 예를 들어, 사람들이 표준 정보 (이름, 전화 번호 등)로 웹 양식을 빠르게 작성하는 데 도움 이되는 많은 브라우저 플러그인 이 있습니다. 입력에 관련 레이블이없는 경우 거의 작동하지 않습니다.
도움이되기를 바랍니다.
답변
사용 dl dt, dd형태의은과 함께 양식을 구성하는 또 다른 방법입니다 ul li, div하고 table. 당신은 항상 넣을 수 있습니다 label로를 dt. 이렇게하면 양식 특정 요소 label를 제자리에 유지할 수 있습니다 .
<form action="/login" method="post">
<dl>
<dt><label for="login">Login</label></dt>
<dd><input type="text" name="login" id="login"/></dd>
<dt><label for="password">Password</label></dt>
<dd><input type="password" name="password" id="password"/></dd>
<dd><input type="submit" value="Add"/></dd>
</dl>
</form>
답변
정의 목록에는 의미 론적 의미가 있습니다. 용어 (<dt>) 및 관련 정의 (<dd>)를 나열하기위한 것입니다. 따라서이 경우 <dl>은 테이블보다 콘텐츠의 의미 론적 의미를 더 정확하게 묘사합니다.
답변
의미 론적으로 말하면 인터넷에 거의 나타나지 않기 때문에 정의 목록은 거의 사용되지 않습니다.
귀하의 경우 올바른 코드가 게시되었습니다.
<form>
<label for="fullname">Full Name:</label>
<input type="text" name="fullname" id="fullname">
<label for="email">Email Address:</label>
<input type="text" name="email" id="email">
</form>
해당 입력에 대한 입력 및 레이블이있는 양식을 작성하고 있으며 단어 목록을 설정하고 정의하는 것이 아닙니다.
어떤 종류의 도움말 섹션을 수행하는 경우 정의 목록이 적합합니다. 예 :
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascade Stylesheets</dd>
<dt>PHP</dt>
<dd>Hypertext Preprocessor</dd>
</dl>
