반응형 웹 실전 프로젝트 #8 (폼 관련요소 및 속성)
폼 <form>, <fieldset>
요소 유형 : 블록 레벨
태그명 : <form></form>
의미및 특징 : 온라인 서식에서 입력한 값들을 처리 하는 프로그램으로 전송할때 사용
텍스트, 인라인요소, 블록레벨요소를 포함할수 있다
일반적으로 서식(사용자 입력)에 관련된 태그들이 포함된다
요소유형 : 블록레벨
태그명: <fieldset></fieldset>
의미및 특징 : 양식 요소들을 그룹화 할때 사용
텍스트, 인라인요소, 블록 레벨요소를 포함할수 있다
그룹화된 서식의 제목을 정의 할수 있는 <legend> 태그를 자식요소로 포함한다
|
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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>caption태그와 scope속성</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid #000;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<th>요소유형</th>
<th>태그명</th>
<th>태그의 의미 및 특징</th>
</tr>
<tr>
<td rowspan="6">블록레벨요소</td>
<td rowspan="2"><form></form></td>
<td>
<p>1. 온라인 서식(검색, 로그인, 회원가입 등)에서 입력한 값들을 처리 하는 프로그램으로 전송할때 사용하는 태그입니다.</p>
</td>
</tr>
<tr>
<td>
<p>
2.텍스트, 인라인요소, 블록 레벨 요소를 포함 할수있습니다. 일반적으로 서식(사용자입력)에 관련된 태그들을 포함 합니다.
</p>
</td>
</tr>
<tr>
<td rowspan="3"><fieldset></fieldset></td>
<td>
<p>
1. 양식요소들을 그룹화 할때 사용하는 태그입니다.
</p>
</td>
</tr>
<tr>
<td>
<p>
2. 텍스트, 인라인요소, 블록 레벨요소를 포함 할수 있습니다.
</p>
</td>
</tr>
<tr>
<td>
<p>
3. 그룹화 된 서식의 제목을 정의 할수 있는 <legend>태그를 자식 요소로 포함 합니다.
</p>
</td>
</tr>
</table>
</form>
<br />
<fieldset>
<legend>회원등록</legend>
<p>회원을 등록 해주세요.</p>
</fieldset>
<br />
<fieldset>
<div>
<legend>상품등록</legend>
<p>상품을 등록 해주세요.</p>
</div>
</fieldset>
</body>
</html>
|
cs |
<form>태그에는 중요한 action 속성과 method 속성이 있다.
action 속성은 서식에서 작성한 값을 처리 하는 프로그램의 주소(URL)을 지정하며
method속성은 서식의 값들을 서버 프로그램에 어떤 방식으로 전달 할 것인지를 정의 한다
전달 방식에는 get방식과 post방식이 있는데 보통 검색은 get방식 로그인, 회원 가입처럼 중요한 정보를 전송 할때는 post방식을 사용한다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>로그인</legend>
<p>ID: <input type="text"></p>
<p>PW: <input type="password"></p>
</fieldset>
</form>
</body>
</html>
|
cs |
한줄 입력 요소 <input>, type 속성
| 요소 유형 | 태그명 | 태그의 의미 및 특징 |
| 인라인요소 | <input> | 사용자로부터 데이터 값을 입력 받기 위한 태그 |
| type속성 값에 따라 다양한 폼 컨트롤을 생성 할수 있다 | ||
| 공통 속성으로 name, value속성이 있다 |
| type 속성 | 설명 |
| text | 한줄 글 입력 상자 maxlength속성으로 최대 글자수를 제한 가능 |
| password | 비밀번호 입력상자 입력된 내용은 * 로 표시 |
| search | 검색 입력 상자 |
| 이메일 입력 상자 | |
| tel | 전화번호 입력상자 |
| color | 컬러 입력상자 |
| number | 숫자 입력상자 숫자의 최솟값, 최댓값을 min, max로 지정가능 |
| range | 슬라이드 바 최솟값, 최댓값을 min, max로 지정 가능 |
| radio | 라디오버튼 여러개 radio중 하나만 선택 가능 (요소의 name속성 값이 같아야 함) 예) 이메일 수신여부 예 <input type="radio" name="email"> 아니오 <input type="radio" name="email"> |
| checkbox | 체크박스 다중 선택이 가능 checked속성을 정의 하면 웹 페이지 실행시 해당 checkbox가 기본으로 표시됨 |
| submit | 전송 버튼 value 속성으로 버튼에 표시 되는 텍스트를 지정 |
| reset | 초기화 버튼 value속성으로 버튼 이름 지정가능 |
| button | 버튼 value속성으로 버튼 이름 지정 |
| image | 이미지 버튼 alt속성을 반드시 정의 해야 함 |
| file | 첨부파일 |
| hidden | 사용자에게 노출할 필요가 없는 데이터를 지정 화면에 표시 되지 않음 |
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<form action="#" method="post">
<legend>type 속성</legend>
<p>아이디: <input type="text"></p>
<p>비밀번호: <input type="password"></p>
<p>검색: <input type="search"></p>
<p>이메일: <input type="email"></p>
<p>전화번호: <input type="tel"></p>
<p>컬러선택: <input type="color"></p>
<p>수량: <input type="number" min="1" max="10" value="1"></p>
<p>만족도: <input type="range" min="1" max="10" value="1"></p>
<p>
예<input type="radio" name="receive" checked="checked">
아니오<input type="radio" name="receive">
</p>
<p>
html<input type="checkbox" checked="checked">
css<input type="checkbox">
</p>
<p>
<input type="submit" value="전송">
</p>
<p>
<input type="reset" value="취소">
</p>
<p>
<input type="button" value="확인">
</p>
<p>
<input type="image" src="./public/images/space.PNG" alt="우주">
</p>
<p>
<input type="file">
</p>
</form>
</body>
</html>
|
cs |
▲ 브라우저별 HTML5에 대한 지원 여부를 확인해볼수 있다
Can I use... Support tables for HTML5, CSS3, etc
About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development commu
caniuse.com
▲ HTML, CSS, Javascript등에 대한 지원 현황을 확인 할수 있다
form요소 안에서 데이터 전송 기능을 갖는 버튼 요소는 <input type="submit">, <input type="image">, <button> 태그이다
여러줄 입력 요소, 선택 요소 <textarea>, <select>
| 요소유형 | 태그명 | 태그의 의미 및 특징 |
| 인라인요소 | <textarea></textarea> | 여러줄 텍스트 입력 상자 태그 |
| rows속성과 cols속성으로 텍스트 입력 상사의 행과 열 수를 지정 | ||
| <select></select> | 선택 목록 상자 | |
| <option>태그외에 다른 태그는 자식으로 올수 없다 | ||
| <option>태그에 selected속성이 정의 되면 웹 페이지 실행시 해당 <option>태그가 가본 목록으로 표시 |
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>회원가입</legend>
<p>가입목적: <br><textarea rows="5" cols="100"></textarea></p>
<p>전화번호:
<select>
<option>지역번호</option>
<option selected="selected">02</option>
<option>031</option>
<option>044</option>
</select>
<input type="text">
</p>
</fieldset>
</form>
</body>
</html>
|
cs |
폼 접근성 label속성
| 요소유형 | 태그명 | 태그의 의미 및 특징 |
| 인라인요소 | <label></label> | 사용자 입력 태그 <input>,<textarea>, <select>들에 대한 제목을 정의 |
| <label>태그를 사용자 입력 태그의 제목으로 연결 하기 위해서는 <label>태그의 for 속성 값과 사용자 입력 태그의 id속성 값을 동일 하게 지정 해야 한다 | ||
| <label for="id">아이디</label> <input type="text" id="id"> |
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<h1>label 요소</h1>
<form action="#" method="POST">
<table>
<caption>회원가입 입력</caption>
<colgroup>
<col>
<col>
</colgroup>
<tbody>
<tr>
<th scope="row">
<label for="id">아이디</label>
</th>
<td>
<input type="text" id="id" title="아이디입력">
</td>
</tr>
<tr>
<th scope="row">
<label for="pw">비밀번호</label>
</th>
<td>
<input type="password" id="pw" title="비밀번호 입력">
</td>
</tr>
<tr>
<th scope="row">
<label for="r_pw">비밀번호 재입력</label>
</th>
<td>
<input type="password" id="r_pw" title="비밀번호 재입력">
</td>
</tr>
<tr>
<th scope="row">
<label for="email">이메일</label>
</th>
<td>
<input type="email" id="email" title="이메일아이디 입력">@
<input type="text" title="이메일주소 입력">
</td>
</tr>
<tr>
<th scope="row">
<label for="hp">핸드폰 번호</label>
</th>
<td>
<select id="hp" title="휴대폰 앞자리 선택">
<option>선택</option>
<option>010</option>
<option>011</option>
</select>-
<input type="text" title="휴대폰 번호 중간 4자리 입력">-
<input type="text" title="휴대폰 번호 끝 4자리 입력">
</td>
</tr>
</tbody>
</table>
<div>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
</div>
</form>
</body>
</html>
|
cs |
<label>태그의 텍스트를 클릭 하면 연결된 사용자 입력 요소로 포커스가 이동 되는것을 볼수 있다
title속성은 요소에 대한 보조 설명으로 (툴팁)으로 title 속성에 정의된 요소에 마우스를 올리면 정의 된 텍스트가 말풍선으로 나타나며 스크린 리더에서는 title속성을 읽어 줌으로써 폼 서식에 대한 접근성을 높일수 있다
웹 문서에서 Tab키로 이동시 포커스를 받는 요소는 a, input, textarea, select, button등이 있다
이 요소들은 보통 마크업한 순서대로 이동되지만 필요에 따라 포커스의 이동 순서를 바꾸어야 하거나 div, span요소처럼 포커스를 받지 못하는 요소에 포커스를 주어야하는 경우도 있다
이런경우 tabindex 속성을 사용하면 된다
| tabindex="1" | 웹문서에서 Tab 키로 이동시 가장 먼저 포커스를 받는다 다만 논리적으로 마크업한 이동 순서에 영향을 줄수있기 때문에 주의해야 한다 |
<input type="text tabindex="1"> |
| tabindex="0" | 키보드 포커스를 받을수 없는 요소에 포커스를 받도록 만들어준다 | <div tabindex="0"></div> |
| tabindex="-1" | 키보드 포커스를 받을수 있는 요소에 포커스를 받지 않도록 만들어준다 | <a href="#" tabindex="-1"></a> |
주요 입력 속성
HTML5에서는 자바스크립트로 처리 했던 폼 기능들을 입력 속성들을 이용하여 간단하게 해결할수 있다
| 속성명 | 설명 |
| placeholder | 입력 내용에 대한 힌트를 제공한다 내용을 입력 하지 않고 비어 있는 상태로 포커스를 이동하면 초기 힌트 값으로 표시 해준다 |
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 입력 속성</title>
</head>
<body>
<form>
<fieldset>
<legend>필드에 입력 형식 힌트주기</legend>
<p>
<label for="id">아이디</label>
<input type="text" id="id" placeholder="아이디" title="아이디 입력">
</p>
<p>
<label for="pw">비밀번호</label>
<input type="text" id="pw" placeholder="비밀번호" title="비밀번호 입력">
</p>
</fieldset>
</form>
</body>
</html>
|
cs |
required속성을 사용하면 아이디 내용을 지우고 비밀번호 입력 요소로 이동하면 아이디내용이 다시 나타난다
| 속성명 | 설명 |
| required | required속성이 적용된 입력 요소에 내용이 비어 있을 경우 메시지를 표시 |
autocomplete속성을 사용하면
전화번호나 이메일 내용을 입력후 확인 버튼을 누르면 on값이 설정된 입력 요소(이메일)에 자동 완성 기능이 활성화 되고 off값이 적용된 입력 요소 (전화번호)에는 기능이 활성화 되지 않는다
| 속성명 | 설명 |
| autocomplete | 입력 요소에 자동완성 기능 여부를 on, off값으로 설정 |
| 속성명 | 설명 |
| pattern | 지정한 문자패턴(정규식)과 입력된 내용의 일치여부를 판단해주는 속성 |
\d{3}-\d{3,4}-\d{3}부분을 정규식이라고 하는데 \d는 숫자 {n}은 n자리수를 의미 한다
RegExr: Learn, Build, & Test RegEx
RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).
regexr.com
휴대폰을 입력 할때 숫자3자리-숫자4자리-숫자4자리의 형식에 맞게 입력 해야만 전송할수 있다
| 속성명 | 설명 |
| muliple | 여러개의 이메일을 ','로 입력하거나 파일 업로드시 여러개의 파일을 동시에 선택 할수 있도록 해준다 |
파일선택 버튼을 눌러 열기 창에서 여러개의 파일들을 선택 할수 있다
| 속성명 | 설명 |
| disabled | 요소를 사용할수 없도록비활성화 상태로 만들어 줌 |
| readonly | 입력된 내용을 수정 할수 없도록 만들어줌 |
다음버튼은 비활성화 상태가 되었고 반응형웹 내용은 수정이 되지 않는다