요약 - 폼 #1

Coddy HTML 여정의 기초 섹션에 포함된 레슨. 60개 중 46번째.

챌린지

쉬움

아래 그림과 같이 HTML을 사용해 간단한 음료 주문 양식을 만들어 봅시다.

다음 항목을 포함하세요.

모든 내용을 감싸는 <form> 태그.
사용자가 음료를 선택할 수 있도록 하는 라디오 버튼 그룹(name: "drink"). 레이블은 "Water", "Coke", "Sprite"여야 합니다. 각 라디오 버튼의 id는 해당 레이블을 소문자로 바꾼 값으로 지정하세요: "water", "coke", "sprite".
선택 가능한 추가 항목을 위한 체크박스 그룹(name: "extras"). 레이블은 "Ice", "Lemon", "Sugar"여야 합니다. 각 체크박스의 id는 해당 레이블을 소문자로 바꾼 값으로 지정하세요: "ice", "lemon", "sugar".
음료 크기를 선택하는 드롭다운 메뉴(name: "size"). 옵션은 "Small", "Medium", "Large"여야 합니다.
"Place Order"라고 표시된 제출 버튼.
"Clear"라고 표시된 초기화 버튼.

⚠️ 중요: <form> 태그는 하나만 사용하세요. HTML에서는 중첩된 <form> 태그를 허용하지 않습니다. <form> 안에 또 다른 <form>을 넣으면 유효하지 않으며 입력 항목이 양식 바깥에 있는 것으로 감지되어 테스트가 실패합니다. 모든 라디오 버튼, 체크박스, 드롭다운 및 버튼을 하나뿐인 바깥쪽 <form> 안에 직접</b> 넣으세요. 각 섹션을 추가 <code><form> 태그로 감싸지 마세요.

직접 해보기

<!DOCTYPE html>
<html>
    <body>
        <form>
            <p>Select a drink: </p>
            <!-- 여기에 코드를 작성하세요 -->
            
            <p>Select extras: </p>
            <!-- 여기에 코드를 작성하세요 -->
            
            <p>Select size: </p>
            <!-- 여기에 코드를 작성하세요 -->
            
        </form>
    </body>
</html>