HTML 폼과 자바스크립트: 기본 form 태그 사용법

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. 실행 결과 화면

자바스크립트를 이용한 폼 조작 예제 실행 결과 화면입니다.


☞ 다음 글에서는 다양한 입력 요소들을 조작하는 방법에 대해 더 자세히 알아보겠습니다.

관련 이전 게시물

  1. [HTML] 폼(form) 태그 사용하기 그리고 티스토리
  2. [HTML] input 태그 type 종류 및 속성 정리, 샘플 예제
  3. [HTML] textarea 태그 – 여러 줄의 문자열 받기
  4. [HTML] select, option, optgroup 태그 – 콤보(셀렉트) 박스
  5. [HTML] 버튼 만들기 – button 태그, input 태그
  6. [HTML] fieldset, legend 태그 – 폼 요소 그룹으로 묶기


이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!

위로 스크롤