HTML 태그 정리7(form(input))

📌 1. <form> 요소란?

<form> 태그는 사용자의 입력 데이터를 서버로 전송하는 역할을 합니다. 다양한 input 요소들과 함께 사용되며, 로그인, 회원가입, 검색, 댓글 입력 등에서 필수적으로 활용됩니다.

<form action="/">
  <!-- 입력 필드들이 여기에 포함됨 -->
</form>

• action 속성: 데이터를 전송할 URL을 지정 (예: /signup → 회원가입 처리 페이지)
• method 속성: GET 또는 POST 방식 선택 (기본값: GET)

---

📌 2. <fieldset> & <legend>: 입력 필드 그룹화

입력 필드를 그룹화할 때 <fieldset>을 사용하고, 제목을 부여하려면 <legend> 태그를 활용합니다.

<fieldset>
  <legend>폼 서식</legend>
  <!-- 여러 개의 입력 필드 포함 -->
</fieldset>

💡 이점: 관련된 입력 필드를 묶어 가독성을 높이고, 접근성을 향상할 수 있음.

---

📌 3. 다양한 <input> 요소 정리 🔍

1️⃣ 일반 텍스트 입력 (한 줄 입력)

<label for="userName">이름</label>
<input type="text" id="userName" placeholder="이름을 입력하세요" />

✅ 사용자 이름, 닉네임 등 일반 텍스트 입력에 활용

---

2️⃣ 비밀번호 입력 (입력값 숨김 처리)

<label for="userPwd">비밀번호</label>
<input type="password" id="userPwd" placeholder="비밀번호를 입력하세요" />

✅ 비밀번호 입력 시 입력값이 보이지 않도록 보호

---

3️⃣ 검색 입력 (검색 전용 필드)

<label for="searchBox">검색</label>
<input type="search" id="searchBox" placeholder="검색어를 입력하세요" />

✅ 일부 브라우저에서 X 버튼 제공 (입력값 삭제 기능)

---

📌 4. <label> 태그를 꼭 사용해야 하는 이유 🏷️

<label> 태그를 사용하면 입력 필드와 텍스트를 연결하여 접근성을 높일 수 있습니다.

<label for="email">이메일</label>
<input type="email" id="email" />

💡 이점:

• 클릭 범위가 넓어져 사용자 경험(UX) 향상
• 스크린 리더가 읽을 수 있어 웹 접근성(Accessibility) 향상

---

📌 5. <input> 요소 확장: 추가 속성 활용하기 🚀

속성	설명
placeholder	입력 필드에 힌트 텍스트 제공
required	필수 입력 필드 설정 (빈 값 제출 방지)
autocomplete	자동완성 활성화 (on 또는 off)
disabled	입력 비활성화
readonly	읽기 전용으로 설정

💡 예제:

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

✅ required 속성을 추가하면 빈 칸 제출이 불가능해짐.

---

🎯 결론: HTML <form>을 제대로 활용하자

• <form> 태그는 사용자 입력을 받기 위한 필수 요소
• <fieldset>과 <legend>를 사용하면 구조를 명확하게 정리 가능
• <label>을 적극 활용하면 접근성과 UX 향상
• <input>의 다양한 속성을 활용해 사용자 경험을 개선할 수 있음