HTML Form

사진: Unsplash의David Becker

HTML 폼(Form) 태그 정리하기

이번 포스팅에서는 HTML의 폼(Form) 태그를 활용해 다양한 사용자 입력 요소를 구성하는 방법을 실습합니다. 폼은 데이터를 입력받아 서버로 전송할 때 사용됩니다.

---

1. 폼(Form)의 기본 구조

HTML에서 <form> 태그는 사용자 데이터를 입력받아 서버로 전송합니다.

<form action="chapter05-form-result.html" method="get">
    <!-- 폼 내용 -->
</form>

주요 속성:

• action: 데이터를 전송할 URL.
• method:
  • get: 데이터가 URL에 포함되어 전송. 주로 검색 시 사용.
  • post: 데이터가 본문에 포함되어 전송. 보안이 중요한 경우 사용.

---

2. 입력 요소

1) 텍스트 입력

<label for="username">아이디</label>
<input id="username" name="id" type="text" readonly value="1234">

• name: 입력 데이터를 서버로 전송할 때 사용할 이름.
• readonly: 입력값을 수정하지 못하도록 설정.
• value: 기본 입력값 설정.

2) 비밀번호 입력

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

• type="password": 입력 내용을 숨김 처리.
• placeholder: 사용자에게 안내 문구 제공.

---

3. 드롭다운 메뉴

<label for="option">옵션 선택</label>
<select name="opt">
    <option value="">선택하세요.</option>
    <option>옵션1</option>
    <option value="옵션2-값">옵션2</option>
    <option value="옵션3-값">옵션3</option>
    <option>옵션4</option>
</select>

• <select>: 드롭다운 메뉴 생성.
• <option>: 선택 항목.
• value: 서버로 전송되는 데이터.

---

4. 체크박스

<input id="agree" type="checkbox" value="true" name="checkbox">
<label for="agree">약관에 동의합니다.</label>

• 여러 개 선택 가능.
• checked 속성 추가 시 기본으로 선택.

---

5. 라디오 버튼

<input type="radio" name="number" value="1">1
<input type="radio" name="number" value="2">2
<input type="radio" name="number" value="3">3

• 동일한 name을 가진 라디오 버튼 중 하나만 선택 가능.

---

6. 버튼

<input type="button" value="나는 버튼이에요.">
<button type="submit">전송</button>

• type="button": 클릭 시 기본 동작 없음.
• type="submit": 폼 데이터를 서버로 전송.

---

7. 숨겨진 데이터 전송

<input type="hidden" name="hiddentype" value="wow">

• 사용자가 볼 수 없지만, 서버로 데이터를 전송할 때 사용.

---

8. 텍스트 영역

<textarea name="" id="" cols="40" rows="10">안녕하세요.</textarea>

• <textarea>: 여러 줄 입력을 받을 때 사용.

---

최종 코드 예제

<form action="chapter05-form-result.html" method="get">
    <label for="username">아이디</label>
    <input id="username" name="id" type="text" readonly value="1234">

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

    <label for="option">옵션 선택</label>
    <select name="opt">
        <option value="">선택하세요.</option>
        <option>옵션1</option>
        <option value="옵션2-값">옵션2</option>
    </select>

    <input id="agree" type="checkbox" value="true" name="checkbox">
    <label for="agree">약관에 동의합니다.</label>

    <input type="radio" name="number" value="1">1
    <input type="radio" name="number" value="2">2

    <input type="button" value="나는 버튼이에요.">
    <button type="submit">전송</button>

    <textarea name="" id="" cols="40" rows="10">안녕하세요.</textarea>
</form>

---

정리

HTML 폼을 통해 다양한 사용자 입력을 받을 수 있습니다.