KEEP GOING
HTML 기초 실습 -- (2) 감자빵 주문 사이트 만들기 본문
반응형
실습으로 감자빵 주문 사이트를 만들어 보았다.
실습에 진행한 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>폼만들기</title>
</head>
<body>
<h1>감자빵 주문 사이트</h1>
<!-- <form action="index.php" method="post"></form> -->
<form action="">
<fieldset>
<legend>상품 선택</legend>
<ul>
<p>MENU</p>
<li>원조 감자빵</li>
<li>치즈 감자빵</li>
<li>고구마 감자빵</li>
</ul>
<br>
<p>주문할 상품을 선택하세요</p>
<label><input type="checkbox" value="s_1">원조 감자빵</label>
<input type="number" min="0" max="10">
<br>
<label><input type="checkbox" value="s_2">치즈 감자빵</label>
<input type="number" min="0" max="10">
<br>
<label><input type="checkbox" value="s_3">고구마 감자빵</label>
<input type="number" min="0" max="10">
<br>
<p>포장 여부</p>
<label><input type="checkbox" value="yes">포장</label>
<label><input type="checkbox" value="no">포장 안함</label>
<br>
<br>
<p>비회원 주문</p>
<label>연락처 <input type="tel" size ="25" placeholder="010XXXXXXXX 형태로 입력"></label>
</fieldset>
<br>
<fieldset>
<legend>배송 정보</legend>
<ul>
<li>주소 : 경기도 수원시 </li>
<li>배송 기간 : 최대 7일 소요 </li>
</ul>
</fieldset>
<p></p>
<!-- <label>아이디<input type="text"></label> -->
</form>
<fieldset>
<label>아이디 <input type="text" size = "10" placeholder="아이디를 입력하세요"></label>
<label>비밀번호 <input type="password" size ="10" placeholder="비밀번호를 입력하세요"></label>
<input type="submit" value="로그인">
<br>
</fieldset>
</body>
</html>
.
.
.
출력한 결과
반응형
'web > html + css + javascript' 카테고리의 다른 글
| 자바스크립트 실습 (0) | 2021.07.01 |
|---|---|
| 자바스크립트(JAVASCRIPT) 기초 : 활용 예시와 특징 알아보기 (0) | 2021.07.01 |
| CSS : 캐스케이딩 스타일 시트(CASCADING STYLE SHEET) 알아보기 (0) | 2021.06.30 |
| HTML 기초 실습 -- (3) CSS 적용 (0) | 2021.06.30 |
| HTML 기초 실습 -- 실행 환경 준비 포함 (0) | 2021.06.30 |
'web/html + css + javascript' Related Articles
more
Comments
