WEB-HTML-입력 input 태그의 type 종류
입력하는 type 종류
입력하는 input 태그의 type 종류
숫자 입력하는 type = “number”, type = “range”
- type = “number”
- 스핀 박스가 나타나 숫자 선택 가능
- type = “range”
- 슬라이드 막대를 움직여 숫자 입력 가능
- 기본형
<input type = "number">
<input type = "range">
- 속성
| 속성 | 설명 |
|---|---|
| min | 최솟값 지정(기본 0) |
| max | 최댓값 지정(기본 100) |
| step | 숫자 간격 지정(기본 1) |
| value | 초깃값 |
<h1>회원 가입</h1>
<form>
<input type="range">
<input type="number">
</form>
- 출력 결과
날짜 입력하는 type = “date”, type = “month”, type = “week”
- 기본형
<input type = "date|month|week">
- 형식
- type = “date” : 달력에서 날짜 선택 가능 “yyyy-mm-dd”
- type = “month” : 달력에서 월 선택 가능 “yyyy-mm”
- type = “week” : 달력에서 주 선택 가능
<body>
<h1>날짜 지정하기</h1>
<form>
<input type="date">
<input type="month">
<input type="week">
</form>
</body>
- 출력 화면
전송 버튼 type = “submit”, 리셋 버튼 type = “reset”
전송 버튼 submit : 입력한 정보를 서버로 전송 리셋 버튼 reset : 입력한 정보 모두 지우기 value 속성을 이용하여 버튼에 표시할 내용 지정
- 기본 코드
<input type = "submit" value = "전송">
<input type = "reset" value = "취소">
- 출력 화면
이미지 버튼 나타내기 type = “image”
- 기본형
<input type = "image" src = "이미지 경로" alt = "대체 텍스트">
<form>
<input type = "submit" value = "전송">
<input type = "reset" value = "취소">
<input type="image" src="black2.PNG" alt = "로그인 버튼">
</form>
- 출력 화면
기본 버튼 나타내기 type = “button”
- 기본형
<input type = "button" value = "버튼에 표시할 내용">
- 출력 화면
파일 첨부 type = “file”
파일 선택하여 첨부할 수 있다.
- 기본형
<input type = "file">
- 출력 화면
출처
- (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.
