<input>

용어

input: 입력, 입력 장치

정의 및 사용

<input>태그는 사용자가 글자, 텍스트를 넣을 수 있도록 한다. Input 영역의 기본값은 text이고, 타입(속성)을 지정하여 옵션을 넣으면 한 줄 글상자, 확인 상자, 라디오 버튼, 입력버튼, 그림 등의 다양한 방법으로 설정할 수 있다.

HTML에서는 닫는 태그 없이 사용하지만, XHTML에서는 반드시
<input />와 같이 닫는 태그를 사용하여야 하며, 입력요소를 위한 레이블을 정의하기 위해서는 <label>태그를 사용한다.

브라우저 지원

IE6 지원IE7 지원IE8 지원IE9 지원IE10 지원Chrome 지원Firefox 지원Opera 지원Safari 지원

모든 주요 브라우저에서 지원

접근성 이슈

  • <a href=”#none”><img src=”” /></a> 방식으로 버튼을 구현하지 말고 <input type=”submit” />, <input type=”image” />,으로 버튼을 사용하자. 스크린 리더기에서 <a>로 마크업 된 버튼은 ~링크라고 읽어주지만 submit 이나 input 으로 구현된 마크업은 전송이라는 단어를 함께 읽어준다.
  • 최근에는 자동 포커스 이동(마우스를 자유롭게 사용하지 못하는 환경에서 자동 포커스 이동은 매우 좋지 않은 기능이다)이라던지 전화번호 폼 박스를 앞,중간,뒷 번호로 구분짓는 것을 사용하지 않도록 권장하지만 그 외 폼 박스가 나눠져 있는 경우에는 label 로 연결하지 않고 각각 title로 표현한다.
  • CSS로 width, height만 변경 가능한 input 요소의 속성들인 checkbox, radio, file, hidden 속성과 select, option 요소에는 되도록이면 강제로 자바스크립트나 그 외 마크업 방법으로 스타일을 입히지 않도록 한다. 자바스크립트로 스타일을 입힐 경우 스크린리더기나 키보드 접근이 보장 되지 않으며, 다른 마크업으로 구현할 경우 의미에 맞지 않는 상황이 생기게 되므로 서식 요소를 구현할 때에는 기능과 디자인을 충분히 고려하여 작업한다.

구문

속성 값 설명
속성 설명
accept audio/*
video/*
image/*
MIME_type
타입 속성값이 file일 경우, 업로드할 파일의 MINE 타입을 지정한다.
align left
right
top
middle
bottom
HTML4에서 삭제되었으며, HTML5에서는 지원하지 않는다. 정렬 방법을 지정하는 속성이지만 css(스타일)로 대신 사용한다.
alt text 타입 속성 값이 “image”일 경우 이미지 대신 표시할 대체 텍스트를 지정한다.
checked checked 타입 속성 값이 “checked”, “radio”일 경우, 체크된 상태로 표시하게 한다.
disabled disabled 페이지가 로드될 때 폼 구성요소를 선택할 수 없게 한다. 수정이 불가능하며 데이터 전송도 되지 않는다.
maxlength number 타입 속성 값이 “text”, “password”일 경우, 입력 가능한 최대 문자 수를 지정한다.
name text 입력 요소의 이름을 지정한다.
readonly readonly 타입 속성 값이 “text”, “password”일 경우, 요소의 값을 수정할 수 없는 읽기전용으로 지정하며, disabled와 다르게 데이터 전송은 가능하다.
size number 타입 속성 값이 “image”일 경우, 전송 버튼 이미지의 url을 지정한다.
type button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week 입력 구성 요소의 종류를 지정한다.
value text 입력 구성 요소의 값을 지정한다.
autocompletenew on, off 기본 값은 on 이다. 개인정보와 같은 보안에 민감한 내용은 off 로 하고, 검색이나 공개되어도 되는 정보는 on 을 사용할 수 있다.
autofocusnew autofocus 값은 autofocus 은 하나이며 페이지가 로딩되었을 때 키보드 포커스가 해당 input에 위치하도록 한다.
formnew form_id 해당 input 요소가 form 외부에 위치했을 때 input에 form 속성을 추가하여 연결하고자 하는 form 의 id값을 적어주면 그 폼에 속하게 된다.
formactionnew URL type=”submit” 과 type=”image”에만 사용하며 해당 submit 기능을 받는 페이지의 url을 값에 적어준다.
formenctypenew application/x-www-form-urlencoded,
multipart/form-data,
text/plain
type=”submit” 과 type=”image”에만 사용하며 submit 할 때 form-data의 엔코딩 형식을 알려준다.
formmethodnew get, post type=”submit” 과 type=”image”에만 사용하며 submit 할 때 post 방식인지 get 방식인지 URL 형태를 지정해준다.
formnovalidatenew formnovalidate type=”submit”에만 사용하며 값의 유효성을 검증하지 않고 그대로 submit 시킨다. 값은 속성 이름과 같이 formnovalidate를 적어준다.
formtargetnew _blank, _self, _parent, _top, framename type=”submit” 과 type=”image”에만 사용하며 submit된 결과를 어떤 브라우저 형식으로 보여줄 지 지정한다.
width, heightnew pixels type=”image”에만 사용하며 pixel단위이다.
listnew datalist_id 입력될 값의 옵션을 미리 제안해주는 속성이며 html5의 새로운 요소인 list의 id값과 매칭시켜주면 된다. 기능적인 면에서는 자동완성검색과 비슷하며 마크업 면에서는 select의 option과 비슷하다. 단지 input 자체에 option 요소가 있는 것은 아니라는 것이다.

예제

목록 으로

  • 김대영

    2014년 1월 16일, 11:24 오전

    [답변]

    label 태그에 닫힘이 없습니다. 괜찬은 것인지 아닌지 제가 아직 구분을 할 수 있는 레벨에 아니여서 이렇게 또 글을 남겨봅니다. 감사합니다.

    • kiris

      2014년 1월 16일, 11:30 오전

      [답변]

      닫힘 라벨 태그에 슬러시 추가했습니다~ 감사합니다~^^

댓글