📌 HTML에서 다른 입력 태그 사용하기

🔹 <select> 태그: 드롭다운 메뉴 만들기

  • <select> 태그는 다수의 선택지를 제공하는 드롭다운 메뉴를 생성합니다.
  • 각 선택지는 <option> 태그로 정의됩니다.
  • value 속성으로 각 옵션에 대한 값을 구별할 수 있습니다.

✅ 예시

<select>
  <option value="cat">고양이</option>
  <option value="dog">강아지</option>
  <option value="rabbit">토끼</option>
</select>
  • 사용자는 드롭다운 메뉴에서 고양이, 강아지, 토끼 중 하나를 선택할 수 있습니다.

📝 <textarea> 태그: 여러 줄 텍스트 입력 받기

  • <textarea> 태그는 한 줄의 텍스트가 아닌 여러 줄의 텍스트를 입력받을 수 있습니다.
  • <input> 태그는 한 줄만 입력받을 수 있지만, <textarea> 태그는 텍스트 영역을 제공하여 여러 줄의 입력을 받습니다.

✅ 예시

<textarea rows="4" cols="50">여기에서 여러 줄을 입력하세요.</textarea>
  • **rows**와 cols 속성으로 텍스트 영역의 크기를 설정할 수 있습니다.

📊 <progress> 태그: 진척도 표시하기

  • <progress> 태그는 작업의 진행 상태를 표시하는 진척도 바를 만듭니다.
  • max 속성은 완료해야 할 작업의 최대 값을 지정하고, value 속성은 현재 진행 상태를 나타냅니다.
<progress value="50" max="100">50%</progress>
  • 위 코드에서 진행 상황은 **50%**로 표시됩니다.

🔘 <button> 태그: 클릭 버튼 만들기

  • <button> 태그는 버튼을 생성하는 태그입니다.
  • 버튼은 <input> 태그의 type="button" 속성과 유사하지만, 태그 내 텍스트가 버튼에 표시됩니다.

✅ 예시

<button>클릭하세요</button>
  • 이 버튼을 클릭하면 지정된 작업이 수행됩니다.

🔸 <input> 태그의 type="button"

  • <input> 태그의 **type="button"**을 사용하여 버튼을 만들 수도 있지만, <button> 태그가 더 일반적입니다.

✅ 예시

<input type="button" value="클릭하세요">

 

🚀 1️⃣ <fieldset> 요소 설명

<fieldset> 요소는 HTML 폼에서 여러 개의 입력 필드를 그룹화하는 데 사용되는 요소입니다. <fieldset>은 폼 요소들을 시각적으로 묶는 역할을 하며, 종종 legend와 함께 사용되어 해당 그룹의 제목을 명확히 나타냅니다.

  • 기본 기능: 여러 폼 요소들을 하나의 블록으로 묶어서 사용자에게 더 나은 가독성과 이해를 제공합니다.
  • 스타일링: 기본적으로 <fieldset>은 테두리가 그려져 있으며, 내부 여백이 설정되어 있습니다. 이를 통해 여러 입력 필드들이 구분되도록 시각적으로 나타낼 수 있습니다.

예시:

<fieldset style="border: 2px solid black; padding: 10px;">
    <legend>동물 선택</legend>
    <!-- 폼 요소들 -->
</fieldset>

위 예시에서는 border와 padding을 통해 <fieldset>의 테두리와 여백을 명확하게 설정했습니다. 이 스타일은 기본적으로 제공되는 <fieldset>의 스타일을 오버라이드하여 더 명확하게 테두리를 보여줍니다.

🚀 2️⃣ <legend> 요소 설명

<legend> 요소는 <fieldset> 내부에서 사용하는 제목 요소로, 해당 그룹의 내용을 설명합니다. 주로 사용자가 폼을 작성할 때, 해당 항목이 무엇을 의미하는지 알려주는 역할을 합니다.

  • 기본 기능: legend는 <fieldset> 그룹의 제목을 제공합니다. 이를 통해 사용자는 폼의 각 섹션이 어떤 내용인지 직관적으로 알 수 있습니다.
  • 시각적 효과: <legend> 요소는 기본적으로 테두리 안에 들어가며, 폼의 제목이 그 섹션의 맨 위에 배치됩니다.
<fieldset>
    <legend>동물 선택</legend>
    <h2>동물을 고르세요</h2>
    <select multiple size="2">
        <option value="cat">고양이</option>
        <option value="dog" selected>강아지</option>
        <option value="rabbit">토끼</option>
    </select><br><br>
</fieldset>
 

위 예시에서 **<legend>**는 **"동물 선택"**이라는 제목을 표시하며, <fieldset> 내부의 내용들이 무엇에 관한 것인지 설명해줍니다.

🚀 3️⃣ <fieldset>과 <legend> 함께 사용 예시

<body>
    <fieldset style="border: 2px solid black; padding: 10px;">
        <legend>동물 선택</legend>
        <h2>동물을 고르세요</h2>
        <select multiple size="2">
            <option value="cat">고양이</option>
            <option value="dog" selected>강아지</option>
            <option value="rabbit">토끼</option>
        </select><br><br>
        
        <h2>기타 동물을 원하신다면 아래에 써주세요.</h2>
        <textarea rows="4" cols="50">여기에서 여러 줄을 입력하세요.</textarea>
    </fieldset>
</body>

설명:

  • <fieldset>: 여러 폼 요소들을 그룹화하여 동물 선택을 위한 폼 영역을 시각적으로 묶습니다.
  • <legend>: 동물 선택이라는 제목을 제공하여 이 폼 그룹이 무엇과 관련 있는지를 설명합니다.
  • select: 여러 동물 옵션 중에서 선택할 수 있게 합니다.
  • textarea: 추가로 동물을 입력할 수 있는 텍스트 영역을 제공합니다.

🚀 4️⃣ <fieldset>과 <legend>의 시각적 효과

  • <fieldset>: 기본적으로 테두리가 그려져 있으며, 패딩이 적용되어 내부 여백이 생깁니다. 이로 인해 폼 요소들이 시각적으로 분리되어 보입니다.
  • <legend>: 가장 윗부분에 배치되어, 해당 그룹을 설명하는 텍스트를 사용자에게 제공합니다. 이로 인해 사용자는 어떤 폼 요소들이 서로 관련 있는지 쉽게 알 수 있습니다.

🚩 결론

  • <select>, <textarea>, <progress>, <button> 태그를 통해 웹 폼을 다양화할 수 있습니다.
  • **<select>**는 드롭다운 메뉴를, **<textarea>**는 여러 줄 입력을, **<progress>**는 진행 상태를, **<button>**은 클릭 버튼을 만들어 사용자와의 상호작용을 더욱 풍부하게 만듭니다.
  • 이러한 입력 태그들은 웹 페이지에서 데이터 입력과 상호작용을 효율적으로 처리하는 데 필수적인 요소들입니다.

'HTML & CSS' 카테고리의 다른 글

Chapter 1-17. 의미론적인 코드-시맨틱 태그(HTML)  (0) 2025.03.28
Chapter 1-16. 양식을 만들고 값 전송하기(HTML)  (0) 2025.03.28
Chapter 1-14. 입력 태그 <input> (HTML)  (0) 2025.03.28
Chapter 1-13. 표만들기 (HTML)  (0) 2025.03.28
Chapter 1-12. 목록만들기(HTML)  (0) 2025.03.28

티스토리툴바