HTML5-CSS/form.html at master · ViGilanteAF/HTML5-CSS · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="Form" content="width=device-width, initial-scale=1.0" />
    <title>Form</title>
  </head>
  <body>
    <form action="login.php" method="post" autocomplete="off">
    <fieldset>
        <legend>개인 정보</legend>
        <ul>
            <li>
                <label for="name">이름</label>
                <input type="text" id="name">
            </li>
            <li>
                <label for="mail">메일 주소</label>
                <input type="text" id="mail">
            </li>
        </ul>
    </fieldset>
    <fieldset>
        <legend>로그인 정보</legend>
     <ul>
         <li>
             <label for="id">아이디</label>
             <input type="text" id = "id" placeholder="아이디" autofocus required>
         </li>
         <li>
             <label for="pw">비밀번호</label>
             <input type="password" id = "pw"placeholder="비밀번호">
         </li>
         <li>
             <input type="submit" title= "로그인" value="로그인">
         </li>
     </ul>
    </fieldset>
     <h3>수강 분야(다수 선택 가능)</h3>
     <ul>
         <li> <input type="checkbox" value="grm">문법</li>
         <li> <input type="checkbox" value="wr">작문</li>
         <li> <input type="checkbox" value="rd">독해</li>
     </ul>
     <h3>수강 과목(1과목만 선택 가능)</h3>
     <ul>
         <li>
             <label for=""><input type="radio" name="subject" value="eng">영어회화 </label>
         </li>
         <li>
             <label for=""><input type="radio" name="subject" value="ch">중국어회화</label>
         </li>
         <li>
             <label for=""><input type="radio" name="subject" value="jp">일어회화</label>
         </li>
     </ul>
     <h3>input 태그의 type 속성에서 사용가능한 유형 </h3>
     <ul>
          <li><input type="hidden"> 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가짐</li>
          <li><input type="text"> 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 만듬</li>
          <li><input type="search"> 검색 상자를 만듬</li>
          <li><input type="tel"> 전화번호 입력 필드를 만듬</li>
          <li><input type="url">IRL 주소를 입력할 수 있는 필드를 만듬</li>
          <li><input type="email">메일 주소를 입력할 수 있는 필드를 만듬</li>
          <li><input type="password">비밀번호를 입력할 수 있는 필드를 만듬</li>
          <li><input type="datetime">국제 표준시로 설정된 날짜와 시간 을 만듬</li>
          <li><input type="datatime-local">사용자가 있는 지역을 기준으로 날짜와 시간 을 만듬</li>
          <li><input type="date">사용자 지역을 기준으로 날짜(연, 월, 일) 를 만듬</li>
          <li><input type="month">사용자 지역을 기준으로 날짜(연, 월)을 만듬</li>
          <li><input type="week">사용자 지역을 기준으로 날짜(연, 주)를 만듬</li>
          <li><input type="time">사용자 지역을 기준으로 날짜(시, 분, 초, 분할 초)를 만듬</li>
          <li><input type="number">숫자를 조절할 수 있는 화살표를 만듬</li>
          <li><input type="range">숫자를 조절할 수 있는 슬라이드 막대를 만듬</li>
          <li><input type="color">색상 표 를 만듬</li>
          <li><input type="checkbox">주어진 항목에서 2개 이상 선택 가능한 체크박스 를 만듬</li>
          <li><input type="radio">주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 만듬</li>
          <li><input type="file">파일을 첨부할 수 있는 버튼을 만듬</li>
          <li><input type="submit">서버 전송 버튼을 만듬</li>
          <li><input type="image">submit버튼 대신 사용할 이미지를 만듬</li>
          <li><input type="reset">리셋버튼을 만듬</li>
          <li><input type="button">버튼을 만듬</li>
          <li><input type="button" value="새 탭 열기" onclick="window.open()"></li>
          <li><input type="button" value="닫기" onclick="window.close()"></li>
     </ul>
     <fieldset>
         <legend>Text필드 속성</legend>
     <ul>
         <li>
             <label>아이디:<input type="text" name="id" size="10" maxlength="10" value="아이디를 입력하세요"></label>
             <label>비밀번호:<input type="password" name="pwd" maxlength="15" size="15" ></label>
             <input type="image" id="butt" src="image/login.jpg" alt="login">

         </li>
     </ul>
    </fieldset>
    <fieldset>
        <legend>분화된 텍스트 필드</legend>
        <ul>
            <li>
                <label>검색 : <input type="search" ></label>
                <input type="submit" value="검색">
            </li>
            <li>
                <label>URL : <input type="url" value="URL 을 입력하세요"></label>
                <input type="submit" value="이동">
            </li>
            <li>
                <label>Email : <input type="email" ></label>

            </li>
            <li>
                <label>전화번호 : <input type="tel" value="전화번호 만 입력하세요"></label>
            </li>
            <li>
                <label >숫자 : <input type="number" value="숫자만 입력하세요" ></label>
                <label >숫자 : <input type="number" value="1" min="1" max="5"></label>
            </li>
            <li>
                <label >슬라이드 막대로 숫자 지정하기 : <input type="range" min="1" max="10" value="1"></label>
            </li>
        </ul>
    </fieldset>
    <fieldset>
        <legend>등록 정보</legend>
        <ul>
            <li>
                <label class="reg" for="member">참여 인원<small>(최대10명)</small></label>
                <input type="number" id="member" value="1" min="1" max="10" step="1">
            </li>
            <li>
                <label class="reg" for="stuffs">지원 물품<small>(1인당 5개)</small></label>
                <input type="number"id="stuffs" value="1" min="0" max="50" step="5" size="5">
            </li>
            <li>
                <label class="reg" for="satis">희망 단계<small>(하,중,상)</small></label>
                <input type="range" id="satis" value="1" min="1" max="3">
            </li>
        </ul>
    </fieldset>
    <fieldset>
        <legend>신청 과목</legend>
        <p>이 달에 신청할 과목을 선택하세요<small>(1과목만 가능)</small></p>
        <label ><input type="radio" name="subject" value="speaking">회화</label>
        <label ><input type="radio" name="subject" value="grammar">문법</label>
        <label ><input type="radio" name="subject" value="writing">작문</label>
    </fieldset>
    <fieldset>
        <legend>메일링</legend>
        <p>메일로 받고 싶은 뉴스 주제를 선택해 주세요<small>(복수 선택 가능)</small></p>
        <label ><input type="checkbox" name="mailing" value="news">해외 단신</label>
        <label ><input type="checkbox" name="mailing" value="dialog" >5분 회화</label>
        <label ><input type="checkbox" name="mailing" value="moningpops">모닝 팝스</label> <br>
        <form action="register.php" method="post">
            <label >메일 주소<input type="text" id="mail"></label>
            <input type="submit" value="제출">
            <input type="reset" value="다시 입력">
        </form>
    </fieldset>
    <fieldset>
        <legend>과 티셔츠 설문</legend>
        <p>올해 과 티(T)를 만드려고 합니다. 원하는 색상을 추천해 주세요</p>
        <label >선호 색상 : <input type="color" value="#00ff00"></label>
    </fieldset>
    <fieldset>
        <legend>조회 기간 선택</legend>
        <label ><input type="date" id="start"></label>
        <label ><input type="data | month | week "></label>
    </fieldset>
    <fieldset>
        <h3>원하는 대관시간을 선택하세요(오늘)</h3>
        <label>시작 시간 <input type="time" value="09:00" id="start"></label>
        <label>종료 시간 <input type="time" value="18:00" id="end"></label>
        <h3>대관시간을 선택하세요(다른 날짜)</h3>
        <label>시작 시간<input type="datetime-local" value="2020-08-01T09:00" id="start"></label>
        <label>종료 시간<input type="datetime-local" value="2020-08-01T18:00" id="end"></label>
    </fieldset>
    <fieldset>
        <legend>수강 과목</legend>
        <label class="reg" for="subj">영어회화(초급)</label>
        <input type="text" id="subj" value="오전 09:00 ~ 11:00" readonly>
    </fieldset>
  </body>
</html>