[HTML] <input>

<input>

1. type

1) text

텍스트 필드

• 입력 값에서 개행은 자동적으로 제거됨.
• dir : 텍스트 방향성을 지정하는 속성 (ltr, rtl)

2) password

• 비밀번호 텍스트 입력 필드 (사용자가 입력된 내용이 감춰져서 보여짐)
• maxlength 속성으로 최대 입력 글자수를 제한할 수 있음

3) checkbox

• 여러 개 선택 가능한 체크박스
• 체크된 아이템은 해당 아이템에 지정된 value 속성을 전송함
• checked 속성을 통해 무슨 아이템이 선택 되었는지 나타냄
• indeterminate 속성을 통해 불확정 상태의 아이템을 나타낼 수 있음
  HTML이 아닌 자바스크립트로 속성 지정 (https://css-tricks.com/indeterminate-checkboxes/)

4) radio

• 한 개만 선택 가능한 라디오 버튼
• 체크된 아이템은 해당 아이템에 지정된 value 속성을 전송함
• checked 속성을 통해 무슨 아이템이 선택 되었는지 나타냄
• name 속성의 값이 같은 경우, 같은 라디오 버튼 그룹에 속하게 되어, 한 개만 선택 가능하도록 제한됨

5) button

• 누를 수 있는 버튼
• value 속성으로 버튼 안의 텍스트 설정

6) file

• 파일 선택 제어 요소
• accept 속성으로 선택 할 수 있는 파일 형식을 정의

7) image

• 그래픽 전송 버튼
• src 속성과 alt 속성을 반드시 적용해야 함
• width와 height를 적용하여 이미지의 사이즈를 정의할 수 있음

8) hidden

• 서버에 값을 전송할 수 있지만 보여지지 않는 제어 요소

9) reset

• form 안의 내용을 기본값으로 reset하는 버튼

10) submit

• form을 전송하는 버튼

2. type (HTML5)

1) color

• 색상 선택
• value 속성으로 기본값 설정 가능 (헥스코드)

2) email

• 이메일 입력 제어 요소
• 빈 문자열인지, 이메일 주소에 적합한 문자열인지 검증

  /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
  

3) url

• url 입력 제어 요소
• 빈 문자열인지, 이메일 주소에 적합한 문자열인지 검증
• 입력값에서 공백이나 개행은 자동적으로 제거됨
• pattern 속성으로 정규식을 지정하여 형식을 제한할 수 있음
• maxlength 속성으로 글자수 제한

4) search

• 검색어 입력 제어 요소
• 입력값에서 개행은 자동적으로 제거됨
• dir : 텍스트 방향성을 지정하는 속성 (ltr, rtl)

5) tel

• 전화번호 입력 제어 요소
• 입력값에서 개행은 자동적으로 제거되나, 유효성 검증을 하지 않음
• pattern 속성으로 정규식을 지정하여 형식을 제한할 수 있음
• maxlength 속성으로 글자수 제한

PC에서는 비슷해보이지만 모바일에서 포커스 시 키패드가 다르게 팝업된다

6) number

• (부동 소숫점) 숫자 입력 제어 요소

7) range

• 명확한 값이 중요하지 않은 숫자 입력 제어 요소
• 기본값

  min="0" max="100" value="중간값 혹은 min값" step="1"
  

8) date

• 년, 월, 일 입력 제어 요소
• min, max 속성으로 제한 가능 (yyyy-mm-dd)

9) month

• 년, 월 입력 제어 요소
• min, max 속성으로 제한 가능 (yyyy-mm)

10) week

• 년, 주 입력 제어 요소
• min, max 속성으로 제한 가능 (yyyy-Wn)

11) time

• 시, 분 입력 제어 요소
• min, max 속성으로 제한 가능 (hh:mm:ss)

검증이 이루어지는 input 요소는 CSS 선택자 :valid, :invalid로 선택 가능하다.

3. global attribute

​