텍스트 입력을 위한 <input> 태그의 올바른 사용법

728x90

목 차

• 1. <input> 태그란?
• 2. 기본 구조
• 3. <input> 태그 속성
• 3-1. type
• 3-2. name
• 3-3. id
• 3-4. value
• 3-5. placeholder
• 3-6. maxlength
• 3-7. required
• 3-8. disabled
• 3-9. readonly
• 3-10. pattern
• 3-11. autofocus
• 3-12. autocomplete
• 4. type 속성별 예제
• 4-1. 기본 텍스트 입력 (type="text")
• 4-2. 비밀번호 입력 (type="password")
• 4-3. 이메일 입력 (type="email")
• 4-4. 숫자 입력 (type="number")
• 4-5. URL 입력 (type="url")
• 4-6. 전화번호 입력 (type="tel")
• 4-7. 날짜 및 시간 입력
• 4-8. 체크박스 (type="checkbox")
• 4-9. 라디오 버튼 (type="radio")
• 4-10. 파일 선택 (type="file")
• 4-11. 버튼 (type="button", "submit", "reset")
• 4-12. 슬라이더 (type="range")
• 4-13. 숨겨진 필드 (type="hidden")

반응형

 

1. <input> 태그란?

• HTML <input> 태그는 사용자로부터 데이터를 입력받기 위해 사용되는 가장 기본적인 HTML 요소입니다. 다양한 type 속성을 통해 입력 필드의 형식과 기능을 정의할 수 있습니다.

 

---

 

2. 기본 구조

<input type="text" name="username" id="username" placeholder="Enter your username">

• type: 입력 필드의 형식을 정의합니다(예: 텍스트, 비밀번호, 이메일 등).
• name: 서버에 데이터를 전송할 때 사용되는 이름.
• id: 고유 식별자로 자바스크립트나 CSS에서 참조할 수 있습니다.
• placeholder: 입력 필드에 표시되는 안내 문구.

 

---

 

3. <input> 태그 속성

3-1. type

• 입력 필드의 유형을 결정합니다(자세한 유형은 아래에서 설명).
• 예: <input type="email">

 

3-2. name

• 입력 필드의 이름을 설정하여 서버로 제출 시 데이터의 키(key)로 사용됩니다.
• 예: <input name="email">

 

3-3. id

• 필드의 고유 식별자.
• 예: <input id="emailField">

 

3-4. value

• 입력 필드의 초기 값.
• 예: <input type="text" value="Default text">

 

3-5. placeholder

• 사용자가 입력하기 전 나타나는 힌트 문구.
• 예: <input placeholder="Enter your email">

 

3-6. maxlength

• 입력 가능한 최대 문자 수.
• 예: <input maxlength="50">

 

3-7. required

• 폼 제출 시 필수 입력 필드로 설정.
• 예: <input type="text" required>

 

3-8. disabled

• 입력 필드를 비활성화.
• 예: <input type="text" disabled>

 

3-9. readonly

• 입력 필드를 읽기 전용으로 설정.
• 예: <input type="text" readonly>

 

3-10. pattern

• 입력값의 형식을 정규 표현식으로 제한.
• 예: <input type="text" pattern="[A-Za-z]{3,}">

 

3-11. autofocus

• 페이지 로드 시 자동으로 포커스.
• 예: <input type="text" autofocus>

 

3-12. autocomplete

• 이전에 입력한 값을 기반으로 자동 완성 기능 활성화.
• 예: <input type="text" autocomplete="off">

 

---

 

4. type 속성별 예제

4-1. 기본 텍스트 입력 (type="text")

• 기본 단일 줄 텍스트 입력 필드.

<input type="text" name="username" placeholder="Enter your username">

 

4-2. 비밀번호 입력 (type="password")

• 입력값이 화면에 숨겨짐(마스킹 처리).

<input type="password" name="password" placeholder="Enter your password">

 

4-3. 이메일 입력 (type="email")

• 이메일 형식 검증을 지원.

<input type="email" name="email" placeholder="Enter your email">

 

4-4. 숫자 입력 (type="number")

• 숫자 입력 필드. min, max, step 속성으로 값의 범위와 간격 지정 가능.

<input type="number" name="quantity" min="1" max="10" step="1">

 

4-5. URL 입력 (type="url")

• URL 형식 검증을 지원.

<input type="url" name="website" placeholder="Enter your website">

 

4-6. 전화번호 입력 (type="tel")

• 전화번호 형식 입력 필드(브라우저가 형식 검증은 하지 않음).

<input type="tel" name="phone" placeholder="Enter your phone number">

 

4-7. 날짜 및 시간 입력

• 날짜 선택: <input type="date">
• 시간 선택: <input type="time">
• 날짜 및 시간 선택: <input type="datetime-local">
• 월 선택: <input type="month">
• 주 선택: <input type="week">

<input type="date" name="birthdate">
<input type="time" name="appointment">

 

4-8. 체크박스 (type="checkbox")

• 다중 선택 가능.

<input type="checkbox" name="agree" value="yes"> I agree to the terms.

 

4-9. 라디오 버튼 (type="radio")

• 하나의 그룹에서 단일 선택 가능.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

 

4-10. 파일 선택 (type="file")

• 파일 업로드를 위한 입력 필드.

<input type="file" name="upload">

 

4-11. 버튼 (type="button", "submit", "reset")

• button: 일반 버튼.
• submit: 폼 데이터를 제출.
• reset: 폼 초기화.

<input type="button" value="Click Me">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

 

4-12. 슬라이더 (type="range")

• 값 범위 선택을 위한 슬라이더.

<input type="range" name="volume" min="0" max="100">

 

4-13. 숨겨진 필드 (type="hidden")

• 사용자에게 보이지 않는 데이터.

<input type="hidden" name="userId" value="12345">