[새싹x코딩온] HTML 기본 개념 3부 – 사용자 입력을 위한 Form 태그 완벽 정리!

🎨 HTML 기본 개념 3부 – 사용자 입력을 위한 Form 태그 완벽 정리!

웹사이트에서 회원가입, 로그인, 검색, 댓글 작성 등을 할 때 사용자의 입력을 받는 요소가 필요합니다. 이를 가능하게 하는 것이 바로 HTML Form 태그입니다.

이번 HTML 3부에서는 <form>, <input>, <select> 등 다양한 입력 태그와 그 사용법을 예제와 함께 쉽게 설명해드릴게요! 🚀

 

---

📌 1. <form> 태그란?

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

✅ 기본 문법

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

 

✅ 속성 설명

• action="submit.php" → 입력 데이터를 보낼 서버 주소
• method="POST" → 데이터를 전송하는 방식 (GET, POST 사용 가능)

---

📌 2. 입력값을 받는 <input> 태그

<input> 태그는 사용자가 정보를 입력할 수 있도록 도와주는 요소입니다.
type 속성 값을 변경하면 다양한 입력 필드를 만들 수 있습니다.

✅ 텍스트 입력 (<input type="text">)

<label for="name">이름:</label>
<input type="text" id="name" name="username">

 

➡️ 사용자가 텍스트를 입력할 수 있는 필드입니다.

---

✅ 비밀번호 입력 (<input type="password">)

<label for="password">비밀번호:</label>
<input type="password" id="password" name="userpassword">

➡️ 입력한 비밀번호가 점(•) 또는 별(*)로 가려짐.

---

✅ 버튼 (<input type="button">)

<input type="button" value="클릭하세요" onclick="alert('버튼 클릭!')">

➡️ 클릭하면 자바스크립트 이벤트 실행 가능.

---

✅ 체크박스 (<input type="checkbox">)

<label><input type="checkbox" name="subscribe" value="yes"> 뉴스레터 구독</label>

➡️ 여러 개의 항목을 선택할 수 있음.

 

⭐️ 체크박스 속성

• Name: 체크박스의 이름, 같은 분류의 체크박스는 같은 이름으로 설정
• Checked: 화면 최초 로딩 시에 선택 된 상태로 로딩 

---

✅ 라디오 버튼 (<input type="radio">)

<label><input type="radio" name="gender" value="male"> 남성</label>
<label><input type="radio" name="gender" value="female"> 여성</label>

➡️ 같은 name 속성을 가지면 하나의 옵션만 선택 가능.

 

⭐️ 라디오버튼 속성

• Name: 라디오 버튼의 이름 같은 name 을 가지는 라디오 버튼은 하나만 선택이 가 →하나를 선택하면 다른 선택 값이 취소 됨
• Checked: 화면 최초 로딩 시에 선택 된 상태로 로딩 

---

✅ 날짜 선택 (<input type="date">)

<label for="birthday">생년월일:</label>
<input type="date" id="birthday" name="birthdate">

➡️ 달력에서 날짜를 선택할 수 있음.

 

⭐️ 날짜선택 속성

• Name : 날짜 선택 폼 이름
• type=“datetime-local” : 시간 까지 선택 가능

---

📌 3. <select> 태그 – 드롭다운 메뉴 만들기

사용자가 여러 개의 옵션 중에서 하나를 선택할 수 있도록 하는 태그입니다.

✅ 기본 사용법

<label for="country">국가 선택:</label>
<select id="country" name="country">
    <option value="kr">대한민국</option>
    <option value="us">미국</option>
    <option value="jp">일본</option>
</select>

➡️ 옵션 중 하나만 선택 가능.

✅ Tip!

• selected 속성을 추가하면 기본 선택 옵션을 지정할 수 있음.

<option value="us" selected>미국</option>

---

📌 4. 제출 버튼 (<input type="submit">)

사용자가 입력한 데이터를 서버로 전송하는 버튼입니다.

<input type="submit" value="제출하기">

➡️ <form> 안에 포함되어 있어야 동작함.

✅ Tip!

• name 속성을 추가하면 버튼 값을 서버로 전송할 수도 있음.

---

📌 5. Form 태그 예제 – 회원가입 폼 만들기

실제 웹사이트에서 사용할 수 있는 회원가입 폼 예제를 만들어 보겠습니다.

<form action="register.php" method="POST">
    <label for="username">이름:</label>
    <input type="text" id="username" name="username" required><br>

    <label for="email">이메일:</label>
    <input type="email" id="email" name="email" required><br>

    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password" required><br>

    <label>성별:</label>
    <input type="radio" name="gender" value="male"> 남성
    <input type="radio" name="gender" value="female"> 여성<br>

    <label for="birthdate">생년월일:</label>
    <input type="date" id="birthdate" name="birthdate"><br>

    <label for="country">국가:</label>
    <select id="country" name="country">
        <option value="kr">대한민국</option>
        <option value="us">미국</option>
        <option value="jp">일본</option>
    </select><br>

    <input type="checkbox" name="terms" required> 이용 약관에 동의합니다.<br>

    <input type="submit" value="회원가입">
</form>

✅ 실행하면 이런 기능을 구현할 수 있습니다!

• 필수 입력 필드 (required 속성 활용)
• 비밀번호 입력 필드
• 체크박스 및 라디오 버튼 선택
• 드롭다운 메뉴에서 국가 선택

---

🎯 정리 – HTML Form 태그 활용하기!

✔ <form> → 사용자 입력을 받는 영역
✔ <input> → 텍스트, 비밀번호, 체크박스, 라디오 버튼 등 입력 필드
✔ <select> → 드롭다운 리스트
✔ <submit> → 입력값을 서버로 전송하는 버튼
✔ 회원가입 폼 → 실전 예제까지 완성!

📌 다음 HTML 4부에서는 테이블(table) 태그 활용법을 다뤄보겠습니다! 🚀

---