HTML/test09.html at main · ksj2001/HTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="UTF-8">
    <title>Form 태그 연습</title>
</head>

<body>
    <form action="">
        <fieldset>
            <legend>로그인 정보</legend>
            <label for="exampleId">아이디</label>
            <input type="text" id="exampleId" placeholder="6글자만 입력하세요"><br>
            <label for="examplePw">비밀번호</label>
            <input type="password" id="examplePw" placeholder="6~12글자 사이로 입력하세요"><br>
            <label for="exampleMail">이메일</label>
            <input type="email" id="exampleMail" placeholder="name@domain.com"><br>
            <button type="submit" value="완료">완료</button>
            <button type="reset" value="다시쓰기">다시쓰기</button>
        </fieldset>
        <fieldset>
            <legend>회원 정보</legend>
            <label for="">취미/특기</label>
            <input type="text" id="">
        </fieldset>
    </form>
    <form action="">
        <fieldset>
            <legend>체크박스</legend>
            <label for="">취미생활</label>
            <input type="checkbox" value="1" checked>게임하기
            <input type="checkbox" value="2">영화보기
            <input type="checkbox" value="3">음악감상<br>
            <label for="">학교</label>
            <!-- radio 버튼은 name 속성을 지정하지 않으면 checkbox처럼 여러 개가 선택된다. -->
            <input type="radio" name="school">초등학교
            <input type="radio" name="school">중학교
            <input type="radio" name="school">고등학교
        </fieldset>
        <label for="">남기는 말</label>
        <textarea cols="30" rows="5" wrap="soft"></textarea><br>
        <select>
            <option value="">Family Site</option>
            <option value="건축사무소" selected>건축사무소</option>
            <option value="시공사무소">시공사무소</option>
            <option value="설계사무소">설계사무소</option>
        </select><br>
        <label for="">나라</label>
        <input type="text" list="countries">
        <datalist id="countries">
            <option value="가나"></option>
            <option value="스위스"></option>
            <option value="브라질"></option>
        </datalist>
        <br>
        <h2>시간 정보 입력</h2>
        <hr>
        <pre>
            <label for="">month</label>
            <input type="month" value="2023-06"><br>
            <label for="">week</label>
            <input type="week" value="2023-W22"><br>
            <label for="">date</label>
            <input type="date" ><br>
            <label for="">time</label>
            <input type="time" value="17:43"><br>
            <label for="">local</label>
            <input type="datetime-local"><br>

        </pre><br>
        <label for="">spin 버튼 만들기</label>
        <input type="number" min="0.0" max="10.0" step="0.5"><br>
        <label for="">슬라이드 바 만들기</label>
        <input type="range" min="0" max="100" list="aa">
        <datalist id="aa">
            <option value="0" label="low"></option>
            <option value="50" label="medium"></option>
            <option value="90" label="high"></option>
        </datalist>

    </form>
</body>

</html>