lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

webIntroHtmlChapter3Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>HTML 폼 예시</title>
  </head>

  <body>
    
    <form action="서버URL" method="POST">
      
      <label for="username">이름:</label>
      <input type="text" name="username" placeholder="이름을 입력하세요" />
      <br /><br />

      
      <label>취미:</label>
      <input type="checkbox" name="hobby" value="reading" /> 독서
      <input type="checkbox" name="hobby" value="sports" /> 스포츠 <br /><br />

      
      <label>성별:</label>
      <input type="radio" name="gender" value="male" /> 남성
      <input type="radio" name="gender" value="female" /> 여성 <br /><br />

      
      <button type="submit">제출하기</button>
    </form>
    
  </body>
</html>

# 폼(Form) 태그

폼(Form)은 웹 페이지에서 정보를 수집하고, 수집한 정보를 **서버로 전송**합니다.

예를 들어 폼을 활용해 회원가입할 때 이름, 이메일 주소, 비밀번호를 입력받고, 입력 받은 데이터를 서버로 보낼 수 있습니다.

웹 페이지의 폼은 마치 시험지를 작성하는 것과 비슷해요. 시험에서는 여러분이 문제지의 빈칸에 답을 쓰거나, 주어진 선택지에서 하나를 고르죠.

웹 페이지의 폼도 비슷한 원리로 동작해요. 사용자가 텍스트를 입력하거나, 여러 옵션 중 하나를 선택할 수 있어요.

<br />

```html title="폼 기본 구조"
<form action="" method="">
  
  <input type="text" name="username" placeholder="이름을 입력하세요" />
</form>
```

- `action`: 폼 데이터가 전송될 서버의 URL을 의미합니다.

- `method`: 폼 데이터를 서버로 어떻게 보낼지 정합니다. 주로 "GET" 또는 "POST" 방식을 사용하며, "GET" 방식은 URL에 데이터를 붙여서 보내고, "POST" 방식은 데이터를 숨겨진 방식으로 보냅니다.

<br />

## 입력 요소(Input Elements)

폼 내부에는 텍스트, 라디오 버튼, 체크박스 등 다양한 입력 요소가 들어갈 수 있습니다.

마치 시험지를 다양한 문제 유형(객관식, 주관식 등)으로 꾸미는 것과 유사합니다.

<br />

## 텍스트 입력 (Text Input)

텍스트 입력란은 `<input>` 태그로 만들 수 있습니다. 마치 시험지의 주관식 문제를 푸는 것과 비슷합니다.

```html title="텍스트 입력란"
<input type="text" name="username" placeholder="이름을 입력하세요" />
```

- `type`: 입력란의 유형 지정하며, "text"로 일반 텍스트를 의미

- `name`: 데이터를 서버에 보낼 때 사용하는 키값으로, 답안지의 문항 번호처럼 생각할 수 있음

- `placeholder`: 입력란에 아무 것도 입력되지 않았을 때 나타나는 텍스트로, 사용자에게 입력할 내용을 알림

<br />

## 버튼 (Button)

폼 제출 버튼은 `<button>` 태그로 만들 수 있습니다.

```html title="버튼으로 데이터 전송"
<button type="submit">제출하기</button>
```

<br />

## 체크박스 (Checkbox)와 라디오 버튼 (Radio Button)

체크박스는 `<input type="checkbox">`로, 라디오 버튼은 `<input type="radio">`로 만들 수 있습니다.

체크박스는 시험지의 ‘해당하는 것을 모두 고르시오’와 같이 복수의 응답을 할 때, 라디오 버튼은 객관식 문제와 같이 '단일 항목만 선택'할 때 사용합니다.

```html title="체크박스와 라디오 버튼"
<input type="checkbox" name="hobby" value="reading" /> 독서
<input type="radio" name="gender" value="male" /> 남성
```