폼 입력 양식 질문입니다.

gg · Post by gg » 2005 09 03 04:05 38

테이블을 사용하지 않고 입력양식을 만들려니.. 어렵네요..
하면서도.., 맞게 제대로 하고 있는건지.. 더 좋은 다른 방법은 없는지..
잘 모르겠습니다. OTL

그리고, 아래 예에서 이상하게 DL에 정의한 보더와 백그라운드 속성이 안 먹습니다.
한 번 봐주시길 부탁드립니다.

그리고, 더 좋은 방법 있으면 알려주시면 더 감사하겠습니다..

미리 감사드립니다. ^^

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>입력양식테스트</title>

<style type="text/css">
form fieldset {
	margin: 10px;
	padding: 10px;
	border: 1px solid #cfcfcf;
}
form legend {
	letter-spacing: 0.1em;
	color: #FF9900;
}
form dt label {
	padding-left: 5px;
	padding-right: 10px;
}
form dt, form dd {
	display: inline;
	padding: 2px 3px 2px 3px;
}
form dt {
	float: left;
	width: 120px;
	background-color: #ddd;
}
form dd {
	float: left;
}
form dl {
	clear: both;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #efefef;
}

</style>
</head>

<body>
	<form name="form" id="form" method="post">
		<fieldset>
		<legend>회사</legend>
		<dl>
			<dt><label>* 구분</label></dt>
			<dd>
				<label for="comdiv0"><input type="radio" name="comdiv" id="comdiv0" value="a" />
				AAA</label>
				<label for="comdiv1"><input type="radio" name="comdiv" id="comdiv1" value="b" /> BBB</label><br />
				<label for="comdiv2"><input type="radio" name="comdiv" id="comdiv2" value="c" /> CCC</label>
			</dd>
		</dl>
		</fieldset>
	
		<fieldset>
		<legend>담당자</legend>
		<dl>
			<dt><label>이 름</label></dt>
			<dd><input type="text" name="rname" id="rname" size="20" maxlength="30" /></dd>
		</dl>
		</fieldset>
	</form>
</body>
</html>

박민권 · Post by **박민권** » 2005 09 03 11:47 27

dl에 배경과 테두리가 생기지 않는 것이 아니라 dt와 dd를 감싸지 못하는 것입니다.
dt와 dd가 둘다 float 속성을 가지고 있기 때문입니다.

이 현상에 대해서 글로 설명하자니 뭐라고 해야할지...
w3c.or.kr에 있는 번역문을 인용하면

유동은 그 흐름(flow) 안에 있지 않기 때문에, 유동(float) 박스의 이전과 다음에, 유동이 없는것처럼, 흐름에 수직적으로 위치되지 않은(non-positioned) 블럭 박스가 생성된다.

이 부분이 정답일까요? ㅡㅡ;

http://trio.co.kr/webrefer/css2/visuren ... t-position
이곳에서 자세하게 참고하시는게 좋을 것 같습니다. ㅎㅎ

님의 문제를 해결하는 방법은 여러가지가
- dt만 float를 주고 dd는 주지 않는 방법.
- dt는 그대로 두고 dd의 margin에 마이너스 값을 적절히 이용해서 겹치게 하는 방법

css는 응용하는 방법이 여러가지라 float에 얽매이실 필요는 없습니다.

지금과 같이 입력란이 한줄 밖에 안된다면 position 속성을 이용하시는 것도 좋습니다.
dt는 그대로 두고 dd를 position으로 dt옆에 붙이는 방식으로요.

입력란이 길어지면 위와 같은 방식은 표로 구현하는 것이 좋을 수도 있습니다.
<th scope="col">이름</th>
<td>입력폼</td>

그리고 색다른 제한 한가지는 국내의 표 형식 입력폼에 얽매지 않은 입력디자인을 하는 것입니다.

이것은 현석님을 통해서 느꼈었는데 굳이 입력폼이 표 형식이여야 한다는 법도 없으니 다른 디자인을 적용해 보는 것도 좋을 것 같습니다.

[이름][입력폼] 대신에

[이름 - 5자 이내로 써주세요.]
[입력폼]

뭐 이런식으로요. :)
잡다한 설명이 너무 많았네요. ㅎㅎ

gg · Post by gg » 2005 09 03 15:22 24

민권님 답변 감사드립니다.

제가 float 에 대한 개념이 부족했나 봅니다.. ^^;

좀 더 자세히 봐야겠습니다..

감사합니다. ^^

신승식 · Post by **신승식** » 2005 09 04 21:15 52

폼을 사용할 때 label의 사용에 약간 문제가 있는 것 같습니다.

Code: Select all

		<dl>
			<dt><label>* 구분</label></dt>
			<dd>
				<label for="comdiv0"><input type="radio" name="comdiv" id="comdiv0" value="a" />
				AAA</label>

위의 코드에서 '* 구분'이라는 곳에는 label을 붙이지 않는 것이 좋습니다. 라디오 버튼들을 대표하는 이름이라는 것은 이미 dt로 충분히 나타낼 수 있기 때문입니다. 또, label을 붙이는 이유는 label for="아이디값"에 나타난 폼과 이 레이블이 연관되었다(associated)라는 것을 명시적으로(explicitly) 나타내기 위해서입니다. 위의 예처럼 for 속성이 없을 때에는 label 문으로 감싼 요소와 내용들이 서로 암묵적으로(implicitly) 연관되었다는 뜻입니다. 아래의 예를 참고하십시오.

명시적인 레이블링의 예 (좋은 예)

Code: Select all

<label for="name">이름</label>
<input type="text" id="name">

암묵적인 레이블링의 예 (문법에는 맞지만 권장하지 않습니다.)

Code: Select all

<label>이름 <input type="text" id="name"></label>

명시적인 레이블링과 암묵적인 레이블링을 동시에 한 예 (이렇게까지 할 필요는 굳이 없지만, 일부 스크린 리더들이 레이블을 인식하지 못하므로 이렇게 이중으로 해줘야 할 때도 있습니다.)

Code: Select all

<label for="name">이름 <input type="text" id="name"></label>

아무 의미가 없는 레이블링을 한 예 (레이블링의 효과가 전혀 생기지 않음.)

Code: Select all

<label>이름 </label>
<input type="text" id="name">

gg · Post by gg » 2005 09 05 13:47 45

감사합니다..^^;

안그래도 이 부분이 좀 깨름직 했었는데..

라디오 버튼 경우에는 이미 라벨로 지정해 주었기 때문에 dt 부분에서

또 라벨로 지정하기가 뭐했는데.. 역시 빼는게 낫겠군요..

Code: Select all

<dl>
  <dt><label for="rname">이름</label></dt>
  <dd><input type="text" name="rname" id="rname"></dd>
</dl>

그런데, 또하나 의문이..

dt 와 라벨을 중복해서 사용하면 더 혼란스러울까요?

스크린 리더 같은 프로그램에선 어떤지 잘 모르겠습니다..

그리고, 혹시 폼 입력 양식을 나타내는 좋은 방법 있으시면 소개 부탁드립니다.

관련 사이트나 적용 예라도 알려주시면 감사하겠습니다.

*^^*

eouia · Post by **eouia** » 2005 09 05 13:59 48

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>

#frm {
	margin:0px;
	padding:0px;
	width:603px;
}

fieldset {
	border:none;
	background-color:#CCF0F0;
	padding:3px;
	vertical-align:top;
	display:block;
	border-bottom:3px solid #FFFFFF;
	
	
}

fieldset label {
	width:80px;
	background-color:silver;
	vertical-align:top;
	text-align:right;
	font-size:12px;
	font-weight:bold;
	font-family:georgia, 굴림;
	display:block;
	margin-top:1px;
	float:left;
	height:16px;
	border:1px solid silver;
	padding-top:2px;
	margin-right:3px;
}

.fld_name {
float:left;
width:50%;
}

.fld_password {
float:none;
}

fieldset input,
fieldset select {
	width:140px;
	height:16px;
	border:1px solid #7AAD4C;
	margin:0px;
}

fieldset textarea {
	width:450px;
	height:160px;
	border:1px solid #7AAD4C;
}

.fld_title input,
.fld_mail input {
	width:450px;
}

.fld_button {
text-align:center;
}

.button {
	border:none;
	width:80px;
	height:21px;
	text-align:center;
	background-image:url("./button.gif");
}

</style>

</head>
<body>
<form id="frm">
	<fieldset class="fld_name">
		<label for="name">이름</label>
		<input id="name" name="name" type="text"/>
	</fieldset>

	<fieldset class="fld_password">
		<label for="password">패스워드</label>
		<input id="password" name="password" type="password"/>
	</fieldset>
	<fieldset class="fld_category">
		<label for="category">카테고리</label>
		<select id="category" name="category">
			<option>선택1</option>

			<option>선택2</option>
			<option>선택3</option>
		</select>
	</fieldset>
	<fieldset class="fld_title">
		<label for="title">제목</label>
		<input id="title" name="title" type="text"/>
	</fieldset>
	<fieldset class="fld_mail">
		<label for="mail">메일</label>
		<input id="mail" name="mail"type="text"/>
	</fieldset>
	<fieldset class="fld_content">
		<label for="content">내용</label>
		<textarea id="content" name="content"></textarea>

	</fieldset>
	<fieldset class="fld_button">
		<input type="submit" class="button" value="작성완료" />
		<input type="button" class="button" value="목록보기" />
	</fieldset>
</form>
</body>
</html>

이런 스타일은 어떠신지?

gg · Post by gg » 2005 09 06 01:47 15

eouia님 감사합니다.

fieldset으로 감싸는 방법도 있었군요..

그런데, 저도 비슷한 방법으로 해봤었는데요..
한 항목에 입력 필드가 여러개인 경우..
줄 바꿈을 해야 하는데..
그러면 모양이 이상해지더라구요..

라디오 버튼 같은 경우는..
선택 값이 여러개일 경우, 각 라디오 버튼 사이의 간격 맞춤도 문제지만,
줄 바꿈을 하게 되면 좌측으로 붙어버리더라구요..

그래서 dl dt dd 로 감싸보았는데..
생각했던 대로 잘 안되더군요.. ^^;
처음 질문 글에도 적었지만.. 도데체 지금 내가 맞게 하고 있는건가..
하는 생각이 들더군요..
물론, 제가 아직 많이 부족해서, 잘 몰라서 그렇겠지만요.. OTL

답변 감사드립니다.

올려주신 방법도 잘 활용하겠습니다.

*^^*

gregshin · Post by **gregshin** » 2005 09 06 21:56 57

eouia wrote:

Code: Select all

	<fieldset class="fld_name">
		<label for="name">이름</label>
		<input id="name" name="name" type="text"/>
	</fieldset>

죄송합니다. 자꾸 다른 문제로 딴지를 거는 것 같아서... 그런데 fieldset은 form control이 하나일 때 묶어주는 것은 아무 의미가 없습니다. fieldset은 여러 개의 form control을 집단화(grouping)해주는 데 의의가 있습니다. 그리고 아주 예외적인 경우가 아니라면 fieldset에는 반드시 legend 요소가 따라와야 합니다. 즉 해당 그룹의 대표 이름이 붙어야 합니다.

위의 경우라면 그냥 일반적인 테이블을 쓰거나, fieldset 대신에 div를 쓰는 것이 오히려 더 나은 것 같습니다. dl, dt, dd를 쓰는 것도 틀리지는 않지만 gg님이 질문하신 것처럼 style 맞추기가 상당히 까다롭습니다.

eouia · Post by **eouia** » 2005 09 07 15:09 52

gregshin wrote: 죄송합니다. 자꾸 다른 문제로 딴지를 거는 것 같아서... 그런데 fieldset은 form control이 하나일 때 묶어주는 것은 아무 의미가 없습니다. fieldset은 여러 개의 form control을 집단화(grouping)해주는 데 의의가 있습니다. 그리고 아주 예외적인 경우가 아니라면 fieldset에는 반드시 legend 요소가 따라와야 합니다. 즉 해당 그룹의 대표 이름이 붙어야 합니다.

위의 경우라면 그냥 일반적인 테이블을 쓰거나, fieldset 대신에 div를 쓰는 것이 오히려 더 나은 것 같습니다. dl, dt, dd를 쓰는 것도 틀리지는 않지만 gg님이 질문하신 것처럼 style 맞추기가 상당히 까다롭습니다.

글쎄요, 저랑은 생각이 다르시네요.
fieldset이 grouping하는 것은, 말씀하신 경우는 물론 지당한 말씀입니다.

그러나 fieldset의 용도가 문자 그대로 "복수의" 컨트롤을 "묶는 것"이 목적이라고는 생각하지 않습니다. 단 "하나의 컨트롤"일지라도 그것이 의미상 다른 컨트롤(및 컨트롤집합)과 분리된다면 충분히 독립된 fieldset으로 봐도 좋다고 생각합니다.

게다가 코드에 보면 <label>과 <input>을 조합해서 사용하므로, 이미 이 자체가 "복수의 컨트롤"이라는 입장입니다. 따라서 fieldset으로 묶어도 문제될 것이라 보지 않습니다.

또한 fieldset은 중첩가능하므로, 이렇게 fieldset으로 분리된 컨트롤들을 다시 fieldset으로 묶어준다면 그룹에 대한 그루핑이 가능하므로 얼마든지 의미론적으로 구조화할 수 있다고 봅니다.

그리고 legend를 반드시 붙여야하는 건 아니라고 생각합니다. (물론, 붙이고, CSS를 통해 안보이게 하는 쪽이 더 좋은 방법이긴 합니다만... 붙이지 않는다고 해서 문제될 건 아닙니다.) legend는 해당 그룹의 "제목"이 아니라 "캡션" 아닌가요? 해당 그룹의 고유한 identifier라면 title이나 id 속성을 이용하면 됩니다. 컨트롤집합의 "캡션"이 필수일리가 없다고 봅니다.

W3C에서는 legend에 대해 다음과 같이 설명하고 있습니다.

The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.

Post by **hyeonseok** » 2005 09 07 16:12 49

fieldset 은 복수의 컨트롤을 그루핑 해 주는 것이고, label 은 input 과는 달리 control 이 아닙니다.

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

따라서, label과 input 을 하나의 fieldset 으로 묶어주는 것이 용도에 맞게 사용된 것은 아닌 것 같습니다. 그리고, 올려주신 예는 자칫 잘못하면 html element 를 비주얼 적으로 사용한 것이라고 생각 되어질 수도 있을 것 같습니다.

eouia · Post by **eouia** » 2005 09 07 16:54 31

흠.. 언제나 form 레이아웃은 머리아프군요. XForms가 나올 때까지 기다려야 할까요?

label이 컨트롤이 아니라는 지적은 감사합니다.

그렇다해도, fieldset이 반드시 "두개 이상의" 컨트롤에 대한 그루핑만 목적으로 한다는 것은 아닌 것 같다는 생각이 드네요.
방점을 어디에 찍느냐의 문제일려나요.
"to group thematically related

controls

"
컨트롤 집합이란, 다른 컨트롤들과 논리적으로 분리되는 컨트롤(들)의 집합이라고 이해하고 있습니다. 갯수가 중요한 것이 아니라 논리적으로 분리될 수 있느냐 아니냐의 차이가 더 중요하다고 보는데요.

예를 들어, 가입폼에서, "개인정보"와 "추가정보"로 나눠질 컨트롤들이 있다고 할 경우, "추가정보"에 해당하는 input이 단 하나만 있다면 "추가정보"라는 fieldset및 legend는 사용할 수 없는 것일까요? 저는 오히려 이쪽이 더 괴이하게 보입니다.
혹은 반대로 수십개의 컨트롤들이 복잡하게 얽혀있는 폼에서 fieldset으로 묶은 그룹들을 다시 fieldset으로 묶는 경우, 상위 fieldset속에는 fieldset만 있는 셈인데(fieldset역시 컨트롤은 아니지요.) 이런 경우에는 해석이 어떨지 궁금하기도 합니다.

개인적으로는 "웹스탠다드솔루션"에 소개된 dl/dt/dd 방법은 전혀 말도 안된다고 생각하며, div를 사용하는 방법도 문제가 있다고 봅니다. 컨트롤간의 그룹을 위해 fieldset이라는 태그가 존재하는데(하나의 컨트롤도 그룹으로 칠 수 있느냐의 문제는 논외로 한다쳐도), 굳이 div를 써서 컨트롤간의 구분을 하는 쪽이 더 "비쥬얼적"인 사용이 아닐까요?

이문제에 대해서는 option/optgroup, table의 colgroup 태그등에 대해서도 비슷한 논의를 할 수 있겠군요. optgroup도 W3C 설명에는 "to group choices logically"라고 나오니까요.

gregshin · Post by **gregshin** » 2005 09 07 22:37 08

죄송합니다. 웹 표준을 다룰 때 CSS에만 치중하다 html 코드를 복잡하게, 또는 원래의 목적에 맞지 않게 쓰는 경우를 종종 봐와서 별 거 아닌 것에 딴지를 걸게 되었는데... 길어졌네요.

중요한 것은 왜 html 3.02에 없었던 fieldset과 label이 html 4.01에서 생겼냐는 것입니다. 이 둘은 모두 장애인의 접근성(accessibility) 향상 목적으로 생겨난 요소들입니다.

fieldset의 경우는 폼 컨트롤이 많아지면 비시각적인 브라우저를 사용하는 장애인의 경우 헤맬 수 있기 때문에 비슷한 것끼리 그룹핑을 해주기 위해서 생긴 것이고, 그 그룹의 이름을 붙이기 위해 legend가 생긴 것입니다. 이것은 꼭 웹 인터페이스가 아니더라도 윈도우즈 표준 API 다이얼로그 박스에도 비슷한 모양의 인터페이스가 있습니다. 아래 그림에서는 홈 페이지, 임시 인터넷 파일, 열어본 페이지 목록이라는 세 개의 fieldset이 있다고 보면 되겠고 각각의 제목이 바로 legend라고 보면 되겠지요.

http://img91.imageshack.us/img91/3057/i ... 8se.th.png

또 label이 생긴 이유는 실제의 form control과 그것의 제목이 비시각적인 브라우저에서 짝짓기가 어려우므로 label에 focus가 오면 그것과 짝지어진 form control로 focus를 자동으로 이동시켜 주기 위해 생겼습니다. 이것도 이미 Windows를 비롯한 주요 OS의 UI에서 이미 구현된 기능인데 그것을 웹에서도 유사하게 모방한 것입니다.

euoia님의 코드에서 fieldset은 단지 시각적인 목적으로, 제 생각에는 블록을 구분하기 위해(즉, 줄을 바꾸기 위해) 사용된 것처럼 보입니다. 그렇다면 그 경우에는 fieldset보다는 차라리 평범하게 문단을 구분하는 p 요소나 아니면 표준에서 매우 쓰기 꺼려하는 br을 쓰는 것이 오히려 더 합당한 방법인 것 같습니다. [/img]

eouia · Post by **eouia** » 2005 09 07 23:50 37

음.. 이야기가 자꾸 빙빙 도네요. 다른 분들은 관심없는데 괜히 혼자 열내는 것일지도.

그러니까, 짧게 요약하자면 이겁니다.
하나의 컨트롤은 fieldset으로 묶어서는 안되는가. 라는 점이지요. legend니 비주얼이니 하는 부분은 차치하고 생각해보겠습니다.

저역시 윈도우즈 프로그래밍을 했기 때문에, 설명하신 부분을 잘 알고 있습니다.
그래서 더욱 이해가 안가네요.

http://eouia0.cafe24.com/image/sc.gif

위의 다이얼로그 박스에서 보시는 경우는 그럼 웹상에서는 허용되지 않는다는 뜻일까요?
위의 다이얼로그박스의 마지막 그룹은 하나의 컨트롤만 포함하고 있습니다.
이러한 경우가 원칙적으로 bad case란 말씀이신지요?

폼에서 때로는 hidden input을 포함할 경우도 있습니다.
hidden 컨트롤 여러개와 가시적 컨트롤 하나로 이루어진 경우에는 복수의 컨트롤이기 때문에 fieldset으로 묶어도 좋은건가요? 아니면 눈에 보이는 것은 단지 한개의 컨트롤일 뿐이기 때문에 fieldset으로 묶으면 안되는 걸까요?

서버타임에서 동적으로 생성되는 폼이 있을 때, 컨트롤의 갯수가 가변적으로 변할 경우에는 fieldset쓰는게 힘들 수도 있겠군요. 컨트롤이 두개가 만들어질 경우에는 fieldset으로 묶어도 좋지만, 만약 한개만 만들어질 경우에는 코드를 바꿔서 fieldset이 없어져야만 할테니까요.

주절주절 시시콜콜한 가정들을 늘어놓아보았습니다. 하지만, 그런 점을 생각해본다면, fieldset이라는 태그는 사용이 상당히 제약되는 모순에 놓이게 됩니다.
그래서 저는 문자그대로 "복수의 컨트롤을 묶는 태그"라기보다는, "컨트롤을 묶는(의미적으로) 태그"라고 이해합니다.
그리고나서 그 fieldset을 어떤 식으로 display할 지는 마음대로(?) 해도 상관없다는 입장입니다.
비록 하나의 컨트롤이라 할지라도, 그것이 다른 컨트롤과 분리되는 "의미"를 갖는다면 fieldset으로 묶는 쪽이 오히려 구조와 의미상 더 적합하지 않을까요?

물론, 제 예시에도 잘못된 점이 있습니다. 예를 들어, 아이디와 패스워드는 한번 더 fieldset으로 묶어주었다면 더 좋았겠죠(그리고 legend를 붙인 후, CSS로 hidden시켜버렸다면요.)

eouia · Post by **eouia** » 2005 09 07 23:55 41

아참, 노파심에 덧붙이자면,
단지 비쥬얼적으로 레이아웃잡기 위해서라면 뭐하러 일부러 fieldset을 쓰겠습니까. 그냥 div를 쓰고 말죠.

Post by **hyeonseok** » 2005 09 08 10:00 45

논리적인 구분이 명확 하다면 하나의 컨트롤에도 다른 컨트롤(들)과 구분하기 위해서 fieldset 을 사용할 수 있다는 것에는 eouia님의 의견에 동의 합니다. 말씀하신 동적 생성이니...현실적으로 그러한 사용을 해야 하는 상황이 있을 것입니다. 올려주신 이미지만 봐도 그렇고요.

하지만 처음에 올려주신 코드와 같은 경우는 이에는 해당 하지 않는다고 봅니다. 하나의 컨트롤을 fieldset으로 구분 할 수는 있지만 모든 컨트롤을 fieldset으로 구분하는 것은 그루핑의 의미가 없으므로 앞에서도 말했다시피 비주얼 적인 용도로 사용한 것이 아닌가 하는 생각을 할 수 밖에 없습니다. (여기서 사용한 태그가 div가 아니라 fieldset 이라고 해서 비주얼적인 용도가 아니라고는 말 할 수 없습니다.)

해서...요지는 전반적으로 eouia 님의 의견에 동의 하지만 맨처음의 코드 예시는 오해의 소지가 있다는 것입니다.

그리고 보다 중요한 것은 이러한 그루핑(fieldset)이 구현의 단계에서 이루어 지면 안되고 기획의 단계에서 이루어져야 한다는 것입니다. 미리 그루핑이 일어나면 당연히 어떠한 기준이나 논리에 의해서 나누어 졌을 것이고 그 논리를 구현에서 따라 주면 되는 것이지요. 그런데 실제적으로 기획단계에서 폼들을 그루핑해서 주는 것은 eouia님의 예처럼 기본정보, 상세정보 말고는 아직 본적이 없답니다.

gg · Post by gg » 2005 09 09 05:27 28

두 분 다 기본적인 원칙에는 같은 생각이신 거 같은데..
약간의 오해가 있었던 거 같습니다.

eouia님 께서는 단지, 제가 질문 드린, 표현(방법)에 대한 한 예제를
보여주려고 하신 것 같습니다.

서로 오해 푸시길..

*^^*

eouia 님, gregshin 님 그리고 현석님 감사드립니다

덧글)
디자인과 내용의 분리는 참 어렵군요.
저에겐 더.. 크헉.. ^^;

고수님들 많이 좀 도와주세요.. *^^*

스치다 · Post by **스치다** » 2005 10 28 11:57 06

저도 이 부분을 심각히 고려해 보았는데...

dl dt dd 그런 조합보다는 fieldset으로 묶어주고 하는 것이
더 쉽고 좋은 것 같습니다.

단,위에 말한 것처럼 여러개의 fieldset 으로 묶어 주는 경우도
참 놀랍기는 놀랍습니다.

코드면에서 좀 지저분해 보이기도 하겠지만 여러개의 fieldset 조합은
알아보기가 참 쉽지 않을까 싶습니다.
나중에 어디 부분을 고쳐야 하는지... 필드가 그룹이 지어져 있으니까
그 필드그룹만 손보면 되겠다.. 뭐 이런 식이겠지요.

다른 방법으로 쉽게 div 와 p 조합으로 가는 경우도 좋을 것 같습니다.
p조합의 경우 1라인 방식의 폼에 정말 좋습니다.
한마디로 소스가 짧다는 얘기입니다.

<p>라벨..폼</p>
이런식으로....

하지만 1줄에 2개의 입력창이 들어갈 경우 p 사이에 div를 넣든지 하는 방법을
사용해야 합니다.

전 결론적으로 2번째 방식을 쓰기로 했습니다.
소스도 짧지만 p테그만으로도 그 그룹을 대충 구별할 수 있기 때문입니다.

결론은 어느 브라우저에서나 잘 보이면 되는 거 아닐까 생각합니다.
브라우저들이 css규격을 완전통일이 되면 좋겠지만요.

아무튼 웹표준화 폼에 대해서 정말 좋은 얘기와 열의를 보여주신 앞에 분들에게 대단하고 자랑스럽다는 얘기를 전하고 싶습니다.

Mozilla 한국 커뮤니티

폼 입력 양식 질문입니다.

폼 입력 양식 질문입니다.

float의 특징

감사합니다

label 사용이 잘못 되었군요.

label...

감사합니다..

fieldset 사용의 문제

Re: fieldset 사용의 문제

Re: fieldset 사용의 문제

오해 푸세요..

정말 좋은 내용이군요

Who is online