[2021/12/14]국비지원 HTML5 코딩툴 기본학습 6-(4) form 양식 복습

키친 파스타를 마크업 한 후에는 form 양식을 복습

form 양식 중에서 새로 배운 것

1. input type = number : 개수 선택, 또는 연령 선택에서 주로 쓸 수 있는

2. input type = color : RGB 색상 선택

3. input type = range : 슬라이드 바로 범위 출력 가능

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document<title>
</head>
<body>
	<form action="/" method="post">
        <fieldset>
            <legend>개인정보입력</legend>
                <ol>
                    <li>
                        <label for="userName">이름</label>
                        <input type="text" required placeholder="5자 미만 공백없이">
                    </li>
                    <li>
                        <label for="userPW">비밀번호</label>
                        <input type="password" required placeholder="8자 이상 12자 이하, 영소문자">
                    </li>
                    <li>
                        <label for="phone">전화번호</label>
                        <input type="tel" placeholder="02)111-1111">
                    </li>
                </ol>
        </fieldset>
        <fieldset>
            <legend>주문내용</legend>
                <ol>
                    <li>
                        <label for="prodID">상품명</label>
                        <input type="text" id="prodID">
                    </li>
                    <li>
                        <label for="order">주문개수</label>
                        <input type="number" id="order" min="0" max="100" value="0" step="10">
                    </li>
                </ol>
        </fieldset>
        <fieldset>
            <legend>상품검색</legend>
                <ol>
                    <li>
                        <label for="prodsrch">상품검색</label>
                        <input type="search" id="prodsrch">
                    </li>
                    <li>
                        <label for="siteaddr">사이트 주소 입력</label>
                        <input type="url" id="siteaddr" placeholder="www.abc.com">
                    </li>
                    <li>
                        <label for="useremail">메일주소</label>
                        <input type="text" id="useremail" placeholder="example@domain.com" required autocomplete="off">
                    </li>
                </ol>
        </fieldset>
        <fieldset>
            <legend>배송 주소</legend>
                <ol>
                    <li>
                        <label for="addr"></label>
                        <input type="text">
                    </li>
                    <li>
                        <label for="addr2"></label>
                        <input type="text">
                    </li>
                </ol>
        </fieldset> 
        <fieldset>
            <legend>결제 방법</legend>
                <ol>
                    <li>
                        <label for=""></label>
                        <input type="text">
                    </li>
                    <li>
                        <label for=""></label>
                        <input type="text">
                    </li>
                </ol>
        </fieldset>
        <fieldset>
            <legend>추가선택사항</legend>
                <ol>
                    <li>
                        <label for="color">색상선택</label>
                        <input type="color">
                    </li>
                    <li>
                        <label for="추가수량 선택"></label>
                        <input type="range">
                    </li>
                    <li>
                        <label for=""></label>
                    </li>
                </ol>
        </fieldset>
        <input type="submit" value="주문하기">
        <input type="reset" value="취소하기">
    </form>
</body>
</html>

form 양식은 어떻게 코딩하는 게 좋을까...?

담임 강사는 ul, ol, dl로만 마크업 하시던데 실제 사이트들 보면 div로만 묶는 경우도 있고..
간단하게 항목 1개만 필요한 경우 form fieldset 없이 그냥 label input으로 때려 박는 경우도 있고.
담임 강사는 1개만 쓰더라도 곧 죽어도 form fieldset legend까지 다 박는 타입이던데

그렇게 안 해도 웹접근성 인증은 잘만 받더라.

저작자표시 비영리 변경금지

티스토리툴바