HTML 기본 강의: 폼(Form) 요소와 입력 필드 사용법

웹 페이지에서 사용자가 데이터를 입력할 수 있도록 하는 방법은 바로 **폼(form)**을 사용하는 것입니다.
이번 글에서는 HTML에서 폼을 만드는 방법과 다양한 입력 필드를 사용하는 방법에 대해 알아보겠습니다.

 

목차

• 1. <form> 태그란?
• 2. <form> 태그 기본 사용법
• 3. 폼 입력 필드 종류
• 4. <form> 태그의 속성
• 5. 결론

1. <form> 태그란?

<form> 태그는 사용자가 **서버로 데이터를 제출**할 수 있도록 하는 폼을 만드는 데 사용됩니다. 이 태그는 **입력 필드, 라벨, 버튼** 등을 포함하여 사용자의 정보를 받습니다. 웹 페이지에서 **회원 가입**, **로그인**, **검색** 등 다양한 기능을 폼을 통해 구현할 수 있습니다.

2. <form> 태그 기본 사용법

<form> 태그의 기본 구조는 다음과 같습니다:

<form action="submit.php" method="post">
  <label for="username">사용자 이름</label>
  <input type="text" id="username" name="username"><br>
  <label for="password">비밀번호</label>
  <input type="password" id="password" name="password"><br>
  <button type="submit">제출</button>
</form>

위 코드는 **사용자 이름**과 **비밀번호**를 입력받고, **제출** 버튼을 눌러 데이터를 **submit.php**로 전송하는 폼입니다. action 속성은 데이터를 제출할 URL을, method 속성은 데이터를 **GET** 또는 **POST** 방식으로 제출할지 설정합니다.

3. 폼 입력 필드 종류

<form> 안에 포함될 수 있는 여러 가지 **입력 필드**가 있습니다. 각 입력 필드는 사용자가 입력할 수 있는 데이터를 받기 위한 것입니다.

• <input>: 다양한 종류의 입력 필드를 생성합니다. 예를 들어, 텍스트 입력, 이메일 입력, 비밀번호 입력 등.
• <textarea>: 여러 줄의 텍스트를 입력받을 때 사용합니다. 주로 **댓글**이나 **설명**을 입력할 때 사용됩니다.
• <select>: 드롭다운 목록을 만들어 선택할 수 있도록 합니다.
• <button>: 폼을 제출하는 버튼을 생성합니다.

4. <form> 태그의 속성

<form> 태그에는 여러 가지 속성이 있습니다. 주요 속성은 다음과 같습니다:

• action: 폼 데이터를 제출할 URL을 지정합니다. 데이터를 처리할 서버 측 페이지를 입력합니다.
• method: 폼 데이터를 제출하는 방식을 설정합니다. **GET**과 **POST** 방식이 있습니다.
• target: 폼 데이터를 전송한 후, 결과가 표시될 창을 설정합니다. 예를 들어, **새 창**에서 결과를 보여주고 싶다면 `_blank`를 설정할 수 있습니다.

5. 결론

<form> 태그는 웹 페이지에서 **사용자 입력을 받기** 위한 가장 중요한 태그입니다. 다양한 **입력 필드**와 **속성**을 활용하여 웹 사이트에서 유용한 폼을 만들 수 있습니다. 폼을 잘 활용하면, **회원 가입**, **검색**, **설문 조사** 등 여러 사용자 상호작용을 처리할 수 있습니다.

이번 글에서는 HTML 폼을 사용하여 **사용자 데이터를 입력받고 제출하는 방법**과, 주요 입력 필드와 폼 속성에 대해 배웠습니다. 이를 통해 다양한 **폼을 효율적으로 구현**할 수 있습니다.

© 2025 busyforu. All rights reserved.