Part 5 : 폼 태그 사용법

웹페이지에서 사용자 입력을 받을 때는 <form> 태그를 사용합니다.

이번 포스팅에서는 <form>, <input>, <textarea>, <button>, <label>, <select> 등의 태그를 활용하는 방법을 배워보겠습니다.

 

---

 

1️⃣ 기본 폼 구조 <form>

<form> 태그는 입력 데이터를 서버로 전송하는 역할을 합니다.

<form action="submit.php" method="post">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  <button type="submit">제출</button>
</form>

 

🔹 action: 폼 데이터를 전송할 URL

🔹 method: GET(URL에 데이터 포함) 또는 POST(보안 강화)

 

---

 

2️⃣ <input> 태그 (사용자 입력 필드)

사용자로부터 데이터를 입력받는 다양한 방법을 제공합니다.

<input type="text" placeholder="이름 입력">
<input type="password" placeholder="비밀번호 입력">
<input type="email" placeholder="이메일 입력">
<input type="checkbox"> 동의합니다.
<input type="radio" name="gender" value="male"> 남자
<input type="radio" name="gender" value="female"> 여자

🔹 type="text" 일반 텍스트 입력

🔹 type="password" 비밀번호 입력 (숨김 처리)

🔹 type="email" 이메일 형식 입력

🔹 type="checkbox" 체크박스 선택

🔹 type="radio" 라디오 버튼 선택 (같은 name 그룹 내에서 하나만 선택 가능)

 

---

 

3️⃣ <textarea> 태그 (여러 줄 입력)

여러 줄 입력이 필요한 경우 사용됩니다.

<textarea rows="4" cols="50">여기에 여러 줄을 입력하세요.</textarea>

 

🔹 rows: 행(줄) 개수, cols: 열(가로 길이)

 

---

 

4️⃣ <select> 태그 (드롭다운 선택)

사용자가 선택할 수 있는 목록을 제공합니다.

<select>
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="grape">포도</option>
</select>

 

🔹 <option> 태그를 사용하여 선택 항목을 정의합니다.

 

---

 

5️⃣ <button> 태그 (버튼)

폼을 제출하거나 특정 동작을 수행할 수 있습니다.

<button type="submit">제출</button>
<button type="reset">초기화</button>
<button type="button" onclick="alert('클릭!')">클릭하세요</button>

 

🔹 type="submit" 폼 제출 버튼

🔹 type="reset" 입력값 초기화 버튼

🔹 type="button" 단순한 버튼

 

---

 

🎯 마무리

이제 HTML의 폼 태그를 활용하여 사용자 입력을 받을 수 있습니다!

🚀 다음 포스팅에서는 링크 및 미디어 태그에 대해 다뤄보겠습니다. 😊

 

 

 

- Dblisher -