HTML input tag

input tag에 대해 알아보자

type

• button : button 태그랑 같음
• checkbox
• color
• data : 달력
• email
  • 일반 텍스트 필드 처럼 보이지만 유효성 검증 매개변수가 존재, 브라우저와 장치가 동적장치를 지원하는 경우 적합한 키보드 보여줌
• file
• hidden : 보여줄 필요는 없지만 어떤 값을 서버로 전송해야 될 때 사용
• image : img 태그랑 같음
• month : 연과 월을 지정할 수 있는 컨트롤. 시간대는 지정 불가
• number : 숫자만 입력되고 스피너를 표시하고 동적키보드도 지원
• password : 값이 가려진 한줄의 필드, 사이트가 안전하지 않으면 사용자에게 경고를 함
• radio : 같은 name값을 가진 여러개 중에서 하나의 값을 선택하게 하는 라디오 버튼
• range : 값이 가려진 숫자를 입력하는 컨트롤(음량 조절)
  • 디폴트는 중간범위
• reset : form 초기화, 사용할 필요 없음
• search : 검색 문자열을 입력하는 텍스트 필드. 줄바꿈 제거 됨, 동적키보드에서 엔터 대신 돋보기 모양 표시
• submit : button(type:submit)과 동일
• tel : 동적키보드에서 전화번호 입력하는 키패드 표시
• text : default, 줄바꿈은 자동으로 제거 됨
• time : 시간대가 없는 시간값을 입력
• url : url을 입력하는 필드, 검증 매개변수 존재
• week : 시간대가 없는 주-년 값 - 이번주가 올해의 몇번째 주인지 표시

Attributes

• name : form으로 전송 시 key
• value : form으로 전송 시 value

고찰

name 보러 왔다가 input type이 이렇게 많은 종류가 있는지 몰랐고 form 양식을 만들 때 단순히 input text만 사용하지 않고 적절한 type을 사용하면 더 좋은 사용자 경험을 줄 수 있을 것 같다.

참고 문헌

• MDN input