- <input> 태그 type 알아보기
<input> 태그는 폼에서 사용자의 입력을 받기 위한 태그이다.
해당 태그는 다양한 형태가 있는데, 자주 사용하는 거 위주로 알아보려고 한다.
- type="text" : 텍스트 필드 만들기 (기본값)
text는 한 줄짜리 일반 텍스트를 입력하는 필드이다.
→ 아이디나 이름, 주소 등 텍스트를 입력할 때 가장 많이 사용.
- type="hidden" : 히든 필드 만들기
사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다.
→ name과 value를 꼭 써줘야 한다.
<input type="hidden" name="이름" value="서버로 넘길 값">- type="password" : 비밀번호 입력란 만들기
password는 입력 내용이 '＊' 등으로 변경되어 표시된다.
→ 내용이 가려지는 거 외에는 text와 동일하다.
- type="radio", type="checkbox" : 라디오 버튼과 체크박스
radio는 하나의 항목을, checkbox는 다중 항목을 선택할 때 사용한다.
<label><input name="fruit" type="radio">사과</label>
<label><input name="fruit" type="radio">바나나</label>
<br>
<label><input name="subject" type="checkbox">한국어</label>
<label><input name="subject" type="checkbox">영어</label>
<label><input name="subject" type="checkbox">불어</label>- 날짜 지정하는 타입 : date, month, week
date는 날짜, month는 월과 연도, week는 주와 연도를 선택한다.- date : - month : - week :
<input type="date">
<input type="month">
<input type="week">- 시간 지정하는 타입 : time, datetime
time은 시간, datetime은 날짜와 시간을 함께 지정한다.- time : - datetime :
<input type="time">
<input type="datetime">- 형식 별 지정하기 : number, email, tel, url
number는 숫자, email은 이메일 형식, tel은 전화번호 형식, url은 URL 형식으로만 입력 받는다.- 숫자 : - 이메일 :
- 전화번호 : - URL :
<input type="number">
<input type="email">
<input type="tel">
<input type="url">- type="color" : 색상 선택 상자 표시하기
색상 선택 상자도 만들 수 있다. 색을 선택하면 16진수로 값이 넘어가게 된다.
참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱