반응형 Label6 HTML 실습 — 예약 정보 폼 만들기 완전 정리 Web Development · HTML PracticeHTML 실습 —예약 정보 폼 만들기지금까지 배운 폼 요소를 한 번에 — 손코딩 연습시작 실습 코드지금까지 배운 폼 요소들을 종합한 실습. 이름·휴대폰·이메일 입력 + 예약 버튼. 예약 정보 이 름 type="text"> 휴대폰 type="number"> 이메일 type="mail"> type="button" value="예약하기"> 실제 출력 결과예약 정보이 름 휴대폰 이메일 1 원본 코드의 개선 포인트원본 코드는 동작은 하지만 몇 가지 개선이 필요하다.원본개선안이유type="number" (휴대폰)type="tel"전화번호는 tel이 적합 — 모바일 전용 키보드, 하이픈도 OKtype="mail"type="email""mail"은 잘못된.. 2026. 5. 3. HTML 주문서 종합 — 폼 레이아웃 완전 정리 Web Development · HTML Form LayoutHTML 주문서 종합 폼 —fieldset · float · 체크박스 + 수량실무 주문서 페이지의 표준 구조 — container · 라벨 정렬 · 가운데 버튼시작 오늘 분석할 코드커피 원두 주문서. 3개 fieldset(개인정보 / 배송지 / 주문) + 체크박스로 상품 선택 + 수량 입력 + 가운데 정렬 버튼이 들어간 종합 폼. class="container"> 개인 정보... 배송지 정보 cols="40" rows="3"> 주문 정보 type="checkbox">과테말라 안티구아 type="number" value="0" min="0" max="5">개 class="centered"> type="submit" value="주.. 2026. 5. 2. HTML 체크박스 · 라디오 — checkbox · radio · name 그룹 완전 정리 Web Development · HTML FormHTML 체크박스 · 라디오 —다중 선택 vs 단일 선택 완전 정리name 속성으로 그룹 만들기 · label로 클릭 영역 확장시작 오늘 분석할 코드같은 input 태그지만 type만 바뀌면 동작이 완전히 달라진다. checkbox는 여러 개 선택, radio는 하나만 선택. 그리고 radio의 핵심은 name 속성으로 그룹 만들기.수강 분야(다수 선택 가능) type="checkbox" value="grm">문법 type="checkbox" value="wr">작문 type="checkbox" value="rd">독해 수강 과목(1과목만 선택 가능) type="radio" name="subject" value="eng">영어회화 type=".. 2026. 5. 2. HTML 폼 속성 — autofocus · required · placeholder · readonly 완전 정리 Web Development · HTML FormHTML 폼 속성 완전 정리 —autofocus · required · placeholder · readonly · min/max신청 폼 하나로 배우는 input의 핵심 속성 12가지시작 오늘 분석할 코드여름방학 특강 신청 폼. fieldset 3개로 그룹화하고, input에 다양한 속성(autofocus, required, placeholder, readonly, maxlength, min, max, step)을 적용해 사용자 입력을 통제하는 코드다. id="register"> 신청자 class="reg" for="uname">이름 type="text" id="uname" autofocus required> class="fontcolor">필수.. 2026. 5. 2. 이전 1 2 다음 반응형