fieldsetPractice.html

<body>
    <!-- <fieldset></fieldset> : 테두리 박스 -->
    <fieldset>
        <!-- <legend></legend> : 테두리에 제목 -->
        <legend>개인정보</legend>
        <ul>
            <li>
                <!-- for="name" id="name"을 맞추어야 커서가 위치됨 -->
                <!-- <lable></lable> 이름을 눌러도 텍스트박스가 선택됨 -->
                <label for="name">이름</label>
                <!-- 텍스트박스 -->
                <input type="text" id="name"> 
            </li>
            <li>
                메일 주소
                <!-- 텍스트박스 -->
                <input type="text"> 
            </li>
            
        </ul>
    </fieldset>

        <!-- <fieldset></fieldset> : 테두리 박스 -->
        <fieldset>
            <!-- <legend></legend> : 테두리에 제목 -->
            <legend>개인정보</legend>
            <ul>
                <li>
                    아이디
                    <!-- 텍스트박스 -->
                    <input type="text"> 
                </li>
                <li>
                    비밀번호
                    <!-- 텍스트박스 -->
                    <input type="text"> 
                </li>
                
            </ul>
        </fieldset>
</body>

20230309124736.png

fieldset.html

<body>
    <fieldset>
        아이디:<input type="text">
        <!-- type="password": 불릿으로 표시 -->
        비밀번호:<input type="password">
        <!-- type="submit": form 태그에 action값을 찾아감
        action값이 없어서 초기화 -->
        <input type="submit" value="로그인">
    </fieldset>
</body>

20230309125217.png

number-range.html

<body>
    <fieldset>
        <legend>등록 정보</legend>
        참여인원<small>(최대 10명)</small>
        <!-- type="number":스핀으로 숫자 증감하거나 숫자만 입력 가능 -->
        <!-- 0~10 사이의 숫자만 입력됨 -->
        <input type="number" min="0" max="10"><br>
        지원물품<small>(1인당 5개)</small>
        <!-- value="3": 초기값이 3으로 설정됨 -->
        <!-- step="5" : 5씩 증가하거나 감소 -->
        <input type="number" value="3" min="0" max="50" step="5"><br>
        희망단계<small>(하,중,상)</small>
        <!-- input type="range": 범위 형태로 움직임 -->
        <input type="range" value="2" min="1" max="3">
        <!-- type="color":색상 선택(초기값은 검정) -->
        <!-- RGB: 레드/ 그린/ 블루 -->
        <!-- value="#000000": 16진수로 초기 값 설정가능 -->
        <input type="color" value="#00ffff">
    </fieldset>
</body>

20230309131652.png

dateForm.html

<body>
    <h3>날짜 입력</h3>
    <input type="date"><br>
    <input type="month"><br>
    <input type="week"><br>
</body>

20230309131808.png

time.html

<body>
    <form>
        <h3>검사시간을 선택하세요(오늘)</h3>
        시작시간<input type="time" value="09:00"><br>
        종료시간<input type="time" value="18:00">

        <h3>검사시간을 선택하세요(다른 날짜)</h3>
        <!-- type="datetime-local":날짜 추가되어 표시 -->
        시작시간<input type="datetime-local" value="2016-03-09 12:00"><br>
        종료시간<input type="datetime-local" value="2023-03-15 02:00">
    </form>
</body>

20230309132419.png

submit-reset.html