HTML 폼과 자바스크립트: 기본 form 태그 사용법
웹 개발에서 폼은 사용자와 상호 작용하는 중요한 요소입니다. 사용자가 입력한 데이터를 수집하고 서버에 전송하는 기능을 담당합니다. 이 글에서는 HTML 폼의 기본 사용법과 자바스크립트를 이용한 폼 조작 방법에 대해서 알아보겠습니다.
1. HTML 폼 태그
HTML에서 폼은 <form> 태그를 사용하여 생성합니다. <form> 태그는 다양한 입력 요소를 포함하며 이를 통해 사용자로부터 정보를 수집합니다.
1. <form> 태그 속성
속성 | 설명 |
---|---|
action | 폼 데이터를 처리할 서버의 URL을 지정합니다. |
method | 폼 데이터를 전송할 때 사용할 HTTP 메서드를 지정합니다. 주로 “GET” 또는 “POST”를 사용합니다. |
enctype | 폼 데이터를 인코딩하는 방식을 지정합니다. 기본 값은 “application/x-www-form-urlencoded”이며, 파일 업로드를 위해 “multipart/form-data”를 사용합니다. |
2. 예시
<form action="/submit" method="post">
<!-- 폼 요소들 -->
</form>
2. 폼 요소
폼 내부에는 다양한 입력 요소가 들어갈 수 있습니다.
1. 주요 입력 요소
태그 | 설명 |
---|---|
<input> | 다양한 유형의 입력을 받기 위한 요소입니다. type 속성을 이용하여 입력 유형을 지정할 수 있습니다. |
<textarea> | 여러 줄의 텍스트를 입력할 수 있는 영역을 생성합니다. |
<select> | 드롭다운 목록을 생성하며, <option> 태그를 이용하여 선택 항목을 지정합니다. |
<button> | 버튼을 생성하며, 클릭 이벤트를 처리하는 데 사용됩니다. |
2. 예시
<form action="/submit" method="post">
<input type="text" name="username" placeholder="이름을 입력하세요">
<textarea name="message" placeholder="메시지를 입력하세요"></textarea>
<select name="gender">
<option value="male">남성</option>
<option value="female">여성</option>
</select>
<button type="submit">전송</button>
</form>
3. 자바스크립트를 이용한 폼 조작
폼을 조작하기 위해 자바스크립트를 사용할 수 있습니다. 폼 요소에 접근하고 값을 읽거나 변경하는 방법은 다음과 같습니다.
메서드/속성 | 설명 |
---|---|
getElementById, querySelector | 폼 요소에 접근하기 위한 메서드입니다. |
value | 폼 요소의 값을 가져오거나 설정하는 속성입니다. |
1. 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>HTML 폼과 자바스크립트: 기본 form 태그 사용법</title>
<style>
div {margin: 20px;}
</style>
</head>
<body>
<form action="/submit" method="post">
<div>
<input type="text" id="username" name="username" placeholder="이름을 입력하세요">
</div>
<div>
<textarea id="message" name="message" cols="50" rows="5" placeholder="메시지를 입력하세요"></textarea>
</div>
<div>
<select id="gender" name="gender">
<option value="male">남성</option>
<option value="female">여성</option>
</select>
</div>
<div>
<button type="submit">전송</button>
</div>
</form>
<script>
window.onload = function() {
let username = document.getElementById("username");
let message = document.getElementById("message");
let gender = document.getElementById("gender");
// 폼 요소 값 변경
username.value = "BlueShare";
message.value = "BlueShare 블로그에 방문해 주셔서 감사합니다.";
gender.value = "male";
}
</script>
</body>
</html>
2. 실행 결과 화면

☞ 다음 글에서는 다양한 입력 요소들을 조작하는 방법에 대해 더 자세히 알아보겠습니다.
관련 이전 게시물
- [HTML] 폼(form) 태그 사용하기 그리고 티스토리
- [HTML] input 태그 type 종류 및 속성 정리, 샘플 예제
- [HTML] textarea 태그 – 여러 줄의 문자열 받기
- [HTML] select, option, optgroup 태그 – 콤보(셀렉트) 박스
- [HTML] 버튼 만들기 – button 태그, input 태그
- [HTML] fieldset, legend 태그 – 폼 요소 그룹으로 묶기
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!