HTML의 <input> 태그는 다양한 유형의 사용자 입력을 받기 위해 여러 type 속성을 지원합니다.
주요 <input> 타입
- text
- 설명: 한 줄 텍스트 입력 필드.
- 예시:
<input type="text">
- password
- 설명: 비밀번호 입력 필드. 입력된 값이 화면에 표시되지 않습니다.
- 예시:
<input type="password">
- 설명: 이메일 주소 입력 필드. 이메일 형식을 검증합니다.
- 예시:
<input type="email"> - 이메일 형식:
username@example.com
- number
- 설명: 숫자 입력 필드. 최소값, 최대값, 증가 단위를 지정할 수 있습니다.
- 예시:
<input type="number" min="1" max="10" step="1">
- date
- 설명: 날짜 입력 필드. 날짜 선택을 위한 캘린더가 표시됩니다.
- 예시:
<input type="date">
- datetime-local
- 설명: 날짜와 시간을 입력할 수 있는 필드.
- 예시:
<input type="datetime-local">
- checkbox
- 설명: 체크박스 입력 필드. 여러 개의 옵션을 선택할 수 있습니다.
- 예시:
<input type="checkbox">
- radio
- 설명: 라디오 버튼 입력 필드. 여러 옵션 중 하나만 선택할 수 있습니다.
- 예시:
<input type="radio" name="option">
- file
- 설명: 파일 업로드를 위한 입력 필드.
- 예시:
<input type="file">
- submit
- 설명: 폼 제출 버튼.
- 예시:
<input type="submit" value="Submit">
- reset
- 설명: 폼 입력 값을 초기화하는 버튼.
- 예시:
<input type="reset" value="Reset">
- hidden
- 설명: 사용자에게 표시되지 않는 숨겨진 입력 필드.
- 예시:
<input type="hidden" value="hiddenValue">
- tel
- 설명: 전화번호 입력 필드.
- 예시:
<input type="tel">
- url
- 설명: URL 입력 필드. URL 형식을 검증합니다.
- 예시:
<input type="url"> - URL 형식:
https://example.com:8080/path/to/resource?name=value#section1
- color
- 설명: 색상 선택 필드. 색상 선택기가 표시됩니다.
- 예시:
<input type="color">
- search
- 설명: 검색 입력 필드. 검색어 입력을 위한 디자인이 적용됩니다.
- 예시:
<input type="search">
Share article