1.1 <form> 요소
폼은 사용자가 웹사이트와 상호작용하는 중요한 부분이야. 폼을 통해 사용자는 데이터를 입력할 수 있고, 이 데이터는 서버로 전송되어 처리돼. HTML에서는 폼을 생성하기 위해 <form> 요소를 사용해.
<form> 태그는 웹 페이지에서 폼을 생성하는 데 사용돼. 이 태그는 텍스트 필드, 버튼, 체크박스 등 다양한 폼 요소를 담는 컨테이너 역할을 해. 사용자가 입력한 모든 데이터는 서버로 전송되어 처리될 수 있어.
사용 예:
<form action="/submit" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<br>
<button id="submit" type="submit">제출</button>
</form>
<script>
const userName = document.getElementById("username");
const userEmail = document.getElementById("email");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && userEmail.validity.valid) {
e.preventDefault();
alert(`당신의 이름: ${userName.value}\n` + `당신의 이메일: ${userEmail.value}`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">제출</button>
</form>
<form> 태그의 속성
action 속성은 폼 데이터를 제출 버튼을 누른 후 전송할 URL을 지정해. 만약 action 속성이 지정되지 않으면, 폼 데이터는 현재 URL로 전송돼.
action 속성 사용 예:
<form action="https://example.com/submit">
<!-- 폼 요소 -->
</form>
method 속성은 폼 데이터를 전송하기 위해 사용할 HTTP 방식을 지정해. 사용할 수 있는 값은 GET과 POST가 있어.
- GET: 폼 데이터가 URL 요청의 매개변수로 포함돼. 이 방식은 작은 양의 데이터를 전송할 때 적합하며, 민감한 정보를 전송할 때는 사용하면 안 돼.
- POST: 폼 데이터가 HTTP 요청 본문에 전송돼. 이 방식은 큰 양의 데이터를 전송할 때, 그리고 민감한 정보를 전송할 때 적합해.
method 속성 사용 예:
<form action="/submit" method="post">
<!-- 폼 요소 -->
</form>
1.2 데이터 전송 방식
GET 방식
GET 방식은 폼 데이터를 URL 매개변수 형태로 전송해. 이 방식은 method 속성이 지정되지 않은 경우 기본값으로 사용돼.
GET 방식 사용 예:
<form action="/search" method="get">
<label for="query">검색:</label>
<input type="text" id="query" name="query" required>
<button id="submit" type="submit">검색</button>
</form>
<script>
const searchField = document.getElementById("query");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (searchField.validity.valid) {
e.preventDefault();
alert(`검색한 내용: ${searchField.value}`);
}
});
</script>
<form action="/search" method="get">
<label for="query">검색:</label>
<input type="text" id="query" name="query">
<button type="submit">검색</button>
</form>
GET 방식의 특징
- 폼 데이터가 URL에 표시되므로 민감한 정보를 전송하기에는 적합하지 않아
- URL 길이에 제한이 있어서 데이터 양에 제한이 있어
- 데이터가 캐시에 쉽게 저장될 수 있으며, 브라우저에서 북마크로 저장 가능해
POST 방식
POST 방식은 폼 데이터를 HTTP 요청 본문에 전송해. 이 방식은 큰 양의 데이터와 민감한 정보를 전송할 때 사용돼.
POST 방식 사용 예:
<form action="/submit" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">제출</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert(`환영합니다, ${userName.value}!`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">제출</button>
</form>
POST 방식의 특징
- 폼 데이터가 URL에 표시되지 않으므로 민감한 정보를 전송하기에 적합해
- 요청 본문에 데이터를 전송하므로 데이터 양에 제한이 없어
- 데이터가 캐시에 저장되거나 브라우저에서 북마크로 저장되지 않아
1.3 추가 속성
enctype 속성
enctype 속성은 POST 방식으로 데이터를 전송할 때 데이터를 인코딩하는 방법을 지정해. 가장 일반적으로 사용하는 값은 multipart/form-data이며, 이는 파일 업로드 시에 필요해.
enctype 속성 사용 예:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">파일 업로드:</label>
<input type="file" id="file" name="file">
<button type="submit">제출</button>
</form>
target 속성
target 속성은 폼 제출 후 서버 응답을 표시할 위치를 지정해. 가능한 값은:
_self(기본값): 같은 창 또는 탭에서_blank: 새 창 또는 탭에서_parent: 부모 프레임에서_top: 최상위 프레임에서 (프레임 사용 시)
target 속성 사용 예:
<form action="/submit" method="post" target="_blank">
<!-- 폼 요소 -->
</form>
novalidate 속성
novalidate 속성은 브라우저의 폼 유효성 검사를 비활성화해.
novalidate 속성 사용 예:
<form action="/submit" method="post" novalidate>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<button type="submit">제출</button>
</form>
1.4 데이터 전송 방법
폼 데이터 전송은 <input type="submit"> 또는 <button type="submit"> 전송 버튼을 사용해. 사용자가 이 버튼을 클릭하면 브라우저는 지정된 방법과 URL로 폼 데이터를 서버로 전송해.
폼 데이터 전송의 주요 방법은:
1. 전송 버튼: 이 방법이 가장 일반적인 폼 데이터 전송 방식이야. 전송 버튼은 <input>나 <button> 요소로 생성할 수 있어.
<input> 사용 예:
<input type="submit" value="Submit">
<button> 사용 예:
<button type="submit">Submit</button>
2. Enter 키: 폼의 텍스트 필드에서 Enter 키를 누르면 폼이 제출될 수도 있어.
3. JavaScript: JavaScript를 사용하여 프로그래밍 방식으로 폼을 제출할 수 있어. 이는 데이터를 제출하기 전에 추가 검증이나 다른 작업이 필요할 때 유용해.
JavaScript를 사용한 폼 제출 예:
<form id="myForm" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">Submit</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert("인증에 성공했습니다!\n" + "\n" + `환영합니다, ${userName.value}!`);
}
});
</script>
<form id="myForm" action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<button type="button" onclick="submitForm()">Submit</button>
</form>
function submitForm() {
document.getElementById('myForm').submit();
}
GO TO FULL VERSION