폼(Form) 태그

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

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

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

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

Copy
<form action="" method="">
  <!-- 여기에 사용자 입력을 위한 여러 가지 요소가 들어가요 -->
  <input type="text" name="username" placeholder="이름을 입력하세요" />
</form>

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

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

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

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

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

Copy
<input type="text" name="username" placeholder="이름을 입력하세요" />

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

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

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

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

Copy
<button type="submit">제출하기</button>

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

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

Copy
<input type="checkbox" name="hobby" value="reading" /> 독서
<input type="radio" name="gender" value="male" /> 남성