[HTML] form 태그 설명 및 예제

728x90

목 차

• 1. <form> 태그 기본 구조
• 2. <form> 태그의 주요 속성
• 2-1. action
• 2-2. method
• 2-3. enctype
• 2-4. target
• 2-5. novalidate
• 3. 폼 요소의 구성
• 3-1. 입력 필드
• 3-2. 버튼
• 3-3. 드롭다운 메뉴
• 3-4. 텍스트 영역
• 4. 폼 데이터의 전송 흐름
• 5. 폼 검증
• 5-1. 기본 HTML5 검증
• 5-2. 자바스크립트 커스텀 검증
• 6. 고급 활용
• 6-1. AJAX로 폼 데이터 전송
• 6-2. multipart/form-data로 파일 업로드

반응형

 

1. <form> 태그 기본 구조

<form action="submission_url" method="POST">
  <!-- 입력 필드 -->
  <input type="text" name="username" placeholder="Enter your name">
  <input type="password" name="password" placeholder="Enter your password">
  
  <!-- 제출 버튼 -->
  <button type="submit">Submit</button>
</form>

 

2. <form> 태그의 주요 속성

2-1. action

• 폼 데이터를 전송할 서버의 URL을 지정합니다.
• 기본값: 현재 페이지 URL

<form action="https://example.com/submit">
  ...
</form>

 

2-2. method

• 데이터를 전송하는 HTTP 메서드를 지정합니다.
• GET: URL 쿼리 문자열로 데이터를 전송. 일반적으로 데이터 조회에 사용.
• POST: 요청 본문(body)으로 데이터를 전송. 보안이 필요한 경우나 데이터 추가/변경에 사용.
• 기본값: GET

<form action="/submit" method="POST">
  ...
</form>

 

2-3. enctype

• 데이터 인코딩 방식(폼 데이터를 전송하는 방법)을 지정합니다.
• 일반적으로 파일 업로드를 처리할 때 사용.
• application/x-www-form-urlencoded (기본값)
• multipart/form-data (파일 업로드 시)
• text/plain

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">Upload</button>
</form>

 

2-4. target

• 폼 데이터를 어디에서 열지 지정합니다.
• _self (기본값): 현재 창.
• _blank: 새 창 또는 새 탭.
• _parent: 부모 프레임.
• _top: 최상위 창.

<form action="/submit" target="_blank">
  ...
</form>

 

2-5. novalidate

• HTML5 기본 폼 검증을 비활성화합니다.
• 기본적으로 폼은 제출 전에 브라우저 수준에서 검증이 수행됩니다.

<form action="/submit" novalidate>
  ...
</form>

 

3. 폼 요소의 구성

3-1. 입력 필드

• <input> 태그로 다양한 종류의 입력을 받을 수 있습니다.

<input type="text" name="username" placeholder="Enter your name"> <!-- 텍스트 필드 -->
<input type="password" name="password" placeholder="Enter your password"> <!-- 비밀번호 -->
<input type="email" name="email" placeholder="Enter your email"> <!-- 이메일 -->
<input type="number" name="age" placeholder="Enter your age"> <!-- 숫자 -->
<input type="checkbox" name="subscribe" value="yes"> Subscribe <!-- 체크박스 -->
<input type="radio" name="gender" value="male"> Male <!-- 라디오 버튼 -->
<input type="file" name="file"> <!-- 파일 업로드 -->

 

3-2. 버튼

• 폼 데이터를 제출하거나 취소하기 위한 버튼.

<button type="submit">Submit</button> <!-- 폼 제출 -->
<button type="reset">Reset</button> <!-- 폼 초기화 -->
<button type="button" onclick="alert('Clicked!')">Click Me</button> <!-- 단순 버튼 -->

 

3-3. 드롭다운 메뉴

<select name="options">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

 

3-4. 텍스트 영역

• 여러 줄의 텍스트 입력을 받을 때 사용.

<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>

 

4. 폼 데이터의 전송 흐름

1. 사용자가 폼을 작성하고 제출 버튼을 클릭.
2. action URL로 데이터가 전송됨.
3. method에 따라 데이터가 GET 또는 POST 방식으로 서버에 전달.

 

5. 폼 검증

5-1. 기본 HTML5 검증

• required: 필수 입력 필드.
• min, max: 숫자나 날짜 범위 제한.
• pattern: 정규식을 통한 입력 패턴 검증.
• maxlength, minlength: 입력 길이 제한.

<form action="/submit">
  <input type="text" name="username" required minlength="3" maxlength="10">
  <input type="email" name="email" required>
  <button type="submit">Submit</button>
</form>

 

5-2. 자바스크립트 커스텀 검증

• 기본 검증 외에 추가적인 검증 로직을 추가할 수 있습니다.

<form onsubmit="return validateForm()">
  <input type="text" id="username" name="username">
  <button type="submit">Submit</button>
</form>
<script>
  function validateForm() {
    const username = document.getElementById('username').value;
    if (username === '') {
      alert('Username is required');
      return false; // 제출 중단
    }
    return true; // 제출 진행
  }
</script>

 

6. 고급 활용

6-1. AJAX로 폼 데이터 전송

• JavaScript의 Fetch API를 사용하면 폼 데이터를 새로고침 없이 서버로 전송할 수 있습니다.

<form id="myForm">
  <input type="text" name="username" required>
  <button type="submit">Submit</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 기본 동작 중단
    const formData = new FormData(this);
    fetch('/submit', {
      method: 'POST',
      body: formData
    }).then(response => response.text())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
  });
</script>

 

6-2. multipart/form-data로 파일 업로드

<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">Upload</button>
</form>