[HTML] input 태그의 type들; text, 숫자, 날짜 및 시간, 색상, 라디오 버튼과 체크박스까지

TIL: 스스로 이해한 것을 바탕으로 정리하였기에 오류가 있을 수 있습니다. 틀린 부분은 댓글로 알려주시면 감사하겠습니다.

 

 

 

text와 관련된 input 태그들

type="text"	한 줄 짜리 텍스트를 입력할 수 있는 텍스트 상자
type="password"	비밀번호를 입력할 수 있는 텍스트상자 (입력된 값 노출 x)
type="search"	검색을 위한 텍스트 상자
type="url"	홈페이지 등 웹 주소를 입력할 수 있는 텍스트 상자
type="email"	이메일을 입력할 수 있는 텍스트상자 (이메일형식만 입력)
type="tel"	전화번호를 입력할 수 있는 텍스트상자

 

 

 

* datalist 

HTML5에서 새로 추가된 기능으로, option을 선택할 수 있게끔하는 텍스트 상자이다.

 

* textarea 태그

텍스트 상자이긴 하나 여러줄을 입력할 수 있는 텍스트 상자 

cols : 가로 / rows : 세로를 의미하며,

"resize: none;" 속성을 넣어주면 사이즈 재조정이 불가하게 된다.

 

 

 

 

숫자와 관련된 input 태그들

type="number"	숫자값만 입력가능한 텍스트상자 오른쪽에 위아래 화살표버튼인 스핀박스가 표시된다
type="range"	숫자를 지정할 수 있는 슬라이드바

 

 

 

 

날짜 및 시간과 관련된 input 태그들

type="date"	년, 월, 일 입력받을 수 있는 텍스트상자
type="month"	년, 월 까지만 입력받을 수 있는 텍스트상자
type="week"	년, 해당년도의 몇번째 주 인지 입력받을 수 있는 텍스트상자
type="time"	오전/오후, 시, 분 입력받을 수 있는 텍스트상자
type="datetime-local"	년도, 월, 일, 오전/오후, 시, 분 입력받을 수 있는 텍스트상자

 

 

 

 

라디오버튼과 체크박스 관련 input태그들

type="radio"

제시한 여러개의 값들 중에서 한개만 선택해야 될 때 (name 속성값이 똑같은 것들끼리 하나의 그룹으로 지어진다) 제출시 선택된 값이 넘어가기 때문에 어떤 값을 넘길 것인지 value값을 명시해두어야 한다.

 

 

type="checkbox"

제시한 여러개의 값들 중 여러개 선택가능할 경우 마찬가지로 제출시 선택된 값이 넘어가기에 value값 명시필수

 

 

 

 

 

 

추가적인 input태그 type들

type="color"	색상을 선택할 수 있는 input
type="file"	첨부할 파일을 선택할 수 있는 input
type="hidden"	입력/노출시킬 필요없지만 제출할 값이 있을 경우
type="submit"	제출 (기본value: 제출)
type="reset"	초기화 (기본value: 초기화)
type="button"	일반 버튼

 

type="submit" / "reset" / "button" 은 2가지방법으로 표현할 수 있다.

<input type="submit / reset / button">	<button type="submit / reset / button > </button>