-
HTML 코딩 문제 1: 피자 주문 폼 만들기연습문제/html 2024. 6. 2. 18:13
📋 문제 설명
- 피자 주문을 받는 웹페이지의 HTML 폼을 만드세요.
- 폼에는 피자 크기, 토핑, 배달 주소, 연락처 등의 정보를 입력할 수 있어야 합니다.
💡요청 사항
- <form> 태그를 사용하여 폼을 생성합니다.
- <input>, <select>, <textarea> 등의 태그를 이용하여 필요한 입력 필드를 만듭니다.
- name 속성을 통해 각 입력 필드를 구분합니다.
- required 속성을 사용하여 필수 입력 항목을 지정합니다.
- <button type="submit"> 태그를 통해 폼 제출 버튼을 만듭니다.
작성 코드
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>피자 주문 폼</title> </head> <body> <h2>피자 주문서</h2> <form> <label>피자 종류 : </label> <select name="피자 종류"> <option value="치즈 피자">치즈 피자</option> <option value="불고기 피자">불고기 피자</option> <option value="하와이안 피자">하와이안 피자</option> <option value="콤비네이션 피자">콤비네이션 피자</option> </select><br> <label>피자 크기 : </label> <label><input type="radio" id="L-size" name="size" value="L-size">L-size</label> <label><input type="radio" id="M-size" name="size" value="M-size">M-size</label> <label><input type="radio" id="S-size" name="size" value="S-size">S-size</label><br> <label>피자 토핑 : </label> <label><input name="토핑" type="checkbox" value="cheese">치즈</label> <label><input name="토핑" type="checkbox" value="gogi">고기</label> <label><input name="토핑" type="checkbox" value="Vegs">야채</label><br> <label>배탈 주소 : </label><input type="text"><br> <label>연락처 : </label><input type="text"><br><br> <button type="submit">주문하기</button> </form> </body> </html> 코드 적기
좋았던 점
강의를 보거나 책을 읽을땐 다 아는거라고 생각했지만 vs code에 직접 타이핑하고 확인을 해보니 '알고 있는 것'과 '할 수 있는 것'의 경계가 보였다. 쉽다고 읽을 수 있다고 우쭐해있었던 것을 반성할 수 있었다.
아쉬웠던 점
input 타입을 radio로 했는데 피자 크기가 전부 선택이 되었었다. 무엇이 문제인가 싶어 w3schools까지를 찾은 것 까지는 좋았다.꼼꼼히 읽지 못하고 name을 똑같이 설정해야한다는걸 뒤늦게 발견했다. 약 15분정도 해맸던 것 같다.
다음 목표
예제와 코드를 꼼꼼하게 읽고 이해해도 모르겠을 때, 다른 사이트를 검색해보자. 웬만한건 w3schools에 답이 있는 것 같으니까.
'연습문제 > html' 카테고리의 다른 글
HTML5의 시맨틱 태그 사용법 (0) 2024.06.07