HTML & CSSHTML

Input 태그

html, html input

태그

Input 태그란?

Input 태그는 기본적으로 입력 항목을 만드는 태그다.
체크박스 등의 클릭하는 버튼도 input 태그를 활용해 만든다.
원래는 form 태그 안에 속해야 하지만 ajax통신에서는 그러지 않아도 된다.

  • id 속성을 사용하면 label 태그를 사용할 수 있다.

하지만 브라우저마다 지원이 다르기 때문에 이 사이트를 참조하여 얼마나 지원하는 지 알아보면 좋다.

브라우저지원확인

Input 태그 사용하기.

  • type=”hidden”
    히든필드는 관리자가 알아야 할 정보를 입력할 때 사용합니다. 그렇기 떄문에 사용자에게는 보이지 않는다.(view상에서)

  • type=”text”
    텍스트 필드를 만들 때 사용한다. 폼에서 가장 많이 사용한다고 볼 수 있다.

    <input type=”text” [속성=”속성값”]>

속성에는 name, size(필드 길이 지정), value(화면에 표실될 내용), maxlength(최대 길이)가 있다.

  • type=”password”
    비밀번호를 입력하는 창을 만들 때 사용한다.

    <input type=”password” [속성=”속성값”]>

  • type=”search”,”url”,”email”,”tel”

각각, 검색 상자, URL 입력, 메일 주소 입력, 전화번호 입력 창을 만들 때 사용한다.

  • type=”number”

사용자가 입력한 내용을 숫자로 인식하는 창이다. 스핀 박스를 사용해 갯수를 조정할 수 있다.

  • type=”range”

슬라이드 막대로 범위를 지정할 수 있다. 이 속성은 브라우저 지원 버전을 확인 후 사용하여야 한다.

number, range모두 min,max,step(짝수,홀수 등 특정 숫자 지정),value 속성을 사용할 수 있다.

  • type=”radio”, “checkbox”

라디오 버튼과 체크박스 버튼을 생성한다. 이 둘은 여러항목 중 자신이 원하는 항목을 선택할 때 사용한다.
한 개만 선택할 경우 라디오 버튼, 중복 체크가 가능하도록 할 때는 체크박스 버튼을 사용한다.

속성으로는 name, value, checked(기본으로 선택해 놓을 화면) 속성이 있다.

  • type=”color”

색상을 선택할 수 있게 창을 만들어준다. 색상은 16진수로 표시되기 때문에 텍스트로 색상을 선택할 수는 없다.

<input type="color" value="기본색">
  • type=”date”, “month”, “week”

날짜를 표시하는 속성이다.

<input type="date | month | week" [value="기본값" 속성="속성값"]>

date로 지정하면 yyyy-mm-dd 형식으로 month는 yyyy-mm, week는 yyyy-w24로 표시된다.

  • type=”time”,”datetime”,”datetime-local”

시간 지정하는 속성이다. 시간을 지정할 때는 time, 날짜와 시간은 datetime,datetime-local을 사용하면 된다.
min,max,step,value를 사용할 수 있다.

  • type=”submit”,”reset”

서버 전송과 리셋하기 버튼이다. submit은 서버로 전송하는 버튼으로 form태그에서 지정한 폼 처리 프로그램에 넘겨진다.

  • type=”image”

submit버튼 대신 전송 이미지를 넣을 수 있다.

  • type=”button”

폼 안에 버튼 형태를 만들 수 있다. 스크립트 함수를 넣어서 사용하여야 한다.

  • type=”file”

파일을 첨부할 수 있다.

Input 태그 속성들

  • autofocus

원하는 요소에 입력 커서를 표시할 수 있다.

  • placeholder

텍스트를 입력할 때 힌트를 표시할 수 있다. 필드안에 그 속성에 어떠한 값을 입력해야 하는 지 알려줄 수 있다.

  • readonly

읽게만 만드는 창을 만들 때 사용하는 속성이다. true, false값을 지정해도 되고 readonly=”readonly”라고 적어도 된다.

  • required 속성

필수적으로 입력하여야 하는 곳에 사용한다.

  • min,max,step 속성

최솟값, 최대값, 허용 범위를 설정한다.

  • size,minlength,maxlength

텍스트 길이, 최솟값, 최대값을 설정한다.

실습(상품 주문서 만들기)

  • 이 예제는 Do it! HTML5 + CSS3 웹 표준의 정석 책을 참고하였습니다.
Share