2-10. HTML의 기본 태그_form 태크

1. input 태그

1️⃣ input 태그란?

1) 개념

2) 기본 형태

<input type="text" name="username">

2️⃣ input 태그의 주요 type 종류

1) 텍스트 입력

<input type="text" placeholder="이름 입력">

2) 선택 관련

<input type="checkbox"> 동의
<input type="radio" name="gender"> 남
<input type="radio" name="gender"> 여

3) 버튼

<input type="submit" value="전송">
<input type="reset" value="초기화">
<input type="button" value="버튼">

4) 기타

<input type="file">
<input type="date">
<input type="color">

3️⃣ input 태그의 핵심 속성

<input
	type="text"
	name="id"
	placeholder="아이디"
	required
	maxlength="12">

4️⃣ 실습

1) input:text

<input type="text" name="fullname" value="홍길동" /><br />

2) input:password

<input type="password" name="pw" value="1234" /><br />

3) input:email

<input type="email" name="email" value="ssar@nate.com" /><br />

4) input:checkbox

<input type="checkbox" name="ch1" value="1" />
<input type="checkbox" name="ch2" />

5) input:date

<input type="date" name="birthday" />

6) select

<select name="payday">
  <option value="10">매월 10일</option>
  <option value="15">매월 15일</option>
  <option value="20">매월 20일</option>
</select>

7) input:button

<input type="submit" value="전송" />

8) input 태그 전체 코드

    <form>
      <input type="text" name="fullname" value="홍길동" /><br />
      <input type="password" name="pw" value="1234" /><br />
      <input type="email" name="email" value="ssar@nate.com" /><br />
      <input type="checkbox" name="ch1" value="1" />
      <input type="checkbox" name="ch2" /><br />
      <input type="date" name="birthday" /><br />
      <select name="payday">
        <option value="10">매월 10일</option>
        <option value="15">매월 15일</option>
        <option value="20">매월 20일</option>
      </select>
      <input type="submit" value="전송" />
    </form>

2. form 태그

1️⃣ form 태그란?

1) 개념

2) 기본 구조

<form action="/submit" method="post">
<!-- 입력 요소들 -->
</form>

2️⃣ form 태그의 주요 속성

3️⃣ method 차이

1) GET

• URL에 데이터가 노출됨

• 검색, 조회에 적합 (select 요청)

• 예: /search?q=apple

2) POST

• 데이터가 숨겨져 전송됨

• 로그인, 회원가입에 적합 (update 요청(insert, delete, update))

• 보안 & 대용량 데이터 가능

4️⃣ 실습

1) method = “get”

    <form action="http://localhost:5500/ex04/6.html" method="get">
      <input type="text" name="fullname" value="홍길동" /><br />
      <input type="password" name="pw" value="1234" /><br />
      <input type="email" name="email" value="ssar@nate.com" /><br />
      <input type="checkbox" name="ch1" value="1" />
      <input type="checkbox" name="ch2" /><br />
      <input type="date" name="birthday" /><br />
      <select name="payday">
        <option value="10">매월 10일</option>
        <option value="15">매월 15일</option>
        <option value="20">매월 20일</option>
      </select>
      <input type="submit" value="전송" />
    </form>

주소
http://localhost:5500/ex04/6.html
?fullname=%ED%99%8D%EA%B8%B8%EB%8F%99
&pw=1234
&email=ssar%40nate.com
&ch1=1&ch2=on
&birthday=2026-01-05
&payday=10

💡 쿼리 스트링(Query String)

URL?key=value&key=value

/search?keyword=apple&page=2

• keyword = apple

• page = 2

<form action="/search" method="get">
  <input type="text" name="q">
  <input type="number" name="page">
  <input type="submit">
</form>

• q → banana

• page → 3

/search?q=banana&page=3

?name=kim&age=20&city=seoul

<input type="text" name="username">

?username=kim

<input type="text">

/search?keyword=%EA%B9%80%EC%B2%A0%EC%88%98

<input type="checkbox" name="food" value="pizza">
<input type="checkbox" name="food" value="chicken">

?food=pizza&food=chicken

• URL만으로 요청 재현 가능

• 북마크, 공유 가능

• 검색, 필터링에 적합

• URL에 데이터 노출 (보안 취약)

• 길이 제한 있음

• 민감한 정보에 부적합

2) method = “post”

    <form action="http://localhost:5500/ex04/6.html" method="post">
      <input type="text" name="fullname" value="홍길동" /><br />
      <input type="password" name="pw" value="1234" /><br />
      <input type="email" name="email" value="ssar@nate.com" /><br />
      <input type="checkbox" name="ch1" value="1" />
      <input type="checkbox" name="ch2" /><br />
      <input type="date" name="birthday" /><br />
      <select name="payday">
        <option value="10">매월 10일</option>
        <option value="15">매월 15일</option>
        <option value="20">매월 20일</option>
      </select>
      <input type="submit" value="전송" />
    </form>

💡 숨겨진 정보 보는 법

3. 소켓 서버에 전송해서 리얼 데이터보기

1️⃣ JAVA 코드

package com.mtcoding;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.ServerSocket;
import java.net.Socket;
import java.nio.charset.StandardCharsets;

public class MyHttpServer {
    public static void main(String[] args) {
        try {
            ServerSocket ss = new ServerSocket(20000);
            Socket socket = ss.accept();

            InputStream in = socket.getInputStream();
            InputStreamReader ir = new InputStreamReader(in, StandardCharsets.UTF_8);
            BufferedReader br = new BufferedReader(ir);

            String line;
            int contentLength = 0;

            // 1) 헤더는 readLine()으로 읽는다 (빈 줄 나오면 헤더 끝)
            while ((line = br.readLine()) != null) {
                System.out.println("[server] " + line);

                if (line.toLowerCase().startsWith("content-length:")) {
                    contentLength = Integer.parseInt(line.split(":")[1].trim());
                }

                if (line.isEmpty()) break; // 헤더 끝
            }

            // 2) 바디는 read()로 contentLength 만큼 읽는다 (이게 핵심!)
            char[] body = new char[contentLength];
            int readTotal = 0;
            while (readTotal < contentLength) {
                int r = br.read(body, readTotal, contentLength - readTotal);
                if (r == -1) break;
                readTotal += r;
            }

            System.out.println("[server] ===== BODY =====");
            System.out.println(new String(body, 0, readTotal));
            System.out.println("[server] ==============");

        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

2️⃣ Get 데이터

[server] GET /?fullname=kildong&pw=1234&email=ssar%40nate.com&ch1=1&ch2=on&birthday=2026-01-05&payday=10 HTTP/1.1
[server] Host: localhost:20000
[server] Connection: keep-alive
[server] sec-ch-ua: "Google Chrome";v="143", "Chromium";v="143", "Not A(Brand";v="24"
[server] sec-ch-ua-mobile: ?0
[server] sec-ch-ua-platform: "Windows"
[server] Upgrade-Insecure-Requests: 1
[server] User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
[server] Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
[server] Sec-Fetch-Site: cross-site
[server] Sec-Fetch-Mode: navigate
[server] Sec-Fetch-User: ?1
[server] Sec-Fetch-Dest: document
[server] Referer: http://127.0.0.1:5500/
[server] Accept-Encoding: gzip, deflate, br, zstd
[server] Accept-Language: ko,en;q=0.9
[server] 

3️⃣ Post 데이터

1) Content-Type: application/x-www-form-urlencoded

[server] POST / HTTP/1.1
[server] Host: localhost:20000
[server] Connection: keep-alive
[server] Content-Length: 89
[server] Cache-Control: max-age=0
[server] sec-ch-ua: "Google Chrome";v="143", "Chromium";v="143", "Not A(Brand";v="24"
[server] sec-ch-ua-mobile: ?0
[server] sec-ch-ua-platform: "Windows"
[server] Origin: http://127.0.0.1:5500
[server] Content-Type: application/x-www-form-urlencoded
[server] Upgrade-Insecure-Requests: 1
[server] User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
[server] Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
[server] Sec-Fetch-Site: cross-site
[server] Sec-Fetch-Mode: navigate
[server] Sec-Fetch-User: ?1
[server] Sec-Fetch-Dest: document
[server] Referer: http://127.0.0.1:5500/
[server] Accept-Encoding: gzip, deflate, br, zstd
[server] Accept-Language: ko,en;q=0.9
[server] 
fullname=kildong&pw=1234&email=ssar%40nate.com&ch1=1&ch2=on&birthday=2026-01-05&payday=10

⚠️ 확인해야 할 내용

• POST 인지? GET 인지?

• Content-Length

• Content-Type (MIME타입)

• BODY 내용 (Content-Length와 Content-Type을 알아야 파싱 가능)

2) JSON

3) TEXT

4) HTML

5) IMAGE

4. MIME 타입

1️⃣ MIME 타입이란?

“이건 HTML이야”, “이건 JSON이야”, “이건 이미지야”

를 컴퓨터끼리 약속한 표기법이야.

2️⃣ MIME 타입의 기본 구조

1) 기본 구조

type/subtype

2) 예시

3️⃣ MIME 타입은 어디서 쓰일까?

1) HTTP 응답 헤더

Content-Type: text/html

“아, 이건 HTML이니까 렌더링해야겠다”

2) form 전송

<form method="post" enctype="multipart/form-data">

“파일 포함된 데이터구나”

3) API 통신

Content-Type: application/json

“JSON으로 파싱하면 되는구나”

4️⃣ 자주 쓰는 MIME 타입 정리 ⭐

1) 텍스트 계열

2) 애플리케이션 계열

3) 이미지 계열

4) 미디어 계열

5️⃣ Content-Type과의 관계 (매우 중요)

1) 서버 → 클라이언트

Content-Type: application/json

2) 클라이언트 → 서버

Content-Type: application/x-www-form-urlencoded

Content-Type: multipart/form-data

6️⃣ form에서 쓰이는 MIME 타입

1) 기본값

<form method="post">

application/x-www-form-urlencoded

id=kim&pw=1234

2) 파일 포함

<form method="post" enctype="multipart/form-data">

7️⃣ MIME 타입이 중요한 이유

1) ❌ 잘못된 MIME 타입

Content-Type: text/plain

2) ✅ 올바른 MIME 타입

Content-Type: application/json

8️⃣ 확장자 ≠ MIME 타입 (중요!)