폼(Form) 태그
폼(Form)은 웹 페이지에서 정보를 수집하고, 수집한 정보를 서버로 전송합니다.
예를 들어 폼을 활용해 회원가입할 때 이름, 이메일 주소, 비밀번호를 입력받고, 입력 받은 데이터를 서버로 보낼 수 있습니다.
웹 페이지의 폼은 마치 시험지를 작성하는 것과 비슷해요. 시험에서는 여러분이 문제지의 빈칸에 답을 쓰거나, 주어진 선택지에서 하나를 고르죠.
웹 페이지의 폼도 비슷한 원리로 동작해요. 사용자가 텍스트를 입력하거나, 여러 옵션 중 하나를 선택할 수 있어요.
<form action="" method="">
<!-- 여기에 사용자 입력을 위한 여러 가지 요소가 들어가요 -->
<input type="text" name="username" placeholder="이름을 입력하세요" />
</form>
-
action: 폼 데이터가 전송될 서버의 URL을 의미합니다.
-
method: 폼 데이터를 서버로 어떻게 보낼지 정합니다. 주로 "GET" 또는 "POST" 방식을 사용하며, "GET" 방식은 URL에 데이터를 붙여서 보내고, "POST" 방식은 데이터를 숨겨진 방식으로 보냅니다.
입력 요소(Input Elements)
폼 내부에는 텍스트, 라디오 버튼, 체크박스 등 다양한 입력 요소가 들어갈 수 있습니다.
마치 시험지를 다양한 문제 유형(객관식, 주관식 등)으로 꾸미는 것과 유사합니다.
텍스트 입력 (Text Input)
텍스트 입력란은 <input> 태그로 만들 수 있습니다. 마치 시험지의 주관식 문제를 푸는 것과 비슷합니다.
<input type="text" name="username" placeholder="이름을 입력하세요" />
-
type: 입력란의 유형 지정하며, "text"로 일반 텍스트를 의미
-
name: 데이터를 서버에 보낼 때 사용하는 키값으로, 답안지의 문항 번호처럼 생각할 수 있음
-
placeholder: 입력란에 아무 것도 입력되지 않았을 때 나타나는 텍스트로, 사용자에게 입력할 내용을 알림
버튼 (Button)
폼 제출 버튼은 <button> 태그로 만들 수 있습니다.
<button type="submit">제출하기</button>
체크박스 (Checkbox)와 라디오 버튼 (Radio Button)
체크박스는 <input type="checkbox">로, 라디오 버튼은 <input type="radio">로 만들 수 있습니다.
체크박스는 시험지의 ‘해당하는 것을 모두 고르시오’와 같이 복수의 응답을 할 때, 라디오 버튼은 객관식 문제와 같이 '단일 항목만 선택'할 때 사용합니다.
<input type="checkbox" name="hobby" value="reading" /> 독서
<input type="radio" name="gender" value="male" /> 남성
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!