HTML - input

input 태그

웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, <input> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나입니다.22가지 type을 지원합니다. submit, reset, button 이외에 문자열, 숫자, 시간, 파일 등 데이터 형식에 따른 다양한 선택지가 있습니다.

<input type=" "> 속성

type="submit" 📌	<input>을 form handler에 데이터를 제출하기 위한 버튼으로 지정한다. form handler는 보통 데이터를 처리하는 서버단 페이지로 지정된다. 버튼에 value 속성을 지정하면 <input>에 기본값(default value)로 표시된다.
type="reset" 📌	<input>을 초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다. 기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
type="button" 📌	<input>을 버튼으로 지정한다.
type="img"	<input>을 이미지버튼으로 지정한다. <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
type="text"	<input>을 한 줄 입력 가능한 텍스트필드로 지정한다. input의 기본 type이다. size값을 지정하면 필드 너비가 자동조정된다. 기본 size값은 "20"이다.
type="search"	<input>을 검색필드로 지정한다. 일반적인 텍스트필드처럼 동작한다.
type="password"	<input>을 암호필드로 지정한다. 입력한 텍스트는 별표나 원으로 마스킹된다.
type="tel"	<input>을 전화번호 필드로 지정한다. pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"과 함께 사용해서 형식을 지정할 수 있다.
type="email"	<input>을 이메일을 포함해야하는 입력필드로 지정한다. 브라우저에 따라 제출 시 이메일 주소 유효성검사가 자동으로 이루어진다. 일부 스마트폰에서는 type="email"을 인식하고 키보드에 ".com"를 추가로 띄워준다.
type="url"	<input>을 URL주소를 포함해야하는 입력필드로 지정한다.
type="number"	<input>을 숫자 입력만 가능한 필드로 지정한다. min, max값을 지정하면 자릿수에 따라 필드 너비가 자동조정된다. (그림은 min="-10000"일 때)
type="range"	<input>을 슬라이드 컨트롤과 범위 내 숫자를 선택할 수 있는 컨트롤로 지정한다. 기본 범위는 0부터 100이고, min, max, step 속성을 추가로 지정할 수 있다.
type="radio"	<input>을 라디오버튼으로 지정한다. 선택지 중 단 하나의 항목만 선택할 수 있다.
type="checkbox"	<input>을 체크박스로 지정한다. 선택지 중 0개, 1개 또는 여러 개를 선택할 수 있다.
type="color"	<input>을 색상팔레트로 지정한다. value="#ff0000"과 같이 헥사코드로 기본값을 지정할 수 있다.
type="time"	<input>을 Time Picker로 지정한다. (no time zone)
type="date"	<input>을 Date Picker로 지정한다. min, max속성으로 날짜 범위를 지정하면 Date Picker 캘린더에 지정한 기간만 활성화된다.
type="datetime-local"	<input>을 Date Picker & 시간입력 필드로 지정한다. (no time zone)
type="week"	<input>을 Week Picker로 지정한다.
type="month"	<input>을 연도와 달을 Picker로 지정한다.
type="file"	<input>을 '파일선택 버튼'과 '선택된 파일 표시'로 지정한다.
type="hidden"	<input>을 숨겨진 입력필드로 지정한다. 사용자가 보거나 수정할 수 없는 데이터를 포함하는 용도로 사용한다. 개발자 도구에서보거나 편집할 수 있으므로 보안의 형태로 사용해서는 안된다. <input type="hidden" id="custId" name="custId" value="3487">

 

이 외에도 input 태그는 다양한 속성을 가지고 있습니다. 자주 쓰는 속성 이외에는 MDN 같은 사이트를 참고합시다.

 

참고:https://365kim.tistory.com/64