1<!DOCTYPE html>
2<html lang="ko">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML νΌ μμ </title>
7 <style>
8 body {
9 font-family: Arial, sans-serif;
10 max-width: 800px;
11 margin: 0 auto;
12 padding: 20px;
13 }
14 form {
15 background: #f9f9f9;
16 padding: 20px;
17 border-radius: 8px;
18 margin-bottom: 30px;
19 }
20 fieldset {
21 margin-bottom: 20px;
22 border: 1px solid #ddd;
23 border-radius: 4px;
24 padding: 15px;
25 }
26 legend {
27 font-weight: bold;
28 padding: 0 10px;
29 }
30 .form-group {
31 margin-bottom: 15px;
32 }
33 label {
34 display: block;
35 margin-bottom: 5px;
36 font-weight: bold;
37 }
38 input[type="text"],
39 input[type="email"],
40 input[type="password"],
41 input[type="number"],
42 input[type="tel"],
43 input[type="url"],
44 input[type="date"],
45 input[type="time"],
46 input[type="datetime-local"],
47 input[type="search"],
48 textarea,
49 select {
50 width: 100%;
51 padding: 10px;
52 border: 1px solid #ddd;
53 border-radius: 4px;
54 box-sizing: border-box;
55 }
56 input:focus, textarea:focus, select:focus {
57 outline: none;
58 border-color: #4CAF50;
59 box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
60 }
61 input:invalid {
62 border-color: #f44336;
63 }
64 button {
65 background-color: #4CAF50;
66 color: white;
67 padding: 12px 24px;
68 border: none;
69 border-radius: 4px;
70 cursor: pointer;
71 font-size: 16px;
72 }
73 button:hover {
74 background-color: #45a049;
75 }
76 .checkbox-group, .radio-group {
77 display: flex;
78 flex-wrap: wrap;
79 gap: 15px;
80 }
81 .checkbox-group label, .radio-group label {
82 display: flex;
83 align-items: center;
84 font-weight: normal;
85 cursor: pointer;
86 }
87 .checkbox-group input, .radio-group input {
88 margin-right: 8px;
89 width: auto;
90 }
91 .hint {
92 font-size: 0.85em;
93 color: #666;
94 margin-top: 5px;
95 }
96 output {
97 display: inline-block;
98 padding: 5px 10px;
99 background: #e8f5e9;
100 border-radius: 4px;
101 }
102 </style>
103</head>
104<body>
105 <h1>HTML νΌ μμ </h1>
106
107 <!-- κΈ°λ³Έ νΌ -->
108 <form action="/submit" method="POST">
109 <h2>νμκ°μ
νΌ</h2>
110
111 <!-- κΈ°λ³Έ ν
μ€νΈ μ
λ ₯ -->
112 <fieldset>
113 <legend>κΈ°λ³Έ μ 보</legend>
114
115 <div class="form-group">
116 <label for="username">μ¬μ©μλͺ
*</label>
117 <input type="text" id="username" name="username"
118 placeholder="μλ¬Έ, μ«μ μ‘°ν©"
119 required
120 minlength="3"
121 maxlength="20"
122 pattern="[A-Za-z0-9]+">
123 <p class="hint">3-20μ, μλ¬Έκ³Ό μ«μλ§ μ¬μ© κ°λ₯</p>
124 </div>
125
126 <div class="form-group">
127 <label for="email">μ΄λ©μΌ *</label>
128 <input type="email" id="email" name="email"
129 placeholder="example@domain.com"
130 required>
131 </div>
132
133 <div class="form-group">
134 <label for="password">λΉλ°λ²νΈ *</label>
135 <input type="password" id="password" name="password"
136 placeholder="8μ μ΄μ"
137 required
138 minlength="8">
139 </div>
140
141 <div class="form-group">
142 <label for="phone">μ νλ²νΈ</label>
143 <input type="tel" id="phone" name="phone"
144 placeholder="010-1234-5678"
145 pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">
146 </div>
147 </fieldset>
148
149 <!-- μ«μμ λ μ§ -->
150 <fieldset>
151 <legend>μΆκ° μ 보</legend>
152
153 <div class="form-group">
154 <label for="age">λμ΄</label>
155 <input type="number" id="age" name="age"
156 min="0" max="150" step="1"
157 placeholder="25">
158 </div>
159
160 <div class="form-group">
161 <label for="birthdate">μλ
μμΌ</label>
162 <input type="date" id="birthdate" name="birthdate"
163 min="1900-01-01" max="2024-12-31">
164 </div>
165
166 <div class="form-group">
167 <label for="website">μΉμ¬μ΄νΈ</label>
168 <input type="url" id="website" name="website"
169 placeholder="https://example.com">
170 </div>
171 </fieldset>
172
173 <!-- μ ν μμ -->
174 <fieldset>
175 <legend>μ ν μ¬ν</legend>
176
177 <div class="form-group">
178 <label for="country">κ΅κ°</label>
179 <select id="country" name="country">
180 <option value="">μ ννμΈμ</option>
181 <optgroup label="μμμ">
182 <option value="kr">λνλ―Όκ΅</option>
183 <option value="jp">μΌλ³Έ</option>
184 <option value="cn">μ€κ΅</option>
185 </optgroup>
186 <optgroup label="μ λ½">
187 <option value="uk">μκ΅</option>
188 <option value="fr">νλμ€</option>
189 <option value="de">λ
μΌ</option>
190 </optgroup>
191 <optgroup label="λΆλ―Έ">
192 <option value="us">λ―Έκ΅</option>
193 <option value="ca">μΊλλ€</option>
194 </optgroup>
195 </select>
196 </div>
197
198 <div class="form-group">
199 <label>μ±λ³</label>
200 <div class="radio-group">
201 <label>
202 <input type="radio" name="gender" value="male"> λ¨μ±
203 </label>
204 <label>
205 <input type="radio" name="gender" value="female"> μ¬μ±
206 </label>
207 <label>
208 <input type="radio" name="gender" value="other"> κΈ°ν
209 </label>
210 </div>
211 </div>
212
213 <div class="form-group">
214 <label>κ΄μ¬ λΆμΌ (볡μ μ ν κ°λ₯)</label>
215 <div class="checkbox-group">
216 <label>
217 <input type="checkbox" name="interests" value="tech"> κΈ°μ
218 </label>
219 <label>
220 <input type="checkbox" name="interests" value="sports"> μ€ν¬μΈ
221 </label>
222 <label>
223 <input type="checkbox" name="interests" value="music"> μμ
224 </label>
225 <label>
226 <input type="checkbox" name="interests" value="travel"> μ¬ν
227 </label>
228 </div>
229 </div>
230 </fieldset>
231
232 <!-- ν
μ€νΈ μμ -->
233 <fieldset>
234 <legend>μκΈ°μκ°</legend>
235
236 <div class="form-group">
237 <label for="bio">μκΈ°μκ°</label>
238 <textarea id="bio" name="bio"
239 rows="5"
240 placeholder="κ°λ¨ν μκΈ°μκ°λ₯Ό μμ±ν΄μ£ΌμΈμ..."
241 maxlength="500"></textarea>
242 <p class="hint">μ΅λ 500μ</p>
243 </div>
244 </fieldset>
245
246 <!-- λμ -->
247 <fieldset>
248 <legend>μ½κ΄ λμ</legend>
249
250 <div class="form-group">
251 <label>
252 <input type="checkbox" name="terms" required>
253 μ΄μ©μ½κ΄μ λμν©λλ€ *
254 </label>
255 </div>
256
257 <div class="form-group">
258 <label>
259 <input type="checkbox" name="newsletter">
260 λ΄μ€λ ν° μμ μ λμν©λλ€ (μ ν)
261 </label>
262 </div>
263 </fieldset>
264
265 <!-- μ μΆ λ²νΌ -->
266 <div class="form-group">
267 <button type="submit">κ°μ
νκΈ°</button>
268 <button type="reset" style="background-color: #888;">μ΄κΈ°ν</button>
269 </div>
270 </form>
271
272 <!-- κΈ°ν μ
λ ₯ νμ
λ€ -->
273 <form>
274 <h2>κΈ°ν μ
λ ₯ νμ
</h2>
275
276 <fieldset>
277 <legend>νΉμ μ
λ ₯ νμ
</legend>
278
279 <div class="form-group">
280 <label for="color">μμ μ ν</label>
281 <input type="color" id="color" name="color" value="#4CAF50">
282 </div>
283
284 <div class="form-group">
285 <label for="range">λ²μ (range): <output id="rangeOutput">50</output></label>
286 <input type="range" id="range" name="range"
287 min="0" max="100" value="50"
288 oninput="rangeOutput.value = this.value">
289 </div>
290
291 <div class="form-group">
292 <label for="file">νμΌ μ
λ‘λ</label>
293 <input type="file" id="file" name="file"
294 accept=".jpg,.png,.pdf"
295 multiple>
296 <p class="hint">JPG, PNG, PDF νμΌλ§ κ°λ₯</p>
297 </div>
298
299 <div class="form-group">
300 <label for="search">κ²μ</label>
301 <input type="search" id="search" name="search"
302 placeholder="κ²μμ΄ μ
λ ₯...">
303 </div>
304
305 <div class="form-group">
306 <label for="browser">λΈλΌμ°μ (datalist)</label>
307 <input type="text" id="browser" name="browser"
308 list="browsers"
309 placeholder="λΈλΌμ°μ μ ν λλ μ
λ ₯">
310 <datalist id="browsers">
311 <option value="Chrome">
312 <option value="Firefox">
313 <option value="Safari">
314 <option value="Edge">
315 <option value="Opera">
316 </datalist>
317 </div>
318
319 <div class="form-group">
320 <label for="time">μκ°</label>
321 <input type="time" id="time" name="time">
322 </div>
323
324 <div class="form-group">
325 <label for="datetime">λ μ§μ μκ°</label>
326 <input type="datetime-local" id="datetime" name="datetime">
327 </div>
328
329 <div class="form-group">
330 <label for="month">μ</label>
331 <input type="month" id="month" name="month">
332 </div>
333
334 <div class="form-group">
335 <label for="week">μ£Ό</label>
336 <input type="week" id="week" name="week">
337 </div>
338
339 <div class="form-group">
340 <label for="hidden">μ¨κ²¨μ§ νλ</label>
341 <input type="hidden" id="hidden" name="hidden" value="secret_value">
342 <p class="hint">μ΄ νλλ 보μ΄μ§ μμ§λ§ κ°μ΄ μ μ‘λ©λλ€</p>
343 </div>
344 </fieldset>
345 </form>
346
347 <footer style="margin-top: 40px; text-align: center; color: #666;">
348 <p>© 2024 HTML νΌ μμ </p>
349 </footer>
350</body>
351</html>