HTML & CSS

Chapter 1-14. 입력 태그 <input> (HTML)

Chansman 2025. 3. 28. 17:11

📌 HTML 입력 태그 (<input>) 사용법

🔹 <input> 태그란?

  • <input> 태그는 사용자가 데이터를 입력할 수 있도록 하는 입력 요소입니다.
  • 핵심 속성은 type 속성으로, 이 속성을 통해 입력 데이터 유형을 지정할 수 있습니다.

✅ <input> 태그 기본 구조

<input type="데이터 유형">
  • type 속성을 사용하여 텍스트, 이메일, 비밀번호, 날짜 등 다양한 데이터를 입력 받을 수 있습니다.

📝 1. 텍스트를 입력받는 type들

입력받을 데이터의 유형에 따라 type 속성을 설정하면, 같은 텍스트라도 그 목적에 맞게 입력 필드가 달라집니다.

🔹 대표적인 type 속성

  • type="text": 일반 텍스트 입력 필드
  • type="email": 이메일 입력 필드
  • type="password": 비밀번호 입력 필드
  • type="search": 검색 입력 필드
  • type="date": 날짜 선택 필드

✅ 예시

<input type="text" placeholder="이름을 입력하세요">
<input type="email" placeholder="이메일을 입력하세요">
<input type="password" placeholder="비밀번호">
<input type="search" placeholder="검색어를 입력하세요">
<input type="date">
  • 위 코드는 이메일과 비밀번호를 입력 받을 수 있는 필드를 생성합니다.

🖋️ 2. 수치를 입력받는 type들

숫자 값을 입력받을 때는 type 속성을 수치 관련 데이터 유형으로 설정할 수 있습니다.

🔹 대표적인 수치 입력 type

  • type="color": 색상을 선택하는 필드
  • type="number": 숫자를 입력받는 필드
  • type="range": 범위 값을 선택하는 슬라이더

✅ 예시

<input type="color">
<input type="number" placeholder="숫자를 입력하세요">
<input type="range" min="1" max="10">
  • **type="color"**는 색상을 선택할 수 있는 필드를 생성합니다.
  • **type="number"**는 숫자를 입력받는 필드를 생성하며, **최소값(min)**과 **최대값(max)**을 지정할 수 있습니다.
  • **type="range"**는 슬라이더를 이용해 범위 내 값을 선택할 수 있습니다.

🏷️ 3. <label> 태그 활용법

<label> 태그는 입력 요소에 라벨을 추가하는 역할을 합니다. 라벨을 추가하면 사용자가 무엇을 입력해야 하는지 더 직관적으로 알 수 있게 됩니다. 또한, 웹 접근성을 높이는 데에도 도움이 됩니다.

  • <label> 태그는 for 속성을 사용하여, 특정 input 요소와 연결할 수 있습니다.

✅ 예시

<label for="username">사용자 이름:</label>
<input type="text" id="username">
  • for="email" 속성은 라벨이 클릭되었을 때 해당 input 요소로 포커스를 이동시키는 역할을 합니다.

Tip use checkbox

<label>            
            <input type="checkbox"> 제육볶음
        </label>
        <label>            
            <input type="checkbox"> 돈까스스
        </label>
        <label>            
            <input type="checkbox"> 순대국밥
</label>

 

Tip 2가지 방법의 Label 표현방법

<label>
            아이디&nbsp;&nbsp;&nbsp;
            <input type="text" placeholder="아이디">
        </label>
        <br>
        <label for="pw">비밀번호</label>
        <input type="password" id="pw" placeholder="비밀번호">

📚 4. 입력 필드의 속성

<input> 태그에는 추가적으로 다양한 속성을 설정할 수 있습니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

🔹 주요 속성

  • placeholder: 입력 필드에 안내 문구를 표시합니다.
  • required: 필수 입력 항목으로 지정합니다.
  • value: 초기값을 설정합니다.

✅ 예시

<input type="text" placeholder="이름을 입력하세요" required> <input type="number" value="25">
  • **placeholder**는 사용자가 값을 입력하기 전, 필드에 어떤 내용이 들어가야 하는지 알려주는 역할을 합니다.
  • **required**는 해당 입력 필드를 필수로 설정하여, 사용자가 비워둘 수 없게 만듭니다.

 

🚩 결론

  • <input> 태그는 사용자가 데이터를 입력할 수 있는 필드를 생성하는 HTML 요소입니다.
  • type 속성을 통해 다양한 입력 필드 유형을 정의할 수 있으며, <label> 태그를 사용하여 직관적인 사용자 인터페이스를 만들 수 있습니다.
  • placeholder, required, **value**와 같은 속성으로 입력 필드를 더 효율적으로 제어할 수 있습니다.