오늘은 HTML Forms와 관련된 태그를 배웠습니다. 대표적으로 브라우저에서 가장 자주 볼 수 있는 회원가입 또는 검색등의 작업을 이 태그를 이용하여 만들 수 있습니다. 브라우저에서 사용자가 요청하는 데이터를 서버로 전송하는 용도로 사용합니다. 사용자의 요청 또는 입력을 하나의 논리적인 그룹으로 묶어서 서버로 전송합니다.
지난시간에 서버에 두 가지 종류를 보면서 각각의 역할을 살펴보았습니다. HTTP서버는 전방에서 사용자의 요청을 필터링하고, WAS는 실질적으로 사용자가 요청한 데이터를 연산 하는 서버라고 했습니다. 그러면 어떤 방식으로 클라이언트가 보는 브라우저에서 서버로 데이터를 전송하는지를 알아보겠습니다.
데이터를 서버로 전송하는 방식으로는 다음의 두 가지 방식이 있습니다.
[get]
- URL에 요구 데이터가 보입니다. (form tag에서 전송방식을 지정하지 않을 시 지정되는 기본 방식입니다. Default)
- (변수명,값)의 쌍으로 양식 데이터를 URL에 추가합니다. -> (?변수명=값)
- 보안성이 좋지 않으니 get을 사용하여 개인정보(비밀번호)와 같은 민감한 데이터를 보내면 안 됩니다.
- 구글의 쿼리 문자열과 같은 비보안 데이터에 유용합니다.
- URL의 길이가 제한 된다.(2048자)
[post]
- URL에 요구 데이터가 숨어서 보인다. GET에 비해 보안성이 좋습니다.
- 본문 안에 양식 데이터를 추가합니다. 제출된 양식 데이터는 URL에 표시되지 않습니다.
- 크기 제한이 없고, 대용량의 데이터를 보낼 수 있습니다.
[Form 태그 속성]
기본적으로 input같은 form element는 form태그와 무관하게도 사용할 수 있습니다.
[방법 1] 다음과 같이 form태그로 감싸져 있는 태그는 입력받은 정보를 서버로 전송하는 것입니다.
<form>
<input>
</form>
[방법 2] 다음과 같이 form태그로 감싸져 있지 않고 사용하면 입력받은 정보를 서버로 전송할 수 없습니다.
<label>
<input>
[FORM]
1. 서버로 데이터를 묶어서 전송할 목적으로 사용하는 태그. form태그를 이용하여 데이터를 전송할때는 반드시 전송하고자 하는 데이터가 있는 태그의 속성으로 name=""을 지정해야 합니다.
2. 속성
1) action="" : 전송대상(생략시에는 자신의 페이지에게 전송)
2) method="GET or POST" : 전송방식(생략시 기본값 GET)
GET : 서버로 전달하는 데이터가 URL주소에 QUERY(?변수명=값&변수명=값)형식으로 전달
http://.../_06_form_tag.html?name=홍길동&id=hong
ㄴ> QueryString방식
POST: 전달 데이터가 숨겨져서 전달됩니다.
HTTP 상태 404 – 찾을 수 없음
action 속성에 잘못된 값을 입력하면 만날 수 있는 오류입니다. 이는 action으로 지정한 속성이 애초에 없던지, 속성이 오타가 났던지 둘 중 하나인 경우 만날 수 있는 오류입니다. 주소는 대소문자를 정확하게 구분하기 때문에, 오류가 나지 않도록 하기 위해서는 대소문자를 정확하게 구분해서 입력해야 합니다.
Input 태그 속성
1) name -> 클라이언트 + 서버 (입력받은 정보를 서버로 전송할 수 있습니다.)
2) id -> 클라이언트 [클라이언트에서 자바스크립트로 동적 제어할 때 사용합니다.] (입력받은 정보를 서버로 전송할 수 없습니다.)
3) type : 컨트롤의 종류를 지정합니다. 생략시 기본적으로 text로 됩니다.
- text
- type 속성 생략시 기본적으로 입력되는 기본값
- 값을 입력하지 않아도 무조건 넘어갑니다. (빈칸으로 전달됩니다.)
- button
- 버튼 생성
- password
- 비밀번호가 보이지 않도록 입력됩니다.
- radio
- name을 동일하게 지정해야 그룹화가 됩니다. 하나의 기본값을 설정해주어야 합니다. checked="checked"
- 단일 선택만 가능하며, 체크한 정보만 넘어갑니다.
- submit
- 지정된 전송대상(action 속성)으로 입력받은 값을 전송합니다.
- resert
- 폼에 입력된 데이터를 초기화 시켜라
- checkbox
- 다중 선택이 가능하고, 체크한 정보만 넘어갑니다.
- 같은 종류의 정보끼리 전송되는 변수명(name)을 동일하게 설정합니다. 브라우저에서 데이터를 송신시 쿼리로 보내지만 서버측에서는 같은 정보를 파라미터라고 부르고, 수신시 같은 이름(name)으로 저장된 배열로 받기 때문입니다.
- combobox
- file
- 파일을 선택할 수 있는 버튼이 생성됩니다.
- POST전송방식으로만 사용가능합니다.
- textarea
- 주의사항: 다른 태그처럼 여는 태그와 닫는 태그 사이에 공백이나 엔터를 입력하면 그내용이 모두 입력되기 때문에 입력하고자 하는 텍스트 내용 이외는 입력하면 안됩니다.
- color
- 색상을 고를 수 있는 팔레트를 제공합니다. [웹 표준을 지원하지 않아서 사용을 하지 않습니다.]
- date
- 날짜를 고를 수 있는 달력을 제공합니다. [웹 표준을 지원하지 않아서 사용을 하지 않습니다.]
[폼태그 활용하기]
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check_id(){
alert('아이디 체크');
//document.getElementById("id").readOnly=true; //읽기 전용
document.getElementById("id").style.display = 'none' //읽기 전용
}
</script>
<style type="text/css">
table {
border: 1px dashed;
}
#mem{
background-color: #d5d9d2;
text-align: center;
text-shadow: navy;
border-bottom: 1px double;
}
#dem {
width: 95%;
}
</style>
</head>
<body>
<h1>FORM TAG</h1>
<form action="" method="GET">
<table border="0" cellspacing="0">
<!-- 1행 -->
<tr>
<td id="mem"><label>이름</label></td>
<td><input type="text" name="name" id="dem"></td>
</tr>
<!-- 2행 -->
<tr>
<td id="mem"><label>아이디</label></td>
<td><input type="text" name="id" id="dem"></td>
<td><input type="button" value="중복확인" onclick="check_id();"></td>
</tr>
<!-- 3행 -->
<tr>
<td id="mem"><label>비밀번호</label></td>
<td><input type="password" name="pwd" id="dem"></td>
</tr>
<!-- 4행 -->
<tr>
<td id="mem"><label>성별</label></td>
<td><input type="radio" name="gender" id="gender" value="남자" checked="checked">남자
<input type="radio" name="gender" id="gender" value="여자">여자</td>
</tr>
<!-- 5행 -->
<tr>
<td id="mem"><label>취미</label></td>
<td><input type="checkbox" name="hobby" id="hobby" value="독서">독서
<input type="checkbox" name="hobby" id="hobby" value="게임">게임
<input type="checkbox" name="hobby" id="hobby" value="음악">음악
<input type="checkbox" name="hobby" id="hobby" value="운동">운동
</td>
</tr>
<!-- 6행 -->
<tr>
<td id="mem"><label>친구1</label></td>
<td><input type="text" name="friend" id="dem"></td>
</tr>
<tr>
<td id="mem"><label>친구2</label></td>
<td ><input type="text" name="friend" id="dem"></td>
</tr>
<tr>
<td id="mem"><label>친구3</label></td>
<td><input type="text" name="friend" id="dem"></td>
</tr>
<tr>
<td id="mem"><label>친구4</label></td>
<td><input type="text" name="friend" id="dem"></td>
</tr>
<!-- 7행 -->
<tr>
<td id="mem"><label>혈액형</label></td>
<td><select name="blood">
<option value="A형">A형</option>
<option value="B형">B형</option>
<option value="O형">O형</option>
<option value="AB형">AB형</option>
</select>
</td>
</tr>
<!-- 8행 -->
<tr>
<td id="mem"><label>첨부파일(사진)</label></td>
<td><input type="file" name="photo"></td>
</tr>
<!-- 9행 -->
<tr>
<td id="mem"><label>색상</label></td>
<td><input type="color" name="my_color" value="색상선택"></td>
</tr>
<!-- 10행 -->
<tr>
<td id="mem"><label>생년월일</label></td>
<td><input type="date" name="birthday" width="95%"></td>
</tr>
<tr>
<td><input type="submit" value="전송">
<input type="reset" value="취소">
</td>
</tr>
</table>
</form>
</body>
</html>
|
cs |
[결과]
'BackEnd > WEB' 카테고리의 다른 글
| JSP_국비_DAY46 (0) | 2022.05.04 |
|---|---|
| 국비_DAY45 (0) | 2022.05.03 |
| 국비_DAY44 (0) | 2022.05.02 |
| CSS_국비_DAY43 (0) | 2022.04.29 |
| HTML_국비_DAY41 (0) | 2022.04.27 |
