HTML 리스트(List)와 폼(Form) 태그 총정리

---

1. 리스트(List) 태그

웹 문서에서 순서가 있는 항목, 순서 없는 항목, 용어와 정의를 깔끔하게 표시할 수 있습니다.

1.1 순서 있는 목록 (Ordered List)

<ol> 태그 안의 <li> 요소가 1, 2, 3… 숫자로 자동 번호 매김됩니다.

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

1.2 순서 없는 목록 (Unordered List)

<ul> 태그 안의 <li> 요소가 기본적으로 ●, – 또는 ○ 모양의 불릿으로 표시됩니다.

<ul>
  <li>HTML 배우기</li>
  <li>CSS 배우기</li>
  <li>JavaScript 배우기</li>
</ul>

1.3 사전 목록 (Description List)

<dl> 태그 안에 <dt>로 용어를, <dd>로 정의를 작성해 용어 목록을 만듭니다.

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 정의하는 마크업 언어</dd>
  <dt>CSS</dt>
  <dd>HTML 요소의 스타일을 지정하는 언어</dd>
</dl>

1.4 리스트 스타일 커스터마이징

CSS list-style 속성을 이용해 불릿 모양이나 번호 형식을 변경할 수 있습니다.

<ul style="list-style: decimal-leading-zero;">
  <li>01 항목</li>
  <li>02 항목</li>
  <li>03 항목</li>
</ul>

---

2. 폼(Form) 태그

폼은 사용자가 입력한 데이터를 서버에 전송하는 역할을 합니다.
<form> 요소의 주요 속성과 대표적인 입력 필드 타입을 살펴봅니다.

2.1 <form> 태그 기본 속성

• action
  데이터를 전송할 URL을 지정합니다. 생략하면 현재 페이지로 전송됩니다.
• method
  전송 방식을 결정합니다.
  • GET (기본값): 쿼리 문자열로 데이터 전달
  • POST: 본문(body)에 데이터를 숨겨 전달

<form action="/submit" method="post">
  <!-- 입력 필드 -->
</form>

2.2 주요 <input> 타입 및 예제

형태에 맞는 type 속성으로 다양한 입력 필드를 생성할 수 있습니다.

• 텍스트 입력

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

 

• 비밀번호 입력

<label for="pwd">비밀번호:</label> 
<input type="password" id="pwd" name="pwd" placeholder="8–20자, 특수문자 포함">

• 이메일 입력

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

• 라디오 버튼 (하나만 선택)

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

• 체크박스 (여러 개 선택)

<label><input type="checkbox" name="hobby" value="reading"> 독서</label> 
<label><input type="checkbox" name="hobby" value="travel" checked> 여행</label>

• 드롭다운 목록

<label for="blood">혈액형:</label> 
<select id="blood" name="blood"> 
  <option value="A">A</option> 
  <option value="B">B</option> 
  <option value="O">O</option> 
  <option value="AB">AB</option> 
</select>

• 파일 첨부

<label for="photo">사진 첨부:</label> 
<input type="file" id="photo" name="photo">

• 전송 버튼

<input type="submit" value="보내기">

• 일반 버튼

<input type="button" value="버튼" onclick="this.form.submit();">

• <button> 요소

<button type="submit">버튼2</button>

---

3. 전체 예제 코드

<form action="/submit" method="post">
  <fieldset>
    <legend>회원가입 폼</legend>

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

    <label for="pwd">비밀번호:</label>
    <input type="password" id="pwd" name="pwd"
           placeholder="8–20자, 특수문자 포함"><br>

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

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

    <label>관심 분야:</label>
    <label><input type="checkbox" name="hobby" value="reading"> 독서</label>
    <label><input type="checkbox" name="hobby" value="travel"> 여행</label><br>

    <label for="blood">혈액형:</label>
    <select id="blood" name="blood">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="O">O</option>
      <option value="AB">AB</option>
    </select><br>

    <label for="photo">사진 첨부:</label>
    <input type="file" id="photo" name="photo"><br>

    <input type="submit" value="가입하기">
    <button type="reset">초기화</button>
  </fieldset>
</form>