[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(1) form 복습

이 날의 과정

1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출

2. video 태그
3. audio 태그
4. 기타 요소 태그
5. 한국남부발전공사 공지사항 페이지 마크업

첫 타자로 올릴 내용은 14일에 이은 form 복습이고,
새로운 input 타입을 배운 부분.

1. 카드 타입 선택
: 이 당시 배운 방식은 input type=text를 먼저 입력한 후 datalist를 넣어 따로 선택지를 출력하고 선택해서
text에 출력시키는 방법이었음
2. input type="datetime-local" : 유효기간 및 날짜를 선택, 입력할 수 있는 태그
type유형에 date, month, week, time도 있음
3. input type="file" : 이미지 업로드, 파일 업로드 등에 쓰이는 태그

<!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>
        <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="cardtype">카드선택</label>
                        <input type="text" id="cardtype" list="card">
                        <datalist id="card">
                                <option value="비씨카드" label="비씨카드"></option>
                                <option value="국민카드" label="국민카드"></option>
                                <option value="하나카드" label="하나카드"></option>
                        </datalist>        
                    </li>
                    <li>
                        <label for="expired">유효기간</label>
                        <input type="datetime-local" id="expired">
                        <!-- 날짜 필드:date, month, week, time, datetiem-local -->
                    </li>
                </ol>
        </fieldset>
        <fieldset>
            <legend>추가선택사항</legend>
                <ol>
                    <li>
                        <label for="color">색상선택</label>
                        <input type="color" id="color">
                    </li>
                    <li>
                        <label for="slide">추가수량 선택</label>
                        <input type="range" id="slide" min="1" max="3" value="1" step="1">
                    </li>
                    <li>
                        <label for="photo">사진 선택</label>
                        <input type="file" id="photo" multiple>
                    </li>
                </ol>
        </fieldset>
        <p>
            <input type="submit" value="주문하기" formaction="/" formmethod="post">
            <input type="reset" value="취소하기">
        </p>
    </form>
</body>
</html>

하단 버튼의 경우 p로 묶었지만 p보다는 div가 훨씬 낫고,
안 묶고도 배치할 수는 있음

하지만 div가 편합니다.

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

티스토리툴바