HTML+CSS 기초 강의 - 18. 폼만들기 기초 7 - <input> 태그 고급 속성

속성 

사용값 

설명 

accept

audio/*, 

video/*, 

image/*, 

.gif, .jpg, .png, .xls 등 파일확장자

태그를 파일 선택자로 사용할 경우, 미디어 타입, 또는 파일 확장자(.포함)를 지정하면 해당 종류의 파일만 파일 선택 대화상자의 기본 필터 조건으로 적용됩니다.

여러개의 파일 확장자를 쉼표로 구분해 지정할 수도 있습니다.

예를 들어 .jpg 를 accept 조건으로 지정하면

이렇게 파일 대화상자 기본 선택 필터로 적용되어 보여집니다.

dirname

텍스트

입력필드 또는, 파일선택자 등으로 파일 선택시 입력된 텍스트 내용의 방향을 알려주는 추가 필드의 이름을 지정합니다.

폼 전송시 서버단에는 "dirname"에 입력한 이름의 필드가 추가로 전송된 것으로 보여지며 이 필드에는 ltr(왼쪽에서 오른쪽으로 읽기), rtl(오른쪽에서 왼쪽으로 읽기) 와 같은 값이 입력 언어권에 따라 자동으로 지정되어 전송됩니다.

예를들어

이런 필드를 가진 폼을 서버로 전송하면 전송값은 다음과 같이

"username=입력값&usernamedirection=ltr"

usernamedirection 필드에 방향값(ltr/rtl)을 가진 추가 필드가 자동으로 전송됩니다.

form

폼ID

태그가 속한 한개 이상의 폼 ID를 지정합니다.

폼 외부에 태그를 생성할 필요가 있는 경우 이 속성을 이용하면 해당 요소가 폼에 속한 필드인 것처럼 처리할 수 있습니다.

폼 전송시에도 함께 전송됩니다.

단, 인터넷익스플로러에서는 지원되지 않습니다. 주의해야하고, 가능하면 사용하지 않을 것을 권장합니다.

formaction

URL

summit 버튼에 사용하는 속성으로 클릭시 서버에서 전송된 폼 내용/파일 을 처리하는 URL을 지정합니다. formaction URL을 지정할 경우

formenctype

application/x-www-form-urlencoded

multipart/form-data

text/plain

이미지 타입과 submit 타입에 사용하는 속성으로 데이터가 서버로 전송될 때 데이터가 인코딩 되는 타입을 결정합니다.

반드시 3가지중 한가지 값이어야 하며, 없을 경우 text/plain이 기본값입니다.

파일 업로드를 할 경우 반드시 multipart/form-data 로 지정해야 합니다.

formaction 속성과 마찬가지로 submit 버튼 타입에 사용할 경우

formmethod

"get" 또는 "post"

submit 타입이나 이미지 타입에 사용가능합니다. 태그의 method 속성과 동일한 역할을 합니다. 폼 데이터를 get 방식으로 보낼지 post 방식으로 보낼지를 지정합니다.

formnovalidate

formnovalidate

철자에 주의해야 하는데 no validate 입니다. 속성이 있을 경우 전송하는 폼의 값체크를 하지 않습니다.

하지만 폼 전송 후 처리는 어디까지나 서버단의 몫이기 때문에 서버에서 처리할 때 이 속성을 무시할 수는 있습니다.

전역으로 사용하려면 태그에 novalidate 속성을 사용하면 됩니다.

formtarget

_blank

_self

_parent

_top

프레임명

submit 버튼, 또는 이미지 타입에 사용하며, 폼 전송 후 응답페이지를 표시할 창을 지정합니다.

_blank - 새창/새탭

_self - 기본값, 현재창/현재탭/현재프레임

_parent - 바로 위 부모프레임

_top - 최상위 프레임

프레임명 - 해당 프레임에 결과 페이지 표시

태그의 target 속성과 동일하며, formtarget 속성 지정시 덮어쓰기 됩니다.

  이름:

  이메일:

list

데이터리스트ID

쌍으로 사용하는

min

숫자,날짜

요소의 최소값을 지정. 타입이 날짜인 경우 최소 날짜 지정 가능.
date 타입은 인터넷익스플로러에서는 지원되지 않습니다.

max

숫자,날짜

요소의 최대값을 지정. 타입이 날짜인 경우 마지막 날짜 지정 가능.
date 타입은 인터넷익스플로러에서는 지원되지 않습니다.

maxlength

숫자

타입이 텍스트인 경우 최대 입력 가능한 글자수(한글기준) 지정. 일반적으로 size 속성과 함께 사용해 텍스트 입력 필드의 크기와 최대 입력 글자수를 지정.

pattern

정규표현식

정규표현식으로 입력 요소의 입력 가능한 값을 한정합니다. 입력 가능한 값이 아닌 경우 경고메시지가 표시되고 폼이 전송되지 않습니다.

얘를 들어

단, 정규표현식 작성시 공백 체크까지 하지 않을 경우 미입력 체크가 되지 않으므로 required 와 함께 사용할 것을 추천합니다.

step

숫자

태그의 타입이 number 인 경우에만 적용됩니다. 

다른 입력 타입에는 지정해도 적용되지 않습니다. 

step 으로 입력한 숫자(정수, 실수 모두 가능)의 배수 단위 숫자만 입력할 수 있도록 제한합니다.

숫자(number) 입력 필드에 입력 포커스가 되면 오른쪽에 업/다운 화살표가 표시되는데, 업/다운 화살표 클릭시 가장 인접한 배수단위 숫자로 바뀝니다. 배수 단위값으로 입력을 제한하는 것이 step 속성입니다. 이 속성이 없을 경우 간격은 1이 됩니다.

배수 단위에 맞는 숫자값이 아닌 경우 경고 메시지가 표시되고 폼은 전송되지 않습니다.

예를 들어 step 값으로 1.5 를 입력한 경우 0, 1.5, 3, 4.5 이렇게 step 의 배수 단위값만 사용할 수 있게 제한됩니다.