HTML Button, Select 및 TextArea 요소 정리

Button 요소란?

웹 페이지에서 button 요소는 사용자와의 상호작용을 제공하는 중요한 요소입니다. button 요소는 다양한 유형이 있으며, input 태그의 버튼 타입과 함께 폼 요소에서 유용하게 사용됩니다.

Form 요소 내에서 Button 사용

HTML 폼(form) 내부에서 다양한 버튼을 사용할 수 있습니다. 다음은 각 버튼의 역할을 설명합니다.

1. <input> 태그의 버튼

<div>
  <input type="submit" value="전송" />
  <input type="reset" value="초기화" />
  <input type="button" value="Click Me!" />
</div>

• type="submit" : 폼 데이터를 서버로 제출합니다.
• type="reset" : 입력된 데이터를 초기화합니다.
• type="button" : 특별한 동작이 없으며, JavaScript와 함께 사용하여 이벤트를 트리거할 수 있습니다.

2. <button> 태그의 버튼

<div>
  <button type="submit">전송</button>
  <button type="reset">초기화</button>
  <button type="button">클릭!</button>
</div>

• type="submit" : form 요소 내에서 제출 역할을 합니다.
• type="reset" : form 내의 입력값을 초기화합니다.
• type="button" : 기본 동작이 없으며, JavaScript 이벤트 핸들러와 함께 사용됩니다.

3. 이미지 버튼 사용

<div>
  <button type="submit">
    <img src="/src/assets/icon/search.svg" alt="전송하기" />
  </button>
</div>

• 버튼 내부에 이미지를 삽입하여 시각적인 요소를 추가할 수 있습니다.

4. form 속성을 이용한 버튼 제어

<button type="reset" form="buttonForm">초기화</button>

• form="buttonForm" 속성을 사용하여, 특정 form과 연결된 버튼을 폼 외부에서도 동작하도록 설정할 수 있습니다.

Select 요소란?

<select> 요소는 사용자가 미리 정의된 옵션 중 하나를 선택할 수 있도록 하는 드롭다운 메뉴입니다. option 태그와 함께 사용됩니다.

Select 요소 예제

<form action="/" method="post">
  <div>
    <label for="petSelect">반려동물</label>
    <select name="petSelect" id="petSelect">
      <option value="dog">강아지</option>
      <option value="cat">고양이</option>
      <option value="hamster">햄스터</option>
      <option value="spider">거미</option>
      <option value="goldfish">금붕어</option>
      <option value="parrot">패럿</option>
    </select>
  </div>
</form>

• <label> 태그를 사용하여 접근성을 향상시킬 수 있습니다.
• value 속성을 통해 선택된 값을 서버로 전송할 수 있습니다.
• 다양한 옵션을 추가하여 사용자 선택의 폭을 넓힐 수 있습니다.

TextArea 요소란?

<textarea> 요소는 여러 줄의 텍스트를 입력할 수 있는 입력 필드입니다. 주로 사용자 의견, 설명 등의 입력에 사용됩니다.

TextArea 요소 예제

<form action="/" method="post">
  <div>
    <label for="message">
      내용
      <span aria-hidden="true">*</span>
      <span class="sr-only">필수</span>
      <textarea
        name="message"
        id="message"
        cols="50"
        rows="20"
        placeholder="여기에 의견을 적어주세요."
      ></textarea>
    </label>
  </div>
</form>

• cols와 rows 속성을 사용하여 크기를 조정할 수 있습니다.
• placeholder 속성은 입력 필드 내 힌트 텍스트를 제공합니다.
• label을 활용하여 접근성을 높일 수 있습니다.

접근성 고려 사항

• label을 사용하여 입력 필드와 연관성을 명확히 합니다.
• sr-only 클래스를 활용하여 시각적으로 숨겨진 설명을 제공할 수 있습니다.
• aria-hidden 속성을 이용하여 필수 요소 표시를 조정할 수 있습니다.

이번 학습을 통해 button, select, textarea 요소의 구조와 활용법을 이해할 수 있었습니다. 실전에서 접근성을 고려한 마크업을 작성하는 것이 중요하다는 점을 다시 한번 되새겨야겠습니다!