HTML input tag

gth1123·2021년 8월 20일
0

HTML

목록 보기
4/11

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을 사용하면 더 좋은 사용자 경험을 줄 수 있을 것 같다.

참고 문헌

profile
움직이는 만큼 행복해진다

0개의 댓글