HTML 주문서 종합 — 폼 레이아웃 완전 정리

 

 

Web Development · HTML Form Layout

HTML 주문서 종합 폼 —
fieldset · float · 체크박스 + 수량

실무 주문서 페이지의 표준 구조 — container · 라벨 정렬 · 가운데 버튼

시작 오늘 분석할 코드

커피 원두 주문서. 3개 fieldset(개인정보 / 배송지 / 주문) + 체크박스로 상품 선택 + 수량 입력 + 가운데 정렬 버튼이 들어간 종합 폼.

<style> .container { width: 600px; margin: 0 auto; } label.title { font-weight: bold; width: 80px; float: left; } div.centered { text-align: center; } </style> <div class="container"> <form> <fieldset><legend>개인 정보</legend>...</fieldset> <fieldset><legend>배송지 정보</legend> <textarea cols="40" rows="3"></textarea> </fieldset> <fieldset><legend>주문 정보</legend> <label><input type="checkbox">과테말라 안티구아</label> <label><input type="number" value="0" min="0" max="5">개</label> </fieldset> <div class="centered"> <input type="submit" value="주문하기"> <input type="reset" value="다시 작성"> </div> </form> </div>

---

1 .container — 가운데 정렬 패턴

전체 폼을 화면 가운데에 두는 가장 흔한 패턴.

.container { width: 600px; /* 고정 너비 */ margin: 0 auto; /* 좌우 자동 = 가운데 */ }

margin: 0 auto;의 auto가 "양쪽 여백을 똑같이 자동 분배"하라는 의미. 결과적으로 박스가 가운데 정렬된다.

※ 모던 웹은 max-width: 600px; margin: 0 auto; 패턴이 표준. 화면이 600px보다 작은 모바일에서도 깨지지 않음.

---

2 label.title — float으로 라벨 정렬

label.title { font-weight: bold; width: 80px; float: left; }

라벨에 고정 너비 80px + 왼쪽 정렬을 줘서 모든 라벨이 같은 너비로 보이게 한다. 결과적으로 input들이 깔끔하게 세로로 정렬됨.

※ float은 옛 방식. 모던 웹은 flexbox나 grid를 권장. 그래도 옛 코드 이해를 위해 알아둬야 함.

---

3 fieldset 안 ul → 정돈된 입력 묶음

각 fieldset 안에 <ul>로 입력 요소들을 묶고, list-style: none으로 불릿을 제거하는 패턴. 의미적 묶음 + 시각적 정돈.

---

4 체크박스 + 수량 패턴

상품 선택 (체크박스) + 수량 (number) 조합은 쇼핑몰 등에서 매우 흔하다.

<label><input type="checkbox"> 과테말라 안티구아 (100g)</label> <label><input type="number" value="0" min="0" max="5"> 개</label>

※ 실무 주의 — 데이터 일관성

• 체크 안 했는데 수량이 1 이상이면? — JS 검증 필요
• 체크는 했는데 수량 0이면? — 의도 확인 필요
• 가장 안전한 패턴: 수량이 0 이상이면 자동 체크

---

반응형

5 자주 하는 실수

실수	증상	해결
container width 고정만	모바일 옆으로 잘림	max-width 사용
float 후 clear 누락	다음 요소 겹침	clear: both 또는 flex 사용
체크박스·수량 검증 X	0개 주문 가능	JS 검증
fieldset 없이 div만	접근성 ↓	관련 입력은 fieldset
type="submit"에 onclick	두 번 동작	type="button"으로 변경

---

핵심 한 줄 요약

.containerwidth + margin: 0 auto = 가운데

max-width모바일 대응 — 모던 표준

label width + float라벨 정렬 옛 방식

fieldset + ul의미 묶음 + 시각 정돈

checkbox + number선택 + 수량 패턴

.centered버튼 가운데 정렬

실무 검증HTML + JS + 서버 3중

Tags

#form #fieldset #label #checkbox #textarea #tel #HTML #주문서 #종합폼 #container #float #폼레이아웃 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

form, fieldset, label, checkbox, textarea, tel, HTML, 주문서, 종합폼, container, float, 폼레이아웃, 웹개발, 티스토리