[4강] 사용자 소통의 창구! Form 태그와 입력 양식

[4강] 사용자 소통의 창구! Form 태그와 입력 양식

"유저의 데이터를 수집하고 소통하는 방법을 배워봅시다."

안녕하세요! 지난 시간까지는 정보를 보여주는 방법을 배웠다면, 오늘은 사용자의 정보를 입력받는 'Form(폼)'에 대해 알아보겠습니다. 회원가입, 로그인, 설문조사 등이 모두 이 기능을 통해 이루어집니다.

1. Form 태그의 역할과 속성

데이터를 서버로 보내기 위한 바구니 역할을 합니다. 가장 중요한 두 가지 속성이 있습니다.

✅ action: 데이터를 전달받을 서버의 주소를 지정합니다.

✅ method: 전달 방식 (GET: 주소창에 노출 / POST: 본문 뒤에 숨겨서 전송)

2. 다양한 입력 양식 (Input Types)

<input> 태그의 type 속성을 바꾸는 것만으로 다양한 모양을 만들 수 있습니다.

• 📝 text / password: 아이디와 비밀번호 입력창
• 🔘 radio / checkbox: 여러 항목 중 하나 또는 여러 개 선택
• 📅 date: 날짜 선택 캘린더 표시
• 🚀 submit: 작성을 마치고 서버로 전송하는 버튼

3. 간단한 문의하기 폼 예제 (실습)

사용자로부터 이름과 메일 수신 동의를 받는 폼 예시입니다. <label> 태그를 사용하면 글자를 클릭해도 입력창이 선택되어 편리합니다.

<form action="/submit-data" method="POST"> <!-- 이름 입력 --> <label for="userName">이름:</label> <input type="text" id="userName" name="name" placeholder="이름을 입력하세요"> <br><br> <!-- 관심 분야 선택 --> <p>관심 분야:</p> <label> <input type="checkbox" name="interest" value="coding"> 코딩 </label> <label> <input type="checkbox" name="interest" value="design"> 디자인 </label> <br><br> <!-- 전송 버튼 --> <input type="submit" value="문의하기"> </form>

상호작용의 핵심, Form!

복잡해 보이지만 type과 name 속성만 잘 기억하면 어떤 입력창도 만들 수 있습니다.

드디어 마지막! 다음 5강에서는 지금까지 배운 내용을 총동원해 '나만의 포트폴리오'를 완성해 볼게요!