HTML 실습 — 예약 정보 폼 만들기 완전 정리

 

 

Web Development · HTML Practice

HTML 실습 —
예약 정보 폼 만들기

지금까지 배운 폼 요소를 한 번에 — 손코딩 연습

시작 실습 코드

지금까지 배운 폼 요소들을 종합한 실습. 이름·휴대폰·이메일 입력 + 예약 버튼.

<style> ul li { margin: 10px; list-style-type: none; font-weight: bold; } </style> <h1>예약 정보</h1> <ul> <li><label>이 름 <input type="text"></label></li> <li><label>휴대폰 <input type="number"></label></li> <li><label>이메일 <input type="mail"></label></li> <li><input type="button" value="예약하기"></li> </ul>

실제 출력 결과

예약 정보

• 이 름
• 휴대폰
• 이메일

---

1 원본 코드의 개선 포인트

원본 코드는 동작은 하지만 몇 가지 개선이 필요하다.

원본	개선안	이유
type="number" (휴대폰)	type="tel"	전화번호는 tel이 적합 — 모바일 전용 키보드, 하이픈도 OK
type="mail"	type="email"	"mail"은 잘못된 type — text로 인식됨
<form> 누락	form 추가	폼 데이터 전송 단위
required 누락	필수 필드에 required	빈 채로 제출 방지

---

2 개선된 완성 코드

<form> <h1>예약 정보</h1> <ul> <li><label>이 름 <input type="text" required> </label></li> <li><label>휴대폰 <input type="tel" required placeholder="010-0000-0000"> </label></li> <li><label>이메일 <input type="email" required> </label></li> <li><input type="submit" value="예약하기"></li> </ul> </form>

---

3 핵심 개선 1 — type="tel"

휴대폰 번호는 type="number"가 아니라 type="tel"이 표준이다.

구분	type="number"	type="tel"
입력 가능	숫자만	모든 문자
하이픈 (-)	X	O (010-1234-5678)
모바일 키보드	숫자 키패드	전화 키패드 + 특수문자
스피너	O	X

※ type="number"는 정량 숫자 (수량·나이·금액)에만. 전화번호·신용카드처럼 "숫자처럼 보이지만 사실 ID"인 것은 type="tel".

---

4 핵심 개선 2 — type="email"

원본의 type="mail"은 존재하지 않는 type이다. 브라우저는 type을 인식 못 하면 type="text"로 처리.

※ 결과: 일반 텍스트 입력으로 동작 → @ 검증 X, 이메일 키보드 X. 오타 한 글자가 폼 동작을 완전히 바꿔버린다.

---

반응형

5 학습 정리 — 폼 만들기 체크리스트

※ 폼 만들 때 항상 확인할 것

• <form>으로 감쌌는가
• 각 입력에 적절한 type인가 (text·tel·email·number)
• 모든 input에 label이 연결됐는가
• 필수 입력에 required
• placeholder로 가이드 (선택사항)
• 제출 버튼은 type="submit"
• 관련 입력은 fieldset로 묶기

---

6 CSS 스타일 분석

ul li { margin: 10px; /* 항목 간 여백 */ list-style-type: none; /* 불릿 제거 */ font-weight: bold; /* 굵게 */ }

후손 셀렉터 ul li — ul 안에 있는 모든 li에 적용. 사실 그냥 li만 적어도 같은 효과지만, "ul 안의 li만 대상"이라는 의도를 명시한 것.

---

7 자주 하는 실수 (실습에서)

실수	증상	해결
type 오타 (mail)	일반 text로 동작	email/tel/url 정확히
form 누락	제출 동작 안 함	form으로 감싸기
type="button"	제출 안 됨	제출은 submit
label 없이 input만	접근성 ↓	label로 감싸기
list-style 안 없앰	불릿이 어색	list-style-type: none

---

핵심 한 줄 요약

type="text"일반 텍스트 (이름)

type="tel"전화번호 — number 아님

type="email"이메일 — "mail" 아님

type="submit"제출 버튼 (button 아님)

label로 감싸기접근성·사용성 표준

required필수 입력 검증

list-style: none폼 ul의 표준 처리

Tags

#실습 #예약폼 #ul #li #label #input #type=email #type=tel #list-style #HTML #폼만들기 #손코딩 #웹개발 #티스토리

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

실습, 예약폼, ul, li, label, input, type=email, type=tel, list-style, HTML, 폼만들기, 손코딩, 웹개발, 티스토리