-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathHTML_webform.html
More file actions
245 lines (217 loc) · 9.16 KB
/
HTML_webform.html
File metadata and controls
245 lines (217 loc) · 9.16 KB
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html>
<head>
<title>웹 프로그래밍 심화</title>
</head>
<body>
<header>
<h1 id="top">Hi, Web!</h1>
<h3>Web Programming 스터디를 위한 정리용 html문서입니다</h3><br>
<a href="HTML.html">이전 문서로 돌아가기</a>
<a href="CSS.html">다음 문서로 넘어가기</a>
</header>
<hr>
<section>
<article>
<h3>HTML 문서 구조화</h3>
기존 HTML의 한계 : 문서 구조를 표현하는 태그가 없어 소스를 통해 문서 구조 파악이 힘듬<br>
<strong>->시맨틱 태그를 통해 웹 문서를 구조화할 수 있다!</strong><br>
<header>, <section>, <article>, <main>, <summary>, <mark>, <time>...등등<br><br>
<!--문서 구조화 시, 권장사항
웹페이지의 전체 제목과 소개는 <header>태그로 작성한다.
본문은 <section>으로 묶고, 본문 내의 영역은 <article>로 작성한다.
링크나 메뉴들은 <nav>(navigation)태그로 작성한다.-->
구조화된 태그들의 위치와 색, 모양등은 개발자가 CSS를 사용해 지정한다.
</article>
<hr>
<article>
<h3>시맨틱 블록 태그</h3>
시맨틱 태그를 사용해 블록을 구성할 수 있다.
<h4><FIGURE></h4>
<figure>태그는 본문에 삽입된 이미지, 동영상, 소스코드 등 콘텐츠를 블록화한다.<br>
블록의 제목은 <figure>태그 내의 <figcaption>태그로 작성한다.
<figure>
<figcaption><figure>태그 활용</figcaption>
<pre>
<code>function f() { alert("경고합니다"); }</code>
</pre>
<hr>
<small>실행결과</small>
<pre>
<img src="media/alert.png" alt="실행결과">
</pre>
</figure>
<h4><DETAILS>와 <SUMMARY>활용</h4>
<details>
<summary><details>로 만든 블록에 핸들(▶)이 나타난다.</summary>
<p><summary>태그는 <details>로 구성되는 블록의 제목을 표현한다.</p>
</details>
</article>
<hr>
<article>
<h3>시맨틱 인라인 태그</h3>
텍스트 일부를 마크업하기 위해 시맨틱 태그를 사용하기도 한다.
<figure>
<figcaption><b><i>인라인 시맨틱 태그 사례</i></b></figcaption>
<p>내일 <mark title="<mark>">HTML5 시험</mark><br>
시간은 <time title="<time>">09:00</time><br>
난이도 <meter title="<meter>" value="0.8" max="1.0">80%</meter><br>
자료 업로딩(20%)
<progress title="<progress>" value="2" max="10"></progress><br>
</p>
</figure>
</article>
<hr>
<article>
<h3 title="웹 페이지에서 사용자 입력을 받는 폼">웹 폼</h3>
<ul><strong><form>태그 속성</strong>
<li>name : 폼의 이름을 지정하는 속성으로 자바스크립트에서 사용</li>
<li>action : 폼 데이터를 처리할 웹 서버 응용프로그램 지정. submit버튼이 클릭되면 action에 지정된 웹 서버 응용프로그램을 실행한다.</li>
<li>method : 폼 데이터를 웹 서버로 전송하는 방식. 대표적으로 GET, POST가 있다.
</ul>
<strong>간단한 로그인 폼 만들기</strong>
<form name="fo" method="get">
사용자 ID : <input type="text" size="15" value=""><br>
비밀 번호 : <input type="password" size="15" value="">
<input type="submit" value="완료">
</form>
</article>
<hr>
<article>
<h3>다양한 폼 만들기</h3>
<img src="media\Form_list.png"
width="500" height="360">
<details>
<summary>텍스트 입력</summary>
<small>placeholder 속성으로 입력할 형식을 제시할 수 있다.</small>
<form>
<input type="text"> : <input type="text" placeholder="placeholder사용"><br>
<input type="password"> : <input type="password" value="" maxlength="4"><br>
<textarea> : <textarea cols="20" rows="3">cols="열 개수" rows="행 개수"</textarea>
</form>
</details><br>
<details>
<summary>데이터 목록을 가진 텍스트 입력 창</summary>
<small><input>태그의 list속성 값과 <datalist>의
id속성 값을 동일하게 주어 연결한다.</small>
<form>
<input type="text"> : <input type="text" list="datalist">
<datalist id="datalist">
<option value="<option value="">">
<option value="Miku">
<option value="Rin">
</datalist>
</form>
</details><br>
<details>
<summary>버튼 만들기</summary>
<small>버튼은 <input>태그나 <button>태그로 만들 수 있으며,
type속성으로 기능을 선택할 수 있다.</small><br>
<ul><strong>버튼 기능의 종류</strong>
<li>button : 아무 기능이 없는 버튼. 자바스크립트에서 사용</li>
<li>submit : 클릭 시, 웹 서버로 폼 데이터를 전송</li>
<li>reset : 폼에 입력된 내용을 초기화</li>
<li>image : 이미지 버튼 만들기</li>
</ul>
<form>
<input type="button" value="<input type="button">">
<button type="button"><button type="button"></button>
<br>
<button type="summit">summit</button><br>
<input type="text" value="reset?"><input type="reset" value="reset">
</form>
</details><br>
<details>
<summary>선택형 입력</summary><br>
<strong>-체크박스 만들기</strong><br>
<small>checked속성을 가진 체크박스는 처음부터 선택된 상태로 출력</small>
<form>
<input type="checkbox" value="1"><input type="checkbox">
<input type="checkbox" value="2" checked>Miku
<input type="checkbox" value="3">Rin
</form><br>
<strong>-라디오버튼 만들기</strong><br>
<small>같은 name을 가진 라디오 버튼 중 하나만 선택 가능</small>
<form>
<input type="radio" name="vocaloid" value="1">Miku<br>
<input type="radio" name="vocaloid" value="2">Rin<br>
<input type="radio" name="vocaloid" value="3">IA<br>
</form><br>
<strong>-콤보박스 만들기</strong><br>
<small><option>태그로 항목을 만들어 드롭다운 리스트에 목록 출력</small>
<form>
<select name="vocaloid"> : <select name="vocaloid">
<option value="1">Miku</option>
<option value="2">Rin</option>
<option value="3">IA</option>
</select>
</form>
</details><br>
<details>
<summary><LABEL>로 캡션 만들기</summary>
<label>을 사용해 캡션과 폼 요소를 한 단위로 묶을 수 있다.<br>
<small>아래 라디오버튼의 캡션부분을 클릭해 비교해본다</small>
<form>
<input type="radio" name="label" value="1">label 미지정<br>
<label>
<input type="radio" name="label" value="2">label 지정
</label>
</form>
</details><br>
<details>
<summary>시간 정보 입력</summary>
<img src="media\form_timetype.png"
width="500" height="150">
<form>
month : <input type="month" value=""><br>
week : <input type="week" value="2016-W36"><br>
data : <input type="date" value="2016-09-01"><br>
time : <input type="time" value="21:30"><br>
local: <input type="datetime-local" value=""><br>
</form>
</details><br>
<details>
<summary>편리한 숫자 입력</summary><br>
<strong>-스핀버튼으로 정교한 값 입력</strong><br>
<small><input type="number">의 속성 min과 max사이에서 step만큼 증감</small>
<form>
<input type="number" min="0.0" max="10.0" step="1.0">
</form><br>
<strong>-슬라이드바로 대략적인 값 입력</strong><br>
<small>datalist를 id로 연결해 슬라이드바의 지점 생성 가능</small>
<form>
<input type="range" min="0" max="100" list="slidebar">
<datalist id="slidebar">
<option value="10" label="Low">
<option value="50" label="Medium">
<option value="90" label="High">
</datalist>
</form>
</details><br>
<details>
<summary>형식을 가진 텍스트 입력</summary>
<small>email, url, 전화번호 등 특정 형식의 텍스트가 입력되었는지 검사</small><br>
<form>
이메일 : <input type="email" placeholder="email@domain.com"><br>
URL : <input type="url" placeholder="https://"><br>
전화번호 : <input type="tel" placeholder="010-1234-5678">
<input type="submit" value="submit"><br>
<hr>
검색어 : <input type="search" placeholder="x 클릭시 입력취소">
</form>
</details><br>
<details>
<summary>폼 요소들의 그룹핑</summary>
<small><fieldset>태그로 그룹핑. 그룹의 제목은 <legend>태그로 표현</small>
<form>
<fieldset>
<legend>회원정보</legend>
이메일:<input type="email"><br>
url:<input type="url"><br>
</fieldset>
</form>
</details>
</article>
</section>
</body>
</html>