HTML- form 연습(스타벅스 회원가입)

💚 최종 결과물 💚

💚 html 💚

    <main>
        <section class="container">
            <section class="login" >
                <p>회원가입</p>
                <img class="picture" src="images/profile.JPG" alt="회원가입" > 

                <fieldset>  
                    <form action="" method="post">
                        <label for="myId">ID</label>
                        <input type="text" name="ID" id="myId"><br>
                        <label for="myPassword">PASSWORD</label>
                        <input type="text" name="password" id="myPassword"><br>
                        <label for="checkPassword">CONFIRM PW</label>
                        <input type="text" name="checkpassword" id="checkPassword"><br>
                        <br>
                    </form>   
                    </fieldset>

                    <fieldset>
                    <form>
                       <label for="favorite">☕ What's your favorite starbucks beverage?</label><br>
                      
                       <select size="1" name="beverage" id="favorite">
                            <option value="아이스아메리카노">아이스아메리카노</option>
                            <option  selected value="콜드브루오트밀라떼">콜드브루오트밀라떼</option>
                            <option value="녹차프라푸치노">녹차프라푸치노</option>
                            <option value="돌체라떼">돌체라떼</option>
                            <option value="자몽허니블랙티">자몽허니블랙티</option>
                       </select>
                       
                       <br><br>
                       <label>Please choose your gender</label><br>
                       <label for="female">female</label>
                       <input type="radio" name="gender" value="female" id="female">
                       <label for="male">male</label>
                       <input type="radio" name="gender" value="male" id="male"><br><br>
                       
                       <label for="tel">telephone number</label>
                       <input type="tel" name="tel" id="tel">

                       <br><br>
                       <button type="submit">회원가입하기</button>

                    </form>    

                    </fieldset>
            </section>

            
        </section>
    </main>

🙉 리뷰

적은 양의 form이지만 html태그가 이만큼이나 필요했다. 아직 fieldset이랑 form 자식태그 관계를 정확하게 배우지 않아서 조금 혼돈됐지만 결과물을 다행히 잘 나왔다. label태그의 사용도 확실하게 익혔다.

대학생 때 이걸로 시험도 봤는데 지금은 완전 처음 같다. 그때는 js도 같이 쓰면서 테스트까지 했는데!!! 세월이 지난 만큼 채워야 할 곳이 많이 보인다. 주말에 한 번씩 더 연습하자!