대화형 컨트롤을 만드는 태그
<input>태그 (MDN)
:: 대화형 컨트롤을 만들 때 사용되는 태그.
:: type값에 따라 매우 다양한 작동방식을 갖는다.
:: 같은 속성값도 타입에 따른 다른 작동 방식을 갖을 수 있으니 사용에 주의해야한다.
:: type값을 지정하지 않을 경우의 기본값은 'text'이다.
:: 작동방식이 타입에 따라 크게 달라지지 않는 속성은 가장 마지막에 따로 정리했다.
1. <input type="text"> (MDN)
:: 한 줄 짜리 텍스트를 입력하는 텍스트 박스를 만든다.
:: 줄바꿈문자는 자동으로 제거된다.
:: 유효성 검사를 하지 않을 경우 입력값은 ""(=null)일 수 있다.
텍스트 타입과 관련된 주요 속성
:::: size : 입력 필드의 넓이를 지정한다. 설정하지 않을 경우 기본값은 20이다.
-- 양의 정수를 값으로 갖는다. CSS에서 설정한 너비가 크기 속성보다 우선된다.
:::: maxlength : 최대로 입력가능한 최대 문자 수(UTF-16코드 단위)를 지정한다.
-- 양의 정수를 값으로 가지며, minlenth값보다는 크거나 같아야 한다.
-- 브라우저에서는 일반적으로 maxlength 이상의 문자를 입력할 수 없게 막는다.
-- 혹여라도 더 많이 입력되었을 경우 제약 조건 유효성 검사에 실패한다.
:::: minlength : 사용자가 입력해야하는 최소 문자 수(UTF-16코드 단위)를 지정한다.
-- 음이 아닌 정수를 값으로 가지며, maxlength 값보다는 작거나 같아야 한다.
-- 입력된 값이 지정된 값보다 적을 경우 제약 조건 유효성 검사에 실패한다.
:::: pattern : 유효한 JS정규표현식을 값으로 갖는다.
-- 입력된 값이 정규표현식에 맞지 않을 경우 제약 조건 유효성 검사에 실패한다.
-- 값이 지정되지 않거나 유효하지 않을 경우 무시된다.
:::: list : 사용자에게 제안할 자동 완성 옵션을 포함하는 <datalist> 태그의 id를 값으로 갖는다.
2. <input type="search"> (MDN)
:: text 타입과 기본적으로 같지만 브라우저에 따라 검색에 특화된 기능을 제공한다.
:: ex) 필드를 클리어하는 삭제 버튼, 동적 키패드에서 엔터키 대신 검색 버튼 제공
3. <input type="url"> (MDN)
:: text 타입과 기본적으로 같지만 입력된 값이 url 구문이 맞는지 확인하는 유효성 검사가 포함되어 있다.
-- 유효성 검사를 통과하는 경우는 1. 입력값이 없거나 2. "urlscheme://restofurl"의 형식일 때이다.
-- ':valid', ':invalid' CSS 가상 클래스가 자동으로 적용된다.
4. <input type="email"> (MDN)
:: text 타입과 기본적으로 같지만 입력된 값이 email 구문이 맞는지 확인하는 유효성 검사가 포함되어 있다.
-- 유효성 검사를 통과하는 경우는 1. 입력값이 없거나 2. "username@domin(.tld)"의 형식일 때이다.
-- ':valid', ':invalid' CSS 가상 클래스가 자동으로 적용된다.
5. <input type="tel"> (MDN)
:: text 타입과 기본적으로 같다. url, email 타입과는 다르게 유효성 검사가 포함되어 있지는 않다.
-- 이는 전화번호 양식이 매우 다양하기 때문으로 pattern 속성으로 유효성 검사를 포함시키는 경우가 많다.
-- 동적 키패드를 사용할 경우 전화 번호 입력에 최적화 된 맞춤형 키패드를 제공한다.
6. <input type="password"> (MDN)
:: text 타입과 기본적으로 같으나 입력된 문자를 '*'이나 '•'으로 표시한다.
-- 구체적인 표시 방법은 브라우저마다 다를 수 있다.
썸네일용